数据表格 layui.table

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

layui官网-表单

自动渲染

方法渲染

table.render,cols中的field是后台传递的data

map.put("data",stuService.selectStuByName(name));

table.render({ elem: '#stu-table' ,id:'stu-table'//为了后面重载 ,url:'stu/select' ,cellMinWidth: 80 ,cols: [[ {type:'numbers'} ,{field:'UUID', title: 'UUID'} ,{field:'name', title: '姓名'} ,{field:'age', title: '年龄', sort: true} ,{field:'sex', title: '性别',templet: function (d) { if (d.sex==0) return "女"; else if (d.sex==1) return "男"; } } ,{field:'major', title: '专业'} ,{toolbar:"#stu-toolbar",title:"操作"} ]] });

toolbar可以添加对单条数据的操作

<script type="text/html" id="stu-toolbar"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a> </script>

然后在操作可以通过event来判断(lay-event="del)

table.on('tool(stu-table)',function (obj) { var data=obj.data; var event=obj.event; if(event ==='del'){ ......

传入Json格式

自动填充的json是

{ "code": 0, "msg": "", "count": 1000, "data": [ { "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0", "experience": 255, "logins": 24, "wealth": 82830700, "classify": "作家", "score": 57 }, { "id": 10001, "username": "user-1", "sex": "男", "city": "城市-1", "sign": "签名-1", "experience": 884, "logins": 58, "wealth": 64928690, "classify": "词人", "score": 27 }] }

关于data的问题后端的数据格式用Object，而不是List<Object>（显示不了）,两者传入前端的区别如图

重载

注意：需要在table.render加上一个id，这个id是自己取的名字，不是css中的id选择器

table.reload("stu-table");重载的时候携带传给后台的数据 table.reload('stu-table',{ where:{"name":data.field.stu_name} ,page:{ curr:1 } });

接口返回的数据格式不符合 table 默认规定的格式

数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。

默认规定的数据格式layui.code

{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}] }

很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：

假设您返回的数据格式layui.code

{ "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] } }

那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式

table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即为原始返回的数据 return { "code": res.status, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.total, //解析数据长度 "data": res.data.item //解析数据列表 }; } //,…… //其他参数 });