layui table组件常见用法总结

互联网 19-11-30

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组件常见用法总结的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： layui