layui表格导出全部数据(比如:导出筛选结果) 的分享,亲测成功
众所周知,layui后台数据表格的导出功能只能导出首页的数据,并不能导出所有的数据,
比方说,总的数据有1000条,按"张三"查找,符合条件的有200条,如果需要导出这200条数据,官方的导出按钮是没有办法实现的 !
网上有很多大神给出了各种解决方案,比方说 新增一个数据接口,导出前请求一下,或者说改写官方的js文件,再就是通过后台实现,比方phpExcel 等等小弟不才,经过多番摸索,在不采用上述方案的情况下,改写了下 表格的渲染方式,成功实现导出所有数据,大佬勿喷!
现给出核心的代码,供大家参考,希望走过路过的高手参与讨论和优化,谢谢
- 封装一个表格渲染的自定义函数
var ajaxurl="{:U('Kehu/lst_ajax')}";
function renderTable(limit=10,searchParams=null,is_export=false) {
table.render({
elem: '#currentTableId',
//url: '__PUBLIC__/static/api/table.json',
url: ajaxurl,
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', '', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', sort: true, totalRowText: '合计'},
{field: 'khname', width: 200, title: '客户名称'},
{field: 'kguojia', width: 80, title: '国家', sort: true},
{field: 'khmobile', width: 120, title: '客户手机'},
{field: 'khjhadr', title: '客户地址', minWidth: 150},
{field: 'kpeople', width: 80, title: '联系人', sort: true,totalRow: true},
{field: 'kpay', width: 100, title: '付款方式', sort: true,totalRow: true},
{field: 'khas', width: 100, title: '客户身份'},
{field: 'gs_man', width: 100, title: '归属人', sort: true},
/* {title: '操作', minWidth: 120, toolbar: '#currentTableBar', align: "center"} */
]],
limits: [10, 15, 20, 25, 50, 100],
limit: limit, //作为参数传入
where: {searchParams: searchParams}, //搜索条件 作为参数传入
page: true,
//totalRow: true, //开启合计行
//size: 'sm', //小尺寸的表格
skin: 'line',
done: function (res, curr, count) { //导出
//console.log(res.data);
//exportData = res.data; //这里有个坑,反复试验了多次,如果是直接赋值,供后面的导出函数用,因为异步的原因,仍然只能导出首页的数据
if(is_export){ //非常重要, 是否导出标识,**
table.exportFile('currentTableId',res.data, 'xls');
}
}
});
};
- 页面加载,执行上述函数,加载表格
$(function () {
renderTable(10); // 默认情况下 ,无任何参数、不带导出功能 渲染表格
//其它代码省略。。。。
});
- 监听搜索
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field), //搜索的关键词字符串
result = result.replace(/\ +/g,""); //新增 去掉首尾空格
console.log(result);
//执行搜索重载 这都是官方代码,没有什么好解释的
table.reload('currentTableId', {
page: {
curr: 1
},
where: {
searchParams: result
}
}, 'data');
return false;
});
4.监听"导出筛选结果"
// 监听导出
form.on('submit(data-export-btn)', function (data) {
var result = data.field ; //搜索的关键词 对象
$.each(result,function(key,value){ //遍历对象 除去首尾空值
result[key] = result[key].trim();
})
var result = JSON.stringify(data.field); //转json
//console.log('点击了导出');
//console.log(result);
renderTable(100000,result,true); //limit 无穷大?这里有更好的写法吗? 求大神指点 ,是否导出 传入 true
});
以上便是核心的代码,亲测成功,欢迎各位大佬参与讨论!