需求说明
点击不同的模型,进入同一个html中,表格头和表格体的数据都是从后台查询,实现动态表格。
接口说明
接口返回数据格式示例:
{
"success":"true",
"result":[{"id":"id","name","ID"},{"id":"aaa","name","姓名"},{"id":"bbb","name","性别"},{"id":"time","name","时间"}]
}
接口返回数据格式示例:
{
"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"
}]
}
}
前端代码
<table class="layui-hide" id="layTable" lay-filter="test"></table>
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) {
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};
} 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 "<div><a href='/detail.do?id=" + eval("d.id") + "' class='layui-table-link'>" + eval("d."+id) +"</a></div>";
}};
}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',
parseData:function(result) {
var data = JSON.parse(result.result);
return {
"code" : 0,
"msg" : "",
"count" : data.totalSize,
"data": data.list
}
}
});
});
function reloadByKeyword(){
table.reload('testTable', {
page: {
curr: 1
},
request: {
pageName: 'page',
limitName: '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);
}