layui table 详细讲解

 layui.use('table', function () {
            var table = layui.table;
            /*第一种原始写法*/
            /*
            table.render({
                id: 'laydictsList',
                elem: '#test',
                url: areasURL + "/base_dics/LayuigetPageList",
                cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
                where: { txtFullName: null },
                page: true,
                //toolbar:'barDemo',
                limit: 10,
                limits: [2, 5, 10, 20, 30],
                text: {
                    none: '暂无相关数据!'//默认无数据
                },
                cols: [[
                  { type: 'checkbox', LAY_CHECKED: false },
                  { field: 'dicsid', width: 80, title: 'ID', sort: true, hide: true },
                  { field: 'code', width: 80, title: '编号' },
                  { field: 'sortnum', width: 80, title: '序号', sort: true },
                  { field: 'fullname', width: 80, title: '名称' },
                  { field: 'diccategoryname', title: '所属类别', width: '30%', minWidth: 100 }, //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                  { field: 'experience', title: '操作' }
                ]]
            });
        });
        */
            /*第二种改进版*/
            table.render({
                id: 'laydictsList',
                elem: '#test',
                url: areasURL + "/base_dics/getPageList",
                method: "post",
                request: {
                    pageName: 'PageNum', //页码的参数名称,默认:page
                    limitName: 'PageSize' //每页数据量的参数名,默认:limit
                },
                response: {
                    statusName: 'ReturnType', //数据状态的字段名称,默认:code
                    statusCode: true,//成功的状态码,默认:0
                    msgName: 'ReturnMsg', //状态信息的字段名称,默认:msg
                    countName: 'ReturnCount', //数据总数的字段名称,默认:count
                    dataName: 'ReturnData', //数据列表的字段名称,默认:data
                },
                cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
                where: { txtFullName: null },
                page: true,
                //toolbar:'barDemo',
                limit: 10,
                limits: [2, 5, 10, 20, 30],
                text: {
                    none: '暂无相关数据!'//默认无数据
                },
                cols: [[
                  { type: 'checkbox', LAY_CHECKED: false },
                  { field: 'dicsid', width: 80, title: 'ID', sort: true, hide: true },
                  { field: 'code', width: 80, title: '编号' },
                  { field: 'sortnum', width: 80, title: '序号', sort: true },
                  { field: 'fullname', width: 80, title: '名称' },
                  { field: 'diccategoryname', title: '所属类别', width: '30%', minWidth: 100 }, //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                  { field: 'experience', title: '操作' }
                ]]
            });
        });

猜你喜欢

转载自www.cnblogs.com/dullbaby/p/9199144.html