layui实现动态表格

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

你可能感兴趣的