⽅法⼀:如何根据条件判断是否默认选中table表格前⾯的复选框
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第⼀⾏禁⽤,第⼆⾏选中,第三⾏未选中
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: '
, {field: 'deviceName', width: '25%', sort: true, title: '仪表名称'} , {field: 'type', width: '15%', sort: true, title: '仪表类型'}
, {field: 'entryName', width: '15%', sort: true, title: '能耗分项'} , {field: 'deviceDesc', width: '40%', sort: true, title: '仪表描述'} ]]
,done: function(res, page, count){ //每次翻页或者重载时判断是否全选
if ( $('input[isCheck=\"false\"]').length==0){ $(\"#checkAll\").attr('all','true');
$(\"#checkAll\").addClass('layui-form-checked'); }else {
$(\"#checkAll\").attr('all','false');
$(\"#checkAll\").removeClass('layui-form-checked'); } } });
//全选按钮事件
function selectAll() {
var checkAll = $(\"#checkAll\"); if (checkAll.attr('all') == \"false\") {
console.log($('input[isCheck=\"false\"]')); $('input[isCheck=\"false\"]').each(function () { $(this).next().click(); });
checkAll.attr('all', 'true');
checkAll.addClass('layui-form-checked'); } else if (checkAll.attr('all') == \"true\") {
$('input[isCheck=\"true\"]').each(function () { $(this).next().click(); });
checkAll.attr('all', 'false');
checkAll.removeClass('layui-form-checked'); } }
以上这篇layui默认选中table的CheckBox复选框⽅法就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
因篇幅问题不能全部显示,请点此查看更多更全内容