layui——table自动加序号列

在table.render()方法中,加上这一行

,{ type: 'numbers', title: '序号', width: 80, fixed: 'left' }//序号列

使用示例:

            table.render({
                elem: '#LAY_table_user'
                , url: '/AbandonApply/GetFixureData'
                , title: '工夹具列表'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                , cols: [[
                    { checkbox: true, fixed: true }
                    , { type: 'numbers', title: '序号', width: 40, fixed: 'left' }//序号列
                    , { field: 'fixure_id', title: '编号', width: 80, sort: true, fixed: true }
                    , { field: 'Name', title: '夹具名称', width: 190 }
                    , { field: 'Model', title: '夹具模组', width: 110, sort: true }
                    , { field: 'PartNo', title: '夹具料号', width: 290 }
                    , { field: 'UsedFor', title: '用途', width: 140 }
                    , { field: 'UsedCount', title: '使用次数', sort: true, width: 85 }
                    , {
                        field: 'entity_status_id', title: '状态', sort: true, width: 85, templet: function (d) {
                            switch (d.entity_status_id) {
                                case 1:
                                    return '空闲中';
                                case 2:
                                    return '使用中';
                                case 3:
                                    return '报修中';
                                case 4:
                                    return '报废中';

                            }
                        }
                    }
                    , { field: 'Location', title: '库位', sort: true, width: 80 }
                    , { field: 'RegDate', title: '登记日期', width: 100 }
                    , { field: 'workcell', title: '工作部', sort: true, width: 90 }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 80 }
                ]]
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , id: 'testReload'
                , page: true
                , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
                , limit: 10  //一页显示10条数据
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    }
                    else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                }
                , done: function (res, curr, count) {
                    //res为表格的所有数据,curr为当前页码,count为数据总条数
                    //遍历本页所有表格数据的值,依次判断是否为空闲中状态,若不是则通过data-index改变该行样式
                    //这里item和index分别对应每行的数据和data-index索引值
                    res.data.forEach(function (item, index) {
                        disabledTr(item, index);
                    })
                }
            });
发布了68 篇原创文章 · 获赞 12 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_35077107/article/details/105329829