由于最近遇到了需要回显数据表格中的复选框的问题,于是在网上找了很多教程均以失败告终,
根据下面代码,可完美实现layUI的数据表格复选框回显。
//数据表格
<div id="setRoleContent" style="display:none">
<table class="layui-hide" id="role-table" lay-filter="role-table-test"> </table>
</div>
table.render({
elem: '#role-table'
, url: '/Role/GetRoles'
, cellMinWidth: 80
,toolbar:"#toolbar-role"
, cols: [[
{ type: 'checkbox', fixed: 'left' },
{ field: 'Id', title: 'ID', sort: true }
, { field: 'Name', title: '姓名' }
]]
, done: function (res, curr, count) {
//ajax获取回显数据的Id
$.ajax({
url: "/Staff/GetStaffRoles",
type: "post",
data: { no: checkStatus.data[0].No},
success: function (data) {
//遍历ajax返回的结果
for (var i = 0; i < data.length; i++) {
//遍历数据表格
$.each(res.data, function (index, row) {
//判断ajax返回的id是否与数据行中的id相等
if (row.Id == data[i]) {
//#setRoleContent 数据表格控件id
$('#setRoleContent tr[data-index=' + row.LAY_TABLE_INDEX + '] input[type="checkbox"]').next().eq(0).click();
$('#setRoleContent tr[data-index=' + row.LAY_TABLE_INDEX + '] input[type="checkbox"]').next().eq(1).click();
}
})
}
}
});
}
});