layui table组件常见用法总结

    <title>layer学习</title>    <link>    <link>    <script></script>    <!--表格-->    <div></div>    <!--工具栏-->    <script>        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除    </script>    <script>        <!-- 这里的 checked 的状态只是演示 -->        <input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter"  {{ d.IsAllow == true ? &#39;checked&#39; : &#39;&#39; }}>    </script>    <script>        layui.use([&#39;table&#39;,&#39;form&#39;], function () {            var table = layui.table;            form = layui.form;            //*******************************渲染表格**********************************            table.render({                //------------------------核心参数                elem: &#39;#myTable&#39;                         //渲染的dom元素                , url: &#39;/Home/GetUserList&#39;               //异步请求接口                , page: true                             //开启分页                , id: &#39;elementID&#39;                        //容器唯一ID                , cols: [[                               //列设置                    { field: &#39;Id&#39;, title: &#39;编号&#39;, sort: true, fixed: &#39;left&#39; }                    , { field: &#39;Name&#39;, title: &#39;姓名&#39; }                    , { field: &#39;Age&#39;, title: &#39;年龄&#39; }                    , { field: &#39;Role&#39;, title: &#39;角色&#39; }                    , { field: &#39;CreateTime&#39;, title: &#39;创建时间&#39; }                    , {                        title: &#39;自定义模板&#39;, width: 200                        , templet: function (d) {                            return  &#39;姓名：<span style="color: #c00;">&#39; + d.Name + &#39;&#39;                        }                    }                    , { field: &#39;IsAllow&#39;, title: &#39;是否使用&#39;, templet: &#39;#allow&#39;, unresize: true, align: &#39;center&#39; }                    , { fixed: &#39;right&#39;, width: 150, align: &#39;center&#39;, toolbar: &#39;#barDemo&#39; }                ]]                //-----------------------------异步请求设置                , method: &#39;post&#39;                          //异步请求方式                , headers: { hello: &#39;hengheng&#39; }          //在request的header中添加数据                , request: {                              //request设置，默认值如下                    pageName: &#39;page&#39;,                    limitName: &#39;limit&#39;                }                , response: {                             //response设置，默认值如下                    statusName: &#39;code&#39;                    , countName: &#39;count&#39;                    , dataName: &#39;data&#39;                    , msgName: &#39;msg&#39;                }                , where: {                                //向后台添加的额外参数                    nameParm: &#39;u&#39;,                    roleParm: &#39;o&#39;                }                //-----------------------加载的其他选项                , done: function (res, curr, count) {                    //res为接口返回的数据、count为数据总长度                    console.log(res);                    console.log(curr);                    console.log(count);                }                , text: {                    none: &#39;暂无相关数据&#39;                   //默认：无数据。                }                , initSort: {                    field: &#39;Id&#39;                           //排序字段为Id                    , type: &#39;desc&#39;                        //排序方式  asc: 升序、desc: 降序、null: 默认排序                }            })            //*******************************监听表格**********************************            table.on(&#39;tool(test)&#39;, function (obj) {        //test为lay-filter值                var data = obj.data;                       //获得当前行数据                var layEvent = obj.event;                  //获得 lay-event                var tr = obj.tr;                           //获得当前行 tr 的DOM对象                if (layEvent === &#39;edit&#39;) {                    var id = data.Id;                    layer.open({                        type: 2                        , title: &#39;修改&#39;                   //标题栏                        , scrollbar: false                        , area: [&#39;400px&#39;, &#39;300px&#39;]                        , shade: 0.5                        , id: &#39;layerId&#39;                  //设定一个id，防止重复弹出                        , moveType: 1                    //拖拽模式，0或者1                        , content: &#39;/Home/EditUserInfo?id=&#39; + id                    });                } else if (layEvent === &#39;del&#39;) {                    layer.confirm(&#39;真的删除吗？&#39;, 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(&#39;elementID&#39;);                            } else {                                layer.msg(result.Msg);                                table.reload(&#39;elementID&#39;);                            }                        })                    });                }            });            //*******************************监听checkbox********************************            //监听操作----置顶            form.on(&#39;checkbox(allowSetFilter)&#39;, function (obj) {                var pre = {                    "Id": this.name,                    "IsAllow": obj.elem.checked                };               //alert(this.name+&#39;----&#39;+obj.elem.checked);                $.post(&#39;/Home/SetAllow&#39;, pre, function (result) {                    if (result.IsSuccess === 1) {                        layer.msg(result.msg)                    } else {                        layer.msg(result.msg)                    }                })            });        });    </script>