layui之动态数据表格

2023-12-28 19:47| 来源: 网络整理| 查看: 265

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,后再进行数据处理，本来想自定义格式的，但是没有成功，如果有兴趣的话可以自行研究。

下面上代码了：

layui layui表格员工名称查询用户名确定查看编辑删除 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('编辑行：'+ JSON.stringify(data)) } }); //end });

效果如图：

动态表格展示就到这里后，后面会持续更新完增删改。

微信公众号：

【本文地址】

公司简介

联系我们