關於layui中數據表格的使用心得

<table class="layui-hide" id="UserTab" lay-filter="useruv"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
              <button class="layui-btn layui-btn-normal" lay-event="increase" id="increase">新增角色</button>
            </div>
          </script>
        <script type="text/html" id="operate">
            <!-- 這里的 checked 的狀態只是演示 -->
            <a class='layui-btn layui-btn-sm layui-btn-normal'  lay-event="rEdit">修改</a>
            <a class='layui-btn layui-btn-sm layui-btn-danger' lay-event="rDel">刪除</a>
        </script>

　　

//渲染用戶信息表格
layui.use(['table','form','layer'], function () {
    table = layui.table;
    layer = layui.layer;
    form= layui.form;
    table.render({
        elem: '#UserTab'
        // , url: '../../JSON/UserInfo.json'
        ,url: parent.defaultUrl+'/role_list'
        ,toolbar: '#toolbarDemo' //開啟頭部工具欄，並為其綁定左側模板
        ,defaultToolbar: []
        ,method:'post'
        ,contentType:'application/json'
        ,page: { //支持傳入 laypage 組件的所有參數（某些參數除外，如：jump/elem） - 詳見文檔
                layout: [ 'prev', 'page', 'next', 'skip','limit', 'count',] //自定義分頁布局
                //,curr: 5 //設定初始在第 5 頁
                ,limit:10 //一頁顯示多少條
                ,limits:[5,10,15]//每頁條數的選擇項
                ,groups: 2 //只顯示 2 個連續頁碼
                ,first: "首頁" //不顯示首頁
                ,last: "尾頁" //不顯示尾頁
        }
        ,where:{
            ispage: true,
        }
        ,parseData: function(res){//數據不符合layui的規范，可以先在這里面進行處理，再去渲染
            console.log(res)
            for(var i=0;i<res.data.length;i++){
                for(var key in res.data[i]){
                        var str='';
                        var aa='';
                        for(var j=0;j<res.data[i].permissions.length;j++){
                            for(var k in res.data[i].permissions[j]){
                                aa = res.data[i].permissions[j].name
                            }
                            if(aa == ''){
                                str += aa
                            }else{
                                str += aa +'、'
                            }
                        }
                    res.data[i].per = str;
                }
            }
            
            return {//layui規定的數據格式
                'code': 0, //解析接口狀態
                'msg': '', //解析提示文本
                'count': res.totle, //解析數據長度
                'data': res.data //解析數據列表
            };
        }
        // , cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
        , cols: [[
            {field: 'id', title: '角色ID', sort: true,align: 'center',width:200,}
            , {field: 'role', title: '角色名稱',align: 'center'} //width 支持：數字、百分比和不填寫。你還可以通過 minWidth 參數局部定義當前單元格的最小寬度，layui 2.2.1 新增
            , {field: 'per', title: '角色權限',align: 'center'}
            , {field: 'description', title: '角色描述',align: 'center'}
            ,{field:'operate', title:'操作', align: 'center',toolbar:"#operate", width:200,}
        ]]
    });
      //頭工具欄事件
    table.on('toolbar(useruv)', function(obj){
        switch(obj.event){
        case 'increase':
            parent.ajaxGet(parent.defaultUrl+'/auth_list', '', function (res) { 
                for(var i=0;i<res.data.length;i++){
                    for(var key in res.data[i]){
                        res.data[i].value=res.data[i].id;
                    }
                }
                role.update({
                     data:res.data,
                })
            })
            rINdex = layer.open({
                    type:1,
                    skin: 'layerCls',
                    title: ['新增角色', 'font-size:18px;color:#fff;'],
                    content:$("#addRole"),
                    area: ['480px', '330px'],
            })
        break;
        };
    });
    table.on('tool(useruv)', function(obj){
        // var data = obj.data;
        if(obj.event === 'rEdit'){
            // 角色權限賦值
            for(var i=0;i<obj.data.permissions.length;i++){
                for(var key in obj.data.permissions[i]){
                    obj.data.permissions[i].value = obj.data.permissions[i].id
                }
            }
            if(obj.data.permissions[0] !=null){
                Mrole.setValue(obj.data.permissions)
            }
            // 角色名稱
            $('#rmName').val(obj.data.role)
            // 角色描述
            $('#rMDes').val(obj.data.description)
            // 存放id
            $('#saveId').val(obj.data.id)
            rINdex = layer.open({
                    type:1,
                    skin: 'layerCls',
                    title: ['修改角色', 'font-size:18px;color:#fff;'],
                    content:$("#modifyRole"),
                    area: ['480px', '330px'],
            })           
        }else if(obj.event === 'rDel'){
            layer.confirm('確認刪除？',{ skin : "layerCls"}, function(index){
                console.log(obj.data.id)
                parent.ajaxGet(parent.defaultUrl +'/role_del',  {id:obj.data.id}, function (data) { 
                    parent.layer.msg('刪除成功')
                 })
                obj.del();
                layer.close(index);
            });
        }
    })
});