layui实现动态表格

需求说明

点击不同的模型，进入同一个html中，表格头和表格体的数据都是从后台查询，实现动态表格。

接口说明

• 查询表格头的接口 findTableHead

接口返回数据格式示例：
{
 "success":"true",
 "result":[{"id":"id"，"name","ID"},{"id":"aaa"，"name","姓名"},{"id":"bbb"，"name","性别"},{"id":"time"，"name","时间"}]
}

• 查询表格数据的接口 findTableData

接口返回数据格式示例：
{
 "success":"true",
 "result":{
    "currentPage": 1,
    "pageSize": 10,
    "totalPage": 1,
    "totalSize": 22,
    "list": [{
        "id": "1",
        "aaa": "张三",
        "bbb": "男",
        "time": "2021-02-20 11:00:02"
       },{
        "id": "2",
        "aaa": "李莉",
        "bbb": "女",
        "time": "2021-02-20 11:05:02"
       }]
  }
 }

前端代码

• HTML代码

<table class="layui-hide" id="layTable" lay-filter="test">table>

• JS代码

var cols_arr = [] ; //存储表格头的数组
var table=null;
layui.use('table', function(){
     
	table = layui.table;
	
	//查询表格头数据
	var modelId = $("#modelId").val();
	$.ajax({
     
		async: false, //关闭异步请求，加载完成表格头之后，再加载表格数据
		type : "POST",//方法类型
		dataType : "json",//预期服务器返回的数据类型
		url : '/findTableHead.do?modelId =' + modelId ,
		data : {
     "modelId":modelId},
		success : function(result) {
     
			//console.log(result);//打印服务端返回的数据(调试用)
			//填充表格头数组
			if (result.success) {
     
				var data = JSON.parse(result.result);
				cols_arr[0] = [];
				cols_arr[0][0] = {
     checkbox: true, fixed: true};
				for(var i=0; i<data.length; i++){
     
					if(data[i].name == 'id') {
     
						cols_arr[0][i+1] = {
     field: data[i].id , title: data[i].name, align: 'center',hide:true}; //隐藏id列
					} else if(i == 1){
     
					    //增加超链接
						var id = data[i].id;
						cols_arr[0][i+1] = {
     field: data[i].id , title: data[i].name, align: 'center',templet: function(d){
     
							return "
" + eval("d."+id) +"
";
}};
}else {

cols_arr[0][i+1] = {
field: data[i].id , title: data[i].name, align: 'center'};
}
}
}
}
});
//填充表格数据
table.render({

elem: '#layTable',
url:"/findTableData.do?modelId =" + modelId ,
toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
defaultToolbar: ['filter', ],
title: '用户数据表' ,
cols: cols_arr //填充表格头数据,
page: true , //开启分页
id: 'testTable', //表格id
parseData:function(result) {

var data = JSON.parse(result.result);
//console.log(data.list );
return {

"code" : 0, // 返回正确的状态码是0
"msg" : "",
"count" : data.totalSize,
"data": data.list
}
}
});
});
//重新加载表格
function reloadByKeyword(){

table.reload('testTable', {

page: {

curr: 1 //重新从第 1 页开始
},
request: {

pageName: 'page', //页码的参数名称，默认:page
limitName: 'limit'//每页数据量的参数名，默认:limit
},
where: {

keyword: $('#demoInput').val() //可传参查询的参数
}
});
}
//获取表格中的值
function batchDel() {

var data = table.checkStatus('testTable').data;
var ids = "";
for(var i = 0; i < data.length;i++) {

ids += data[i].id + ",";
}
alert(ids);
}