学习笔记

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

2023-09-08 11:38:57 juzhen 3

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

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

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

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

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

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



插件代码:

layui.define(function(exports) {
	//tablePlus在原来的table模块的基础上实现了批量数据导出功能,实现defaultToolbar中筛选列记忆功能
	var table = layui.table;	
	var form = layui.form;	
    var MOD_NAME='tablePlus';	
    var tablePlus=$.extend({},table);	
    tablePlus._render = tablePlus.render;	
	tablePlus.excel = function(data,page_size,obj){
		//表头工具栏导出按钮
		$('[lay-id="'+obj.id+'"]').find('[lay-event="LAYTABLE_EXCEL"]').off().on('click',function(){
			if(data.count==0){
				layer.msg('暂无数据');
				return false;
			}
			else{
				let _page = parseInt(data.count/page_size);
				let page = data.count%page_size>0?(_page+1):_page;
				let pageHtml='<p style="padding:16px 10px 0; text-align:center; color:red">由于导出数据比较消耗服务器资源,建议使用搜索功能筛选好数据再导出</p><p style="padding:5px 10px 10px; text-align:center; color:red">如果点击导出后,没有立即导出文件,请耐心等待一下,30秒内请勿重复点击。</p><p style="padding:0 10px; text-align:center;">共查询到<strong> '+data.count+' </strong>条数据,每次最多导出<strong>'+page_size+'</strong>条,共<strong>'+page+'</strong>页,请点击下面的页码导出</p><div id="exportPage" class="layui-box layui-laypage" style="padding:10px 0; width:100%;text-align:center;">';
				for (i = 1; i <= page; i++) {
					pageHtml += '<a href="javascript:;" data-page="'+i+'">'+i+'</a>';
				}
				pageHtml+='</div>';							
				layer.open({
					  type: 1,
					  title: '导出数据',
					  area:['580px','240px'],
					  content: pageHtml,
					  success:function(res){
							var tableWhere = JSON.parse(JSON.stringify(obj.where));
							tableWhere.limit=page_size;										
							$('#exportPage').on('click','a',function(){
								tableWhere.page=$(this).data('page');
								let msg = layer.msg('正在导出数据...', {time:5000});
								$.ajax({
									url: obj.url,
									data: tableWhere,
									success:function(res){
										table.exportFile(obj.id, res.data,'xls');
										setTimeout(function(){
											layer.msg('导出完成');			
										},3000)	
									}
								});
							})
						}
					});
				return false;
			}
		});
		$('[lay-id="'+obj.id+'"]').find('[lay-event="LAYTABLE_HELP"]').off().on('click',function(){
			let content = obj.help||'无帮助说明';
			layer.open({
				shadeClose: true,
				title:'帮助说明',
				type: 1,
				content: '<div style="padding:20px 15px; min-width:300px; line-height:1.8">'+content+'</div>'
			})
		})
	}
	//重写渲染方法
    tablePlus.render=function(params){
		let is_excel = params.is_excel||false;
		let cols_save = params.cols_save||false;
		let excel_limit = params.excel_limit||1000;
		if(params.limit === undefined){
			params.limit = 20;
		}
		if(params.page === undefined){
			params.page = true;
		}
		if(params.cellMinWidth === undefined){
			params.cellMinWidth = 80;
		}	
		if(is_excel){
			let toolbar = ['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'},{title:'数据说明',layEvent: 'LAYTABLE_HELP',icon: 'layui-icon-help'}];
			if(params.defaultToolbar == false){
				params.defaultToolbar = toolbar;
			}	
			else{
				let _toolbar = params.defaultToolbar||[];
				params.defaultToolbar = _toolbar.concat(toolbar);
			}
			
			if(typeof params.done === "function"){
				let _done = params.done;
				params.done = function(data, curr, count){
					let obj = this;
					_done(data, curr, count);					
					if(cols_save){
						obj.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
							var input = $(this).prev()[0];
							layui.data ('col-filter-'+params.url,{
								key: input.name
								,value: input.checked
							})
						});
					}					
					tablePlus.excel(data,excel_limit,obj);
				}
			}
			else{
				params.done = function(data){
					let obj = this;
					if(cols_save){
						obj.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
							var input = $(this).prev()[0];
							layui.data ('col-filter-'+params.url,{
								key: input.name
								,value: input.checked
							})
						});
					}
					tablePlus.excel(data,excel_limit,obj);
				}
			}
		}
		if(cols_save){
			// 从本地存储获取用户保存的列显示设置
			let savedCols = localStorage.getItem('col-filter-'+params.url);
			let colsStatus = savedCols ? JSON.parse(savedCols) : {};
			let cols = params.cols;
			for (var i=0;i<cols[0].length;i++){
                if(cols[0][i].field!=undefined){
                    cols[0][i].hide=colsStatus[cols[0][i].field];
                }
            }
			params.cols = cols;
		}
		var init = tablePlus._render(params);
		//监听搜索提交
		form.on('submit(table-search)', function(data) {
			init.reload({
				where: data.field,
				page: {curr: 1}
			});
			return false;
		});
		//重置搜索提交
		$('body').on('click', '[lay-filter="table-search-reset"]', function () {
			let prev = $(this).prev();
			if (typeof(prev) != "undefined") {
				setTimeout(function () {
					prev.click();
				}, 10)
			}
		});
		
		return init;
		//console.log(params);
    };
    exports(MOD_NAME, tablePlus);
});

案例代码代码:

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
}
]
]
});


首页
产品
新闻
联系