layui数据表格自定义复选框表头_layui数据表格复选框默认选择状态

LAY_CHECKEDBoolean是否全选状态(默认：false)。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。true

上面这段话描述的不清楚,他的意思是当我们想默认全选的时候就在列上添加这个属性.

其实这个属性是可以在每一行数据上面单独添加的. 我们在加载表格数据的时候在需要回显的那一行数据上添加 LAY_CHECKED=true,就可以实现单独一行勾选效果.

下列:

我们表格加载的数据为json格式:

{“id”:i, “name”:小明}

如果要实现勾选效果:

{“id”:i, “name”:小明, “LAY_CHECKED”:true}

#列表中的复选框table.render({

elem: '#userTable'

, url: '../sysRole/getUserList'

, title: '用户列表'

, page: true //开启分页

, cols: [[

{type:'checkbox'}

, {field: 'userName',sort: true, title: '用户名称'}

, {field: 'account',sort: true, title: '登录账户'}

, {field: 'deleteFlg',sort: true, title: '是否启用'}

]]

,done: function(res, page, count){

//可以自行添加判断的条件是否选中

//这句才是真正选中，通过设置关键字LAY_CHECKED为true选中，这里只对第一行选中

res.data[0]["LAY_CHECKED"]='true';

//下面三句是通过更改css来实现选中的效果

var index= res.data[0]['LAY_TABLE_INDEX'];

$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);

$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');

}});

checkFuntion()当翻页或加载时判断是否选中复选框，input第一行禁用，第二行选中，第三行未选中

//存储选中的设备Id

var checkId=[];

//模板页定义复选框，可以直接写js控制是否选中              

{{#

function checkFuntion(arry){

var isTrue=false;

for(var index in arry){

if(arry[index]==d.id){

isTrue=true;

break;

}

}

return isTrue;

};

if(d.deviceAreaId!=null){ }}

{{# } else {

if(checkFuntion(checkId)){ }}

{{# } else { }}

{{# } }}

{{# } }}

table.render({

elem: '#deviceList'

, url: '../devices/findALL' //数据接口

, title: '仪表表'

,height:'480px'

,where:{"gatewaySN":selectPid,"channel":searchId}

, page: true //开启分页

, cols: [[ //表头

{field:'id',width: '5%',templet: '#checkboxTpl',title: '

'}