您的当前位置:首页>全部文章>文章详情

Layui的table模块导出所有数据,无需修改代码,完美解决方案

发表于:2023-03-18 12:59:59浏览:898次TAG: #layui #Table #导出所有数据

layui table模块自带的导出功能仅支持导出单页的数据,确实是一个硬伤,百度一遍之后发现大部分都是通过重新发送Ajax请求,然后让后端进行处理,或者是生成excel下载链接,或是后端返回所有数据然后,用table.exportFile导出。

结合以上的方式得出一个综合的解决方案,并写了个基于layui的table模块的插件tablePlus,调用的时候三步设置即可,数据完美导出,支持筛选导出,无需另外开发,无需过多的代码,三行代码搞定,兼容原来的layui table模块,推荐大家使用。

注意:防止导出数据过多消耗服务器资源,插件设置支持分页导出,默认一次导出1000条,这个数据可以自己配置,服务器牛逼的可以配置10000+。

使用超级简单,需要引入插件后,使用的时候,增加这两个参数即可。

is_excel:true,//开启导出excel按钮
excel_limit:2000,//每次导出excel的条数,默认1000

具体使用案例效果如下:
图片alt

可以到勾股OA开源项目,体验各个列表的导出功能,tablePlus插件的下载,请到gitee下载。

开源项目:
https://gitee.com/gouguopen/office/

插件目录:
https://gitee.com/gouguopen/office/blob/master/public/static/assets/gougu/module/tablePlus.js

案例代码代码:

var table = layui.tablePlus;
    var pageTable = table.render({
            elem: '#test',
            title: '客户列表',
            toolbar: '#toolbarDemo',
            is_excel:true,//开启导出excel按钮
            excel_limit:2000,//每次导出excel的条数,默认1000
            url: "/customer/index/index", //数据接口
            cellMinWidth: 80,
            page: true, 
            limit: 20,
            cols: [
                [ //表头
                    {
                        field: 'id',title: '编号',align: 'center',width: 80
                    },{
                        field: 'name',
                        title: '客户名称'
                    ,{
                        field: 'intent_status_name',
                        title: '客户意向',
                        align: 'center',
                        width: 150
                    },{
                        field: 'user',
                        title: '联系人',
                        align: 'center',
                        width: 80
                    },{
                        field: 'mobile',
                        title: '手机号码',
                        align: 'center',
                        width: 100
                    },{
                        field: 'qq',
                        title: 'QQ号码',
                        align: 'center',
                        width: 100
                    },{
                        field: 'wechat',
                        title: '微信号',
                        align: 'center',
                        width: 90
                    },{
                        field: 'create_time',
                        title: '创建时间',
                        align: 'center',
                        width: 136
                    },{
                        field: 'update_time',
                        title: '最后编辑时间',
                        align: 'center',
                        width: 136
                    },{
                        field: 'source',
                        title: '来源渠道',
                        align: 'center',
                        width: 100
                    }, {
                        field: 'industry',
                        title: '客户所属行业',
                        align: 'center',
                        width: 120
                    },{
                        field: 'belong_name',
                        title: '所属员工',
                        align: 'center',
                        width: 80
                    },{
                        field: 'belong_department',
                        title: '所属部门',
                        align: 'center',
                        width: 90
                    }
                ]
            ]
        });