关于layui中数据表格使用心得

Posted 2021-02-28 xinheng

<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);
            });
        }
    })
});