首页 > 其他分享 >jexcel_最简单的框架

jexcel_最简单的框架

时间：2023-06-14 11:22:51浏览次数：40  
标签：显示 框架 title 70 jexcel 简单 80 true 100

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 }
        ],
        
        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>

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',}, //表底显示合计
 ],

 

标签：显示,框架,title,70,jexcel,简单,80,true,100
From： https://www.cnblogs.com/automationanywhere/p/17362343.html

相关文章

  • 案例4 基于Excel的接口测试框架
    简单版读取以下格式excel（仅第一张Sheet），逐个发送接口，断言接口返回200，并将状态及错误信息写回Excel已知：Excel中接口编写格式规范如下url如果有查询参数，要写到url中，例如?a=1&b=2如果需要添加自定义请求头按key:value格式编写，:左右允许有空格，每行一个请求数据支持表单和JSO......
  • N1 安装 armbian 简单教程
    制作镜像选择Armbian_23.02.0_amlogic_s905d_bullseye_6.0.11_server_2022.12.08.img.gz，下载好之后，解压，利用rufus刷入u盘。安装由于盒子在刷入armbian前为安卓系统，已开启adb，mac的终端执行adbconnect192.168.123.193连接无线adb，192.168.123.193修改成N1的实际的ip地址，然后执行......
  • ssh 简单教程
    ssh配置免密码登录服务器生成密钥对执行ssh-keygen-ted25519-C"[email protected]"以生成密钥对，存放在~/.ssh文件夹下，id_ed25519.pub为公钥，id_ed25519为私钥。上传公钥到服务器这里以我的N1为例，执行ssh-copy-id-i~/.ssh/[email protected]和ssh-copy......
  • Zsh 的简单配置与使用
    安装starshipMacOS下执行curl-sShttps://starship.rs/install.sh|sh即可，Linux下（如Debian），执行curl-sShttps://starship.rs/install.sh|sh即可，然后执行starshippresetpure-preset>~/.config/starship.toml将预设主题设置为pure。安装zinit插件执行bash-c"$(curl--......
  • Sqlite3简单介绍与一些常用的例子
    Sqlite3简单介绍与一些常用的例子1:常用接口 个人比较喜欢sqlite,使用最方便，唯一的准备工作是下载250K的源；而且作者很热心，有问必答。以下演示一下使用sqlite的步骤，先创建一个数据库，然后查询其中的内容。2个重要结构体和5个主要函数：sqlite3              *pdb,数......
  • SSM框架学习之Spring浅谈（二）
    Spring常用注解@Controller:对应SpringMVC控制层，主要用户接受用户请求并调用Service层返回数据给前端页面。@Service:对应服务层，主要涉及一些复杂的逻辑，需要用到Dao层。@Component：通用的注解，可标注任意类为Spring组件。如果一个Bean不知道属于哪个层，可以使用@......
  • ASP.NET Core 6框架揭秘实例演示[38]：两种不同的限流策略
    承载ASP.NET应用的服务器资源总是有限的，短时间内涌入过多的请求可能会瞬间耗尽可用资源并导致宕机。为了解决这个问题，我们需要在服务端设置一个阀门将并发处理的请求数量限制在一个可控的范围，即使会导致请求的延迟响应，在极端的情况会还不得不放弃一些请求。ASP.NET应用的流量限制......
  • 微服务框架的学习路线
    一、微服务的大体架构二、微服务的学习路线 参考：1、微服务架构是什么？有哪些优点和不足？ ......
  • Swagger的简单使用
    1、引入依赖<dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><dependency><group......
  • 集合框架
    1.使用集合框架的缘由由于数组在创建时会默认定义数组长度，而数组长度固定不变，所以导致数组的赋值及创建会浪费内存空间，集合作为可以更改长度的“数组”，解决了内存浪费的现象。2.Java集合框架架构图（1）集合有两个父接口，Collection和Map（2）Collection有两个子接口List和Set（3）Li......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99