layui数据动态表格，如果返回的json格式是默认格式就好了，从api上直接copy下来用就可以，可是我这里返回的json格式如下：
{
"code": 200,
"content": {
"currentPage": 1,
"hasNext": true,
"hasPrev": false,
"pageSize": 3,
"records": [
{
"accountno": "009",
"id": "030AC067-8953-48A9-9A11-66E1D60500F5",
"idcard": "321654",
"name": "cbb",
"password": "123456",
"roleid": null,
"status": true
},
{
"accountno": "011",
"id": "031AC067-8953-48A9-9A11-66E1D60500F5",
"idcard": "362201199311295412",
"name": "gyw",
"password": "123456321",
"roleid": null,
"status": true
},
{
"accountno": "005",
"id": "032AC067-8953-48A9-9A11-66E1D60500F5",
"idcard": "362201199311295412",
"name": "大阳",
"password": "123456",
"roleid": null,
"status": true
}
],
"totalPages": 5,
"totalRecords": 13
},
"message": null,
"success": true
}
代码直接套弄不进去，所以的先处理一下；基本步骤是ajax,后再进行数据处理，本来想自定义格式的，但是没有成功，如果有兴趣的话可以自行研究。
下面上代码了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<script src="/jquery/jquery-3.2.1.js" ></script>
<script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<h1>layui表格</h1>
<div>
<!-- 查询栏 -->
<form class="search-form layui-form">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">员工名称</label>
<input class="layui-input" name="name" type="text" style="width: 165px;">
</div>
<div class="layui-form-item layui-inline search">
<button class="layui-btn layui-btn-normal" lay-filter="searchBtn" lay-submit>查询</button>
</div>
</form>
<div>
<table class="layui-hide" id="test" lay-filter="test3" ></table>
</div>
</div>
<div id="E_add_edit" style="display:none">
<form class="layui-form" style="padding:20px">
<!-- 用户名 -->
<div class="layui-form-item emp-name">
<label class="layui-form-label" >用户名</label>
<div class="layui-input-inline">
<input class="layui-input" type="text" placeholder="请输入用户名">
</div>
</div>
<!-- 确定 -->
<div style="text-align: center; border: none">
<button class="layui-btn layui-btn-normal" lay-filter="saveBtn" lay-submit>确定</button>
</div>
</form>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table','layer','laypage','form'],function(){
var table=layui.table;
var layer = layui.layer;
var form = layui.form;
var laypage = layui.laypage;
var data; //保存数据
var postData={
name:"NULL",
pageNumber:1,
pageSize:10
};
//发送ajax 列表查询ajax
function send(postData){
$.ajax({
type: "POST",//请求的方式
url: "/main/version1/empList/"+new Date().getTime(),//请求的接口
data: postData,//参数（可传可不传递）
dataType: "json",//数据类型
async:false,
success: function (res) {
data=res.content.records;
resultData=res.content.records;
//console.log("data1 "+data[0].id);
},
error:function(err){
//失败之后执行（我不管，失败别找我i）
obj=err;
alert("数据不存在")
}
})
}
var infoTable;
var
// 表单需要的变量
infoOptions = {
elem: '#test',
// width: 347,
limits: [10],
cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
cols: [[
//{field: 'id', title: 'ID',width:20, fixed: 'left'}
{field: 'id', title: 'ID', type:'checkbox', width:120, sort: true, fixed: 'left'}
,{field: 'accountno', title: '编号', width:120}
,{field: 'name', title: '用户名', width:120,edit:'text'}
,{field: 'idcard', title: '身份证', width:220}
,{field: 'password', title: '密码', width:120,edit:'text'}
,{field: 'status', title: '状态', width:120}
,{fixed: 'right',title: '操作', width:178, align:'center', toolbar: '#barDemo'}
]],
data: []
};
// 页面初始化
// 查询 ----------------------------------------
//监听提交
form.on('submit(searchBtn)', function(data){
//layer.msg(JSON.stringify(data.field));
var str=JSON.stringify(data.field);
var data;
layer.msg(str);
// 转换 {"name":"gsfs"}
var json = eval('('+str+')');
postData.name=json.name;//直接取值 结果0
console.log("name: "+name);
init();
return false;
});
// 表格初始化 ------------------
function init (){
// 列表请求
send(postData);
// 完成表格数据
$.extend(infoOptions, {data: data});
infoOptions.page = {
curr: 1
}
console.log("data1 "+data[0].id);
table.render(infoOptions);
data=null;
}
// 页面初始化---------------------------------
init();
var postData_add_edit={
id:"NULL",
name:"NULL",
accountno:"NULL",
password:"NULL",
status:"NULL",
idcard:"NULL"
};
var message;
//发送ajax 新增修改ajax
function sendAE(postData_add_edit){
$.ajax({
type: "POST",//请求的方式
url: "/main/version1/updateemp/"+new Date().getTime(),//请求的接口
data: postData_add_edit,//参数（可传可不传递）
dataType: "json",//数据类型
async:false,
success: function (res) {
console.log("msg "+message);
if(res.code==200){
console.log("ajax msg"+res.message);
message=res.message;
}
},
error:function(err){
alert("系统出错了")
}
})
}
// 新增修改初始化 ------------------
function init_AE (){
sendAE(postData_add_edit);
// 列表请求
send(postData);
// 完成表格数据
$.extend(infoOptions, {data: data});
infoOptions.page = {
curr: 1
}
console.log("data1 "+data[0].id);
table.render(infoOptions);
data=null;
}
// 监听 单元格，能进行编辑单元格 只有表头加了 edit 属性才能修改
table.on('edit(test3)',function(obj){
var value=obj.value; //得到修改后的值
var data=obj.data; //得到所在行的所有键值
var field=obj.field; //得到字段 pwd name
postData_add_edit.id=data.id;
if(field==='name'){
postData_add_edit.name=value;
console.log("name "+postData_add_edit.name);
}
if(field==='password'){
postData_add_edit.password=value;
console.log("password "+postData_add_edit.password);
}
//layer.msg('[ID: '+data.id+']'+field+' 字段给改为 '+value);
init_AE ();
});
// 操作 查看 编辑 删除-----------------------------------
// 监听表格复选框 选择
table.on('tool(test3)',function(obj){
console.log(obj);
});
//监听工具条
table.on('tool(test3)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么'+data.id, function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行：<br>'+ JSON.stringify(data))
}
});
//end
});
</script>
</body>
</html>
效果如图：
动态表格展示就到这里后，后面会持续更新完增删改。