主要利用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