Layui表格自定义toolbar导出按钮的事件处理-Layui表格重写表格导出处理实现导出全部数据

Layui表格自定义toolbar导出按钮的事件处理-Layui表格重写表格导出处理实现导出全部数据

Layui表格toolbar里面的导出按钮只能导出当前页表格的数据，当需要导出查询条件所查询的所有数据时需要重写导出按钮的事件处理

解决方案

版本信息:layui2.92

• 在layui.js文件中找出导出按钮的事件处理：
  所按钮文字转unicode编码在js文件中查找，如图：
  
  查找：\u5bfc\u51fa csv

找到对应的代码格式化，如图:

• k.exportFile.call(s, u.id, null, e) //这个地方就是导出文件的处理，其中e是文件类型,u是表格的配置参数，u.id是表格的id,k是layui.table对象,s是table的实例

• 修改-在此处增加处理逻辑：当配置了导出的处理函数(exportAction)时，使用自定义的导出处理函数(exportAction),否则使用当前的处理逻辑，如下：

 t.on("click", function () {
     var e = p(this).data("type");
     if (u.exportAction) {
         //使用自定义处理
         u.exportAction(k, s, u, e);
     } else {
     	//使用原处理
         k.exportFile.call(s, u.id, null, e)
     }
 })

• 由于原文件是压缩格式，修改原文件的如图:
  
  代码:if(u.exportAction){u.exportAction(k,s,u,e);}else{k.exportFile.call(s, u.id, null, e);}

• 在渲染表格时配置自定义的导出处理函数,直接上代码:

table.render({
    elem: '#LAY-app-content-list',
    url: "/article/query", //数据接口地址
    ,
    title: '文章列表' /*导出表名*/ ,
    toolbar: '#toolbarDemo',
    page: true /*开启分页*/ ,
    limit: 10,
    limits: [10, 15, 20, 25, 30],
    ,
    cols: cols: [[{
        type: "checkbox",
        fixed: "left"
		}, {
        field: "ID",
        width: 100,
        title: "文章ID",
        sort: !0
		}, {
        field: "Title",
        title: "文章标题",
        minWidth: 200,
        edit: 'text' //开户单元格编辑
		}, {
        field: "Category",
        title: "分类"
		}, {
        field: "Author",
        title: "作者",
        width: 120,
		}, {
        field: "CreatedDate",
        title: "创建时间",
        width: 180,
        sort: !0
		}, {
        field: "Status",
        title: "状态",
        templet: "#StatusTpl",
        width: 100,
        align: "center"
		}, {
        title: "操作",
        width: 150,
        align: "center",
        fixed: "right",
        toolbar: "#table-content-list"
		}]]
	,exportDataUrl: layui.setter.base + "json/content/list2.json"   //导出数据接口的地址
	,exportMethod:"post"  //导出数据接口的请求方式
	//自定义导出处理方法
	,exportAction : function (table, tableIns, config, exportType) {
		var selectedData = table.checkStatus(`${config.id}`).data;
		if (selectedData && selectedData.length > 0) {
			//导出选中的数据
			table.exportFile(config.id, selectedData , exportType);
		} else {
			//导出后端接口的数据,
			var querydata = layui.form.val(`${config.id}-queryForm`);  //获取查询form的查询条件参数
			$.ajax({
				type: config.exportMethod || "get",
				url: config.exportDataUrl,
				contentType: "application/json",
				data: querydata,
				dataType: "json",
				headers: {},
				success: function (rspData) {
					// alert(JSON.stringify(rspData));
					table.exportFile(config.id, rspData.data, exportType);
				}, error: function (data) {
					layui.layer.msg("error: " + data.responseText, { icon: 2 });
				}
			})
		}
	
	
	}
});

• 结语
  也可将此处理逻辑封装到layuijs中，如根据是否配置exportDataUrl来决定是否请求后端接口。可根据自身实际的使用情况进行封装，