layui.table设置特定某行的css样式(禁用复选框,)

主要利用layui.table.render()的done()回调方法中编写,这里给出部分有注释的代码,使用时可以根据实际调整

            table.render({
                elem: '#LAY_table_user'
                , url: '/Storage/GetFixureData'
                , title: '工夹具列表'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                , cols: [[
                    { checkbox: true, fixed: true }
                    , { field: 'fixure_id', title: '编号', width: 80, sort: true, fixed: true }
                    , { field: 'Name', title: '夹具名称', width: 200 }
                    , { field: 'Model', title: '夹具模组', width: 130, sort: true }
                    , { field: 'PartNo', title: '夹具料号', width: 300 }
                    , { field: 'UsedFor', title: '用途', width: 150 }
                    , { field: 'UsedCount', title: '使用次数', sort: true, width: 120 }
                    , { 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为数据总条数
                    //console.info(res.data);
 
                    //遍历本页所有表格数据的值,依次判断是否为空闲中状态,若不是则通过data-index改变该行样式
                    //这里item和index分别对应每行的数据和data-index索引值
                    res.data.forEach(function (item, index) {
                        //这里的entity_status_id 为表格数据中的一列数据,用于判断特定行
                        if (item.entity_status_id !== 1) {
                            //禁用复选框,设置不可选中标识,将该行设置为阴影色
                            var tr = $(".layui-table tr[data-index=" + index + "]");
                            tr.find("input[type='checkbox']").prop('disabled', true);
                            tr.find("input[type='checkbox']").next().addClass('layui-btn-disabled');
                            tr.css("background", "rgba(0, 0, 0, 0.35)");
                            console.info(tr.find("a[lay-event='edit']"));

                            //禁用该行工具栏的按钮特效
                            tr.find("a[lay-event='edit']").prop('disabled', true);
                            tr.find("a[lay-event='edit']").removeClass("layui-btn-normal").addClass("layui-btn-disabled");

                        }

                    })
                }
            });

参考:
layui表格–根据表格中某一行中的某一列的值来给该行以及该列添加css样式
layui数据表格动态禁用checkbox

发布了68 篇原创文章 · 获赞 12 · 访问量 2万+

猜你喜欢

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