layui table 详细讲解

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: '操作' }

                ]]

            });

        });

posted on 2018-06-19 16:25  笨小孩做开发 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/dullbaby/p/9199144.html