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