Layui的table模块导出所有数据,无需修改代码,完美解决方案
发表于:2023-03-18 12:59:59浏览:4516次
layui table模块自带的导出功能仅支持导出单页的数据,确实是一个硬伤,百度一遍之后发现大部分都是通过重新发送Ajax请求,然后让后端进行处理,或者是生成excel下载链接,或是后端返回所有数据然后,用table.exportFile导出。
结合以上的方式得出一个综合的解决方案,并写了个基于layui的table模块的插件tablePlus,调用的时候三步设置即可,数据完美导出,支持筛选导出,无需另外开发,无需过多的代码,三行代码搞定,兼容原来的layui table模块,推荐大家使用。
注意:防止导出数据过多消耗服务器资源,插件设置支持分页导出,默认一次导出1000条,这个数据可以自己配置,服务器牛逼的可以配置10000+。
使用超级简单,需要引入插件后,使用的时候,增加这两个参数即可。
is_excel:true,//开启导出excel按钮
excel_limit:2000,//每次导出excel的条数,默认1000
具体使用案例效果如下:
可以到勾股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
}
]
]
});
推荐文章
- 开源OA办公系统 — 勾股OA 5.6.8 新春版发布,企业办公的卓越选择
- 移动端微信、企业微信中使用H5的input file时只能选择手机的图片,不能选择文档文件的解决方案
- ref, toRef, toRefs,reactive, defineComponent, computed, unref, toRaw, watchEffect, onUpdated 10个VUE3前端API总结
- Element-plus,动态添加图标的方式
- GitHub 开源了多款字体,支持自定义字重、宽度和倾斜度
- 82个常规的前端JavaScript方法封装(71~82)
- 不知道是什么时候起,直播行业也开始内卷了
- 调查:编程语言JavaScript最流行
- ThinkPHP数据查询去重distinct和group by方法
- HTML+CSS+JS 基于浏览器实现打印58小票

