jexcel_最简单的框架

1.  固定数据的jexcel框架

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="web_page_ssc_test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <%--CSS--%>
    <link href="/web_page_ssc/css/jexcel.css" rel="stylesheet" />
    <link href="/web_page_ssc/css/jsuites.css" rel="stylesheet"/>
    <%--<link href="/web_page_ssc/css/jexcel.datatables.css" rel="stylesheet"/>--%>

    <%--JS--%>
    <%--Jexcel包--%>
    <script src="../web_page_ssc/js/jexcel.js"></script>
    <script src="../web_page_ssc/js/jsuites.js"></script>
    
</head>

<body>
    <form id="form1" runat="server">

        <div>
            <br />
            &nbsp;总记录条数:<input id="Text1" type="text" />&nbsp;  
            <br />
        </div>
        <div>
            <p id="mytable"></p>
        </div>

    </form>
</body>
<script>

    data = [
        ['Mazda', 2001, 2000],
        ['Pegeout', 2010, 5000],
        ['Honda Fit', 2009, 3000],
        ['Honda CRV', 2010, 6000],
    ];

    jspreadsheet(document.getElementById('mytable'), {
        data: data,
        columns: [
            { title: 'Model', width: 300 },
            { title: 'Price', width: 80 },
            { title: 'Model', width: 100,readOnly：true } //readOnly：true 代表这个单元格数据只能读不能编辑
        ],
        
        search: true,          // 搜索 搜索自定义的新事件 onsearchstart、onserchrow  
　　　 　filters: true,         // 列搜索，是否需要过滤器 过滤数据      
        async: true,
        allowExport: true,     // 是否允许表导出 
        colWidths: [50, 80, 100, 100, 100, 80, 100, 100, 80, 80, 100, 70, 70, 70, 70, 80, 100], //列宽
　　　 　defaultColWidth:"50px",//默认列宽 
        defaultColAlign:"left",//默认列对齐方式
        tableOverflow: true,   // 是否允许表溢出溢出的时候右边有那个滚动条
        tableWidth: "1520px",  // 表宽度
        tableHeight: "430px",  // 表高度
        pagination: 2,        // 每页显示10行数据
        paginationOptions: [2, 3, 10, 50], //用户自主选择每页需展示的数据条数
        tabs: true,            //标签
        toolbar: true,         //工具栏 需加载<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> 目前使用不可
        //toolbar: '#toolbar',    //工具栏
        editable: true,        // 启用行内编辑        
        striped: true,          //表格斑马纹  
        sortable: true,         //排序
　　　　　sortname: "ID",         //设置默认的排序列
        sortOrder: "asc",       //排序方式 asc升序 desc降序//cahce: true,        
        //queryParams: TableInit.queryParams,     //要传递的参数，这里是一个方法名，之后实现(重要，没有方法传递时，表格不显示)
        //sidePagination: "server",   //分页的类型“服务端”还是“客户端”  开启server，开发机上没有分页效果
        //showColumns: true,      //设置可以显示的列
        //minimumCountColumns: 2, //最少显示的列数，对应上条
        //showRefresh: true,      //刷新按钮
        //clickToSelect: true,    //点击选择
        //singleSelect: true,     //单选
        ////showToggle:true,      //显示切换
        ////showFooter: true,     //显示表底
    });
</script>
</html>
复制代码

2. 调用数据的jexcel框架

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="web_page_ssc_test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <%--CSS--%>
    <link href="/web_page_ssc/css/jexcel.css" rel="stylesheet" />
    <link href="/web_page_ssc/css/jsuites.css" rel="stylesheet"/>
    <%--<link href="/web_page_ssc/css/jexcel.datatables.css" rel="stylesheet"/>--%>

    <%--JS--%>
    <%--Jexcel包--%>
    <script src="../web_page_ssc/js/jexcel.js"></script>
    <script src="../web_page_ssc/js/jsuites.js"></script>
    
</head>

<body>
    <form id="form1" runat="server">

        <div>
            <br />
            &nbsp;总记录条数:<input id="Text1" type="text" />&nbsp;  
            <br />
        </div>
        <div>
            <p id="mytable"></p>
        </div>

    </form>
</body>
<script>

    //data = [
    //    ['Mazda', 2001, 2000],
    //    ['Pegeout', 2010, 5000],
    //    ['Honda Fit', 2009, 3000],
    //    ['Honda CRV', 2010, 6000],
    //];

    jspreadsheet(document.getElementById('mytable'), {
        //data: data,
        url: '/web_page_ssc/Handler1.ashx',  // 获取数据库数据
        columns: [
            { title: 'Model', width: 300 },
            { title: 'Price', width: 80 },
            { title: 'Model', width: 100 }
        ],
        
        search: true,          // 搜索 搜索自定义的新事件 onsearchstart、onserchrow        
        async: true,
        allowExport: true,     // 是否允许导出 
        colWidths: [50, 80, 100, 100, 100, 80, 100, 100, 80, 80, 100, 70, 70, 70, 70, 80, 100], //列宽
        tableOverflow: true,   // 是否允许表溢出溢出的时候右边有那个滚动条
        tableWidth: "1520px",  // 表宽度
        tableHeight: "430px",  // 表高度
        pagination: 2,        // 每页显示10行数据
        paginationOptions: [2, 3, 10, 50], //用户自主选择每页需展示的数据条数
        tabs: true,            //标签
        toolbar: true,         //工具栏 需加载<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> 目前使用不可
        //toolbar: '#toolbar',    //工具栏
        editable: true,        // 启用行内编辑        
        striped: true,          //表格斑马纹  
        sortable: true,         //排序
        sortOrder: "asc",       //排序方式
        //cahce: true,        
        //queryParams: TableInit.queryParams,     //要传递的参数，这里是一个方法名，之后实现
        //sidePagination: "server",   //分页的类型“服务端”还是“客户端”  开启server，开发机上没有分页效果
        //showColumns: true,      //设置可以显示的列
        //minimumCountColumns: 2, //最少显示的列数，对应上条
        //showRefresh: true,      //刷新按钮
        //clickToSelect: true,    //点击选择
        //singleSelect: true,     //单选
        ////showToggle:true,      //显示切换
        ////showFooter: true,     //显示表底
    });
</script>
</html>
复制代码

3.  jspreadsheet 相关参数

复制代码
url: '/web_page_ssc/Handler1.ashx',  // 获取数据  
        search: true,          // 搜索 搜索自定义的新事件 onsearchstart、onserchrow        
        async: true,
        allowExport: true,     // 是否允许导出 
        colWidths: [50, 80, 100, 100, 100, 80, 100, 100, 80, 80, 100, 70, 70, 70, 70, 80, 100], //列宽
        tableOverflow: true,   // 是否允许表溢出溢出的时候右边有那个滚动条
        tableWidth: "1520px",  // 表宽度
        tableHeight: "430px",  // 表高度
        pagination: 10,        // 每页显示10行数据
        paginationOptions: [10, 15, 20, 50], //用户自主选择每页需展示的数据条数
        tabs: true,            //标签
        toolbar: true,         //工具栏 需加载<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> 目前使用不可
        //toolbar: '#toolbar',    //工具栏
        editable: true,        // 启用行内编辑        
        striped: true,          //表格斑马纹  
        sortable: true,         //排序
        sortOrder: "asc",       //排序方式

        //cahce: true,        
        //queryParams: TableInit.queryParams,     //要传递的参数，这里是一个方法名，之后实现
        //sidePagination: "server",   //分页的类型“服务端”还是“客户端”  开启server，开发机上没有分页效果
        //showColumns: true,      //设置可以显示的列
        //minimumCountColumns: 2, //最少显示的列数，对应上条
        //showRefresh: true,      //刷新按钮
        //clickToSelect: true,    //点击选择
        //singleSelect: true,     //单选
        //showToggle:true,      //显示切换
        //showFooter: true,     //显示表底
        //filters: true,// 列搜索
        //allowInsertRow: false,// 禁用插入行
        //allowDeleteRow: false, // 禁用删除
        //allowDetailRow: false, // 禁用查看
        //allowExport: false, // 禁用保存为        
        //allowComments: true,
        //copyCompatibility: false, // 禁用复制粘贴
        //text: true,
        //tel: true,
        //email: true,
        //password: true,
        //number: true,
        //date: true,
        //month: true,
        //week: true,
        //time: true,
        //datetime: true,
复制代码

4. jspreadsheet 相关参数——鼠标右键菜单_翻译

复制代码
//鼠标右键菜单_翻译 OK
        text: {
            copy: '复制',
            paste: '粘贴',
            insertANewRowBefore: '在此前插入行',
            insertANewRowAfter: '在此后插入行',
            deleteSelectedRows: '删除选定行',
            saveAs: '保存为',
            about: '关于',
            noRecordsFound: '未找到记录',
            showingPage: '显示第 {0} 页，共 {1} 页',
            show: '显示',
            entries: '条目',
            insertANewColumnBefore: '在此前插入列',
            insertANewColumnAfter: '在此后插入列',
            renameThisColumn: '重命名列',
            deleteSelectedColumns: '删除选定列',
            orderAscending: '升序',
            orderDescending: '降序',
            editComments: '编辑注释',
            addComments: '添加注释',
            comments: '注释',
            clearComments: '清除注释',
            areYouSureToDeleteTheSelectedRows: '您确定要删除选定的行吗？',
            areYouSureToDeleteTheSelectedColumns: '您确定要删除所选列吗？',
            thisActionWillDestroyAnyExistingMergedCellsAreYouSure: '此操作将销毁所有现有的合并单元格。你确定吗',
            thisActionWillClearYourSearchResultsAreYouSure: '此操作将清除您的搜索结果。你确定吗',
            Search: '搜索',
            thereIsAConflictWithAnotherMergedCell: '与另一个合并单元格发生冲突',
            invalidMergeProperties: '合并无效',
            cellAlreadyMerged: '单元格已合并',
            noCellsSelected: '未选择单元格',
        },
复制代码

5. jspreadsheet 相关参数——日期选取器

复制代码
//日期选取器 OK
        options: {
            format: 'DD/MM/YYYY', //日期格式
            readonly: 0,          //允许键盘输入日期
            today: 0,             //今天是默认值
            time: 0,              //显示时间选择器
            resetButton: true,    //显示重置按钮
            placeholder: '',      //占位符
            // 翻译
            months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            weekdays_short: ['Su', 'M', 'T', 'W', 'T', 'F', 'Sa'],
            value: null,          //值
            onclose: null,        //onclose事件
            onchange: null,       //onchange事件
            fullscreen: false,    //全屏显示（这是屏幕尺寸＜800时自动设置的）
        },
复制代码

6. jspreadsheet 相关参数——列属性

复制代码
//列属性 OK
        columns: [
            //{
            //    title: 'checkbox',
            //    field: 'NO',         //第一列显示复选框，若单选，需加入singleSelect
            //    type: 'checkbox',
            //},
            //{
            //    field: 'id',               //数据键(数据库字段名)
            //    title: 'DBid',             //列名 （页面显示）
            //    sortable: true,            //是否允许排序
            //    align: 'center',           //居中                        
            //    footerFormatter: 'Total',  //表底显示合计
            //},

            { field: 'id', title: 'DBid', sortable: true, align: 'center', },//是否允许排序
　　　　　　　//{ field: 'checkbox', title: 'checkbox', sortable: true, align: 'center', type: 'checkbox', },  

            { field: 'Deliverydate', title: 'Deliverydate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },//日期选取
            { field: 'type', title: 'type', sortable: true, align: 'center',footerFormatter: 'Total',}, //表底显示合计
 ],
复制代码

 

posted @   AutomationAnywhere  阅读(538)  评论(0)  编辑  收藏  举报
相关博文：
·  jexcel_修改单元格并同步数据库
·  C# SQL JEXCEL 增删改查 （未完，持续编辑中）
·  EXCEL 笔记
·  4.JQuery
·  Ajax基础
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码：从基础到乱码解决
· SpringCloud带你走进微服务的世界
点击右上角即可分享
微信分享提示
AI IDE Trae