layui表格导出全部数据(比如:导出筛选结果) 的分享,亲测成功

layui表格导出全部数据(比如:导出筛选结果) 的分享,亲测成功

众所周知,layui后台数据表格的导出功能只能导出首页的数据,并不能导出所有的数据,
比方说,总的数据有1000条,按"张三"查找,符合条件的有200条,如果需要导出这200条数据,官方的导出按钮是没有办法实现的 !
网上有很多大神给出了各种解决方案,比方说 新增一个数据接口,导出前请求一下,或者说改写官方的js文件,再就是通过后台实现,比方phpExcel 等等小弟不才,经过多番摸索,在不采用上述方案的情况下,改写了下 表格的渲染方式,成功实现导出所有数据,大佬勿喷!
现给出核心的代码,供大家参考,希望走过路过的高手参与讨论和优化,谢谢

  1. 封装一个表格渲染的自定义函数
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');	
				}
			}							
		});
	};
  1. 页面加载,执行上述函数,加载表格
	$(function () {
		renderTable(10);     // 默认情况下 ,无任何参数、不带导出功能 渲染表格
        //其它代码省略。。。。
    });
  1. 监听搜索
        // 监听搜索操作
        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
  });

以上便是核心的代码,亲测成功,欢迎各位大佬参与讨论!

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值