table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
下边整理了一个例子：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>layer学习</title> <link href="/Content/mycss.css" rel="stylesheet" /> <link href="/Content/layui/css/layui.css" rel="stylesheet" /> <script src="/Content/layui/layui.js"></script></head><body> <!--表格--> <div id="myTable" lay-filter="test"></div> <!--工具栏--> <script type="text/html" id="barDemo"> <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 type="text/html" id="allow"> <!-- 这里的 checked 的状态只是演示 --> <input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter" {{ d.IsAllow == true ? 'checked' : '' }}> </script> <script> layui.use(['table','form'], function () { var table = layui.table; form = layui.form; //*******************************渲染表格********************************** table.render({ //------------------------核心参数 elem: '#myTable' //渲染的dom元素 , url: '/Home/GetUserList' //异步请求接口 , page: true //开启分页 , id: 'elementID' //容器唯一ID , cols: [[ //列设置 { field: 'Id', title: '编号', sort: true, fixed: 'left' } , { field: 'Name', title: '姓名' } , { field: 'Age', title: '年龄' } , { field: 'Role', title: '角色' } , { field: 'CreateTime', title: '创建时间' } , { title: '自定义模板', width: 200 , templet: function (d) { return '姓名：<span style="color: #c00;">' + d.Name + '</span>' } } , { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' } , { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' } ]] //-----------------------------异步请求设置 , method: 'post' //异步请求方式 , headers: { hello: 'hengheng' } //在request的header中添加数据 , request: { //request设置，默认值如下 pageName: 'page', limitName: 'limit' } , response: { //response设置，默认值如下 statusName: 'code' , countName: 'count' , dataName: 'data' , msgName: 'msg' } , where: { //向后台添加的额外参数 nameParm: 'u', roleParm: 'o' } //-----------------------加载的其他选项 , done: function (res, curr, count) { //res为接口返回的数据、count为数据总长度 console.log(res); console.log(curr); console.log(count); } , text: { none: '暂无相关数据' //默认：无数据。 } , initSort: { field: 'Id' //排序字段为Id , type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 } }) //*******************************监听表格********************************** table.on('tool(test)', function (obj) { //test为lay-filter值 var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event var tr = obj.tr; //获得当前行 tr 的DOM对象 if (layEvent === 'edit') { var id = data.Id; layer.open({ type: 2 , title: '修改' //标题栏 , scrollbar: false , area: ['400px', '300px'] , shade: 0.5 , id: 'layerId' //设定一个id，防止重复弹出 , moveType: 1 //拖拽模式，0或者1 , content: '/Home/EditUserInfo?id=' + id }); } else if (layEvent === 'del') { layer.confirm('真的删除吗？', function (index) { obj.del(); //删除对应行（tr）的DOM结构 layer.close(index); var id = data.Id; //向服务端发送删除指令 $.post("/Home/DeleteUserInfo", { "id": id }, function (result) { if (result.IsSuccess === 1) { layer.msg(result.Msg); table.reload('elementID'); } else { layer.msg(result.Msg); table.reload('elementID'); } }) }); } }); //*******************************监听checkbox******************************** //监听操作----置顶 form.on('checkbox(allowSetFilter)', function (obj) { var pre = { "Id": this.name, "IsAllow": obj.elem.checked }; //alert(this.name+'----'+obj.elem.checked); $.post('/Home/SetAllow', pre, function (result) { if (result.IsSuccess === 1) { layer.msg(result.msg) } else { layer.msg(result.msg) } }) }); }); </script></body></html>
更多layui知识请关注layui使用教程栏目。
以上就是layui table组件常见用法总结的详细内容，更多请关注24课堂在线网其它相关文章！
