您的当前位置:首页正文

layui默认选中table的CheckBox复选框方法

2021-08-18 来源:易榕旅网
layui默认选中table的CheckBox复选框⽅法

⽅法⼀:如何根据条件判断是否默认选中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第⼀⾏禁⽤,第⼆⾏选中,第三⾏未选中

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

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: 'id', title: 'ID', width: '5%', sort: true, title: 'ID'}

, {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复选框⽅法就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。

因篇幅问题不能全部显示,请点此查看更多更全内容