Layui根据动态表头数据生成表格,并实现条件搜索

遇到问题:

1. 如何设置动态表头
2. 如何保存后台数据并将其应用到条件搜索处
3. 如何调用data里中文的属性(最好将中文隐藏)

后台获取数据后,利用LinkedMap<String,Object>对数据进行处理,保证表头和数据的对应,获取数据如下:

data{
	["姓名":罗翔,"性别":男,"爱好":张三],
	["姓名":陈翔,"性别":男,"爱好":蘑菇头],
	["姓名":刘翔,"性别":男,"爱好":田径]
}

field["姓名","性别","爱好"]

根据data和field去实现动态表格的获取

	var tableDatas;	//存放原始数据
	var tableCols;	//存放表头数据
	// 保证表格高度
	function getFullSize() {
		var header = $(".layui-card-header");
		var toolbar = $(".layui-toolbar");
		var cardbody = $(".layui-card-body");
		return header.outerHeight(true) + toolbar.outerHeight(true) + (cardbody.outerHeight(true) - cardbody.height());
	}
	
	$(window).resize(function () {
		table.reload("tableReload", {
			height: "full-" + getFullSize()
		});
	});		
	
	var submitData = JSON.stringify(data);
		$.ajax({
			url : "xxx",
			type : 'POST',
			data : submitData,
			cache : false,
			contentType : 'text/json',
			success : function(res) {
				var data = res.data;
				//对data的深拷贝,不能直接使用var tableDatas = data;,后文有解释
				tableDatas = $.extend(true,[],data);
				var field = res.field;
				//深拷贝
				fields = $.extend(true,[],field);
				var col = [[]];
				//动态添加列属性(表头)
				for (var i = 0; i < field.length; ++i) {
				    col[0].splice(col[0].length, 0, {field: field[i], title: field[i],width:150});
				}
				table.render({
				    elem:'#LAY-train-sign-list',
				    id: "tableReload",
				    limit: Number.MAX_VALUE,
				    //高度
				    height: "full-" + getFullSize(),
					//导出
				    toolbar:'#barDemo',
				    data: data,
				    cols: col
				});
			}
		});
	}

根据姓名对数据进行搜索展示

	<div class="layui-inline layui-search">
		<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="searchSubmit">
		<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
		</button>
	</div>
	
	//根据姓名进行查询
	form.on("submit(searchSubmit)", function(data) {
		var key ="姓名";
		var userName = data.field.userName;
		//输入框为空时
		if(userName == "") {
			//重新渲染原数据
			table.render({
			    elem:'#LAY-train-sign-list',
			    id: "tableReload",
			    limit: Number.MAX_VALUE,
				height: "full-" + getFullSize(),
				toolbar:'#barDemo',
			    data: tableDatas,
			    cols: tableCols
			});
		}else {
			var datas = [];
			for(var i = 0 ; i<tableDatas.length; i++) {
				//获取行数据
				var currentData = tableDatas[i];
				//currentData.姓名等价于currentData[key]
				//为了代码符合规范,应该将其隐藏
				if(currentData[key].indexOf(userName) != -1) {
					datas.push(currentData);
					break;
				}
			}
			table.render({
			    elem:'#LAY-train-sign-list',
			    id: "tableReload",
			    data: datas,
			    height: "full-" + getFullSize(),
			    cols: tableCols
			});
		}
	});

总结:
1.layui动态表格表头设置

	//只需要提供field数组,也可以按照自己的数据,分别封装field和title数据
	for (var i = 0; i < field.length; ++i) {
	    col[0].splice(col[0].length, 0, {field: field[i], title: field[i],width:150});
	}

2.关于JS的深拷贝和浅拷贝(原理同JAVA)

Java学习记录(五) 浅拷贝、深拷贝_bai_pd的博客-CSDN博客
https://blog.csdn.net/bai_pd/article/details/106025671

JS 中深拷贝的几种实现方法_陈祖路的个人博客-CSDN博客
https://blog.csdn.net/chentony123/article/details/81428803

Object.assign()除了需要对象的1级属性和2级属性,还需要注意方法调用方式
var bean = {"name":"张三"};
/*
*注意 以下是浅拷贝
var newBean = Object.assign(bean);
*/
var newBean = Object.assign({},bean);

刚开始使用
var tableDatas = data;
但是当使用data去渲染表格后,data会自带表格的行索引,使得引用data的tableDatas发生变化

var data=xxxx;
//完全复制,data发生变化不会影响到
var tableDatas = $.extend(true,[],data);
//只有引用
var datas = data;

3.JS对属性的使用

data.姓名 等价于 data["姓名"];

题外总结
1.JS将数组变为对象,且值的作为对象的属性

field["姓名","性别","爱好"]
变为
field{"姓名":姓名,"性别":性别,"爱好":爱好}

	var excelField = {};
	for(var i = 0 ; i<fields.length; i++) {
		excelField[fields[i]] = fields[i];
	}

2.引入插件Lay-excel将动态生成的表格数据导出到excel表

函数列表 · LAY-EXCEL 插件文档
http://excel.wj2015.com/_book/docs/%E5%87%BD%E6%95%B0%E5%88%97%E8%A1%A8/

	var excelField = {};
	for(var i = 0 ; i<fields.length; i++) {
		excelField[fields[i]] = fields[i];
	}
	//添加表头
	tableDatas.unshift(excelField);
	//增添过滤条件(data中除了显示字段还有其他数据)
	var excels = excel.filterExportData(tableDatas,fields);
	excel.exportExcel(excels,"培训签到表.xlsx","xlsx");