主要要注意的是： "code": res.code, //解析接口状态 “msg”: res.message, //解析提示文本 “count”: res.count, //解析数据长度 “data”: res.data //解析数据列表
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>酒店列表</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all"> <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all"> </head> <body> <div class="layui-fluid"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">酒店列表</div> <div class="layui-card-body"> <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table> <script type="text/html" id="barlist"> <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> </div> </div> </div> </div> </div> <script th:src="@{/layuiadmin/layui/layui.js}"></script> <script> layui.use("table", function(){ var table = layui.table; //方法级渲染 table.render({ elem: '#test-table-reload' ,url: 'http://localhost:8083/hotel' ,limit: 10 ,cols: [ [ {checkbox: true, fixed: true} ,{field:'id', title: 'ID', width:180, sort: true, align:'center'} ,{field:'name', title: '酒店名称', width:180, align:'center', edit: 'text'} ,{field:'price', title: '价格', width:100, align:'center',sort: true, edit: 'text'} ,{field:'bed', title: '床', width:100,sort: true, align:'center'} ,{field:'star', title: '评分', width:104,sort: true, align:'center'} ,{field:'addr', title: '地点', width:124,sort: true, align:'center'} ,{field:'day', title: '天数', width:124,sort: true, align:'center'} ,{field:'startdate', title: '入住时间', width:124,sort: true, align:'center'} ,{field:'comment', title: '酒店介绍', width:124,sort: true, align:'center'} ,{field:'miaoshu', title: '酒店概述',width:400, align:'center',event: 'setSign'} ,{width:136, title:'操作', align:'center', toolbar: '#barlist'} ] ] ,page: true ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据 return { "code": res.code, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; } }); //监听工具条 table.on('tool(test-table-reload)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID：'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); $.ajax({ type: "DELETE", url: "/hotel/"+ data.id , data: {"id": data.id}, dataType: "json", contentType: "application/json;charset=utf-8", success: function(result) { if(result.code == 0) { layer.msg(result.message,{icon: 1}); } else { layer.msg(result.message, { icon: 5 }); } } }); }); } else if(obj.event === 'edit'){ layer.alert('编辑行：<br>'+ JSON.stringify(data)) }else if(obj.event === 'setSign'){ layer.prompt({ formType: 2 ,title: '修改 ID 为 ['+ data.id +'] 的房间描述' ,value: data.sign }, function(value, index){ layer.close(index); //这里一般是发送修改的Ajax请求 //同步更新表格和缓存对应的值 obj.update({ sign: value }); }); } }); var $ = layui.$, active = { reload: function(){ var demoReload = $('#test-table-demoReload'); //执行重载 table.reload('test-table-reload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { key: { id: demoReload.val() } } }); } }; $('.test-table-reload-btn .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script> </body> </html>官方给出的是这个：
<!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="//res.layui.com/layui/dist/css/layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body> <blockquote class="layui-elem-quote layui-text"> 尽管本示例中的原始数据：<a href="/test/table/demo3.json" target="_blank">/test/table/demo3.json</a>，并不符合 table 组件默认规定的数据格式，但从 layui 2.4.0 开始，新增的 parseData 回调可以将原始的任意格式的数据重新解析成 table 组件规定的数据格式。具体可以点击上方查看代码。 </blockquote> <table class="layui-hide" id="test" lay-filter="test"></table> <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/test/table/demo3.json' ,toolbar: true ,title: '用户数据表' ,totalRow: true ,cols: [[ {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'} ,{field:'username', title:'用户名', width:120, edit: 'text'} ,{field:'email', title:'邮箱', width:150, edit: 'text'} ,{field:'experience', title:'积分', width:100, sort: true, totalRow: true} ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true} ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true} ,{field:'sign', title:'签名'} ,{field:'city', title:'城市', width:100} ,{field:'ip', title:'IP', width:120} ,{field:'joinTime', title:'加入时间', width:120} ]] ,page: true ,response: { statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0 } ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据 return { "code": res.status, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.total, //解析数据长度 "data": res.rows.item //解析数据列表 }; } }); }); </script> </body> </html>