layui動态加載複雜表頭，前端導出Excel格式資料。

動态生成header，此場景用于表頭從資料庫中讀取便于後續更改表頭字段。前端導出用是開源插件table2excel.js,此導出有局限性，隻能導出doom元素中的本頁的資料，如果是分頁的資料不太适用。

傳回二進制數組，背景建構相應的資料格式：

前端處理傳回的資料，push到一個空數組中就可以組成一個動态的多級表頭。

var header= [];
var header1= [
	{
		title: "編号",
		type: "numbers",
		align: "center",
		width: 80,
		rowspan: 2
	}, {
		title: "姓名",
		field: 'name',
		align: "center",
		width: 120,
		rowspan: 2
	}];
	var header2= [];
$.ajax({
	        type: "post",
	        url: "",
	        dataType:"json",
	        async:false,
	        success: function (data) {
	        	console.log(data)
	            if (data.code === 0){
	            	var djs=data.data[0][0];
	            	console.log(djs)
	            	 header1.push({align: 'center', title: djs, colspan:3});
	            	 var sdarr=["基數"];
	            	 var newArr = delArr(sdarr,data.data[0]);//隻需要一個三清單頭，其餘是二列的。
	            	 console.log(newArr);
	            	 
	                $.each(newArr, function (index, obj) {
//	                	console.log(obj)
	                    header1.push({align: 'center', title: obj, colspan:2});
	                });
	                $.each(data.data[1], function (index, obj) {
	                	//拼接成官網所需要的數組
	                    header2.push({field: obj.field1, title: obj.title1 });
	                    header2.push({field: obj.field2, title: obj.title2 });
	                    header2.push({field: obj.field3, title: obj.title3 });
	                });
	                $.each(data.data[2], function (index, obj) {
	                	//拼接成官網所需要的數組
	                	header2.push({field: obj.field1, title: obj.title1 });
	                	header2.push({field: obj.field2, title: obj.title2 });
	                });
	                
	                
	                $.each(data.data[3], function (index, obj) {
	                	//拼接成官網所需要的數組
	                	header2.push({field: obj.field1, title: obj.title1 });
	                	header2.push({field: obj.field2, title: obj.title2 });
	                });
	                $.each(data.data[4], function (index, obj) {
	                	//拼接成官網所需要的數組
	                	header2.push({field: obj.field1, title: obj.title1 });
	                	header2.push({field: obj.field2, title: obj.title2 });
	                });
	                $.each(data.data[5], function (index, obj) {
	                	//拼接成官網所需要的數組
	                	header2.push({field: obj.field1, title: obj.title1 });
	                	header2.push({field: obj.field2, title: obj.title2 });
	                });
	              
	                header1.splice(10,0,
				, {
					title: '操作',
					toolbar: '#barDemo',
					fixed:"right",
					width: 80,
					rowspan: 2
				});//固定操作列
	                header.push(header1);
	                header.push(header2);
	                console.log(header);//所需的表頭push到一個總的數組裡
	                 
	            }
	        }
	    });
	var table2Excel;
	let TableC= table.render({
	        id: 'demo',
	        elem: '#demo'
	        , url: '' //資料接口
	        , cellMinWidth: 80
	        , limit: 10//每頁預設數
	        , limits: [10, 20, 30, 40, 50, 100]
	        , page: { //支援傳入 laypage 元件的所有參數（某些參數除外，如：jump/elem） - 詳見文檔
	            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定義分頁布局
	            , curr: 1 //設定初始在第 1 頁
	        },request: {
    			pageName: "page",
    			limitName: "rows"
    		},
	        response: {
				statusCode: 0,
				countName: 'total',   //規定資料總數的字段名稱，預設：count
				dataName: 'data'   //規定資料清單的字段名稱，預設：data
			},
			loading:true,  //是否顯示加載條（預設：true）。如果設定 false，則在切換分頁時，不會出現加載條。該參數隻适用于 url 參數開啟的方式
			title:"記錄表",  //
			//cellMinWidth:60,   //全局定義所有正常單元格的最小寬度（預設：60），一般用于列寬自動配置設定的情況。其優先級低于表頭參數中的 minWidth
			text:{
			    none: '暫無相關資料' //預設：無資料。注：該屬性為 layui 2.2.5 開始新增
			  },  //自定義文本，如空資料時的異常提示等。注：layui 2.2.5 開始新增。
			autoSort:true,
			skin:"row",  //用于設定表格風格，若使用預設風格不設定該屬性即可line （行邊框風格） row （列邊框風格） nob （無邊框風格）
			even:true,   //若不開啟隔行背景，不設定該參數即可
			//size:"lg",   //用于設定表格尺寸，若使用預設尺寸不設定該屬性即可
			parseData: function(res) {
				var ss = {
					data: res.rows,
					code: 0,
					total: res.total,
				}
				return ss
			},
			done:function(){
				console.log("資料渲染完了！")
				table2Excel = new Table2Excel();
				table2Excel.append($("#demo"));//周遊頁面上layui生成的div，抓取裡面的格式與資料，來手動append到table中，再控制該table隐藏，來為導出做準備。
				//console.log(table2Excel.append($("#demo")))
				
				
			}
	        , cols: header
	    });

	// 導出excel點選事件
	$('#exportElemId').click(function(){
		let fileName = 'XXX-20200xxxx';
		table2Excel.exportLayTable($('#demo'),fileName);
	});
           

百度網盤:table2Excel.js

提取碼：5u9h

使用方法：

上面js已經有了，資料表格渲染完畢後，在done函數中做相關周遊操作

var table2Excel ;
table.render({
	elem: '#demo',
	...          
	done: function (res, curr, count) {
		table2Excel = new Table2Excel();
		table2Excel.append($("#tableId"));
	})    
});
// 導出excel點選事件
$('#exportElemId').click(function(){
	let fileName = 'XXX-20200xxxx';
	table2Excel.exportLayTable($('#tableId'),fileName);
});

           

導出效果：

參考：https://blog.csdn.net/zhiyingshenjian/article/details/85004517

https://blog.csdn.net/weixin_45237517/article/details/100119628