好资源导航 » 文章资讯 » layui默认选中table的CheckBox复选框方法

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

2023-08-13 22:31:04 69

方法一：如何根据条件判断是否默认选中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来实现选中的效果
varindex=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控制是否选中

{{#
functioncheckFuntion(arry){
varisTrue=false;
for(varindexinarry){
if(arry[index]==d.id){
isTrue=true;
break;
}
}
returnisTrue;
};
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:'

'} //,{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'); } } }); //全选按钮事件 functionselectAll(){ varcheckAll=$("#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'); }elseif(checkAll.attr('all')=="true"){ $('input[isCheck="true"]').each(function(){ $(this).next().click(); }); checkAll.attr('all','false'); checkAll.removeClass('layui-form-checked'); } }

以上这篇layui默认选中table的CheckBox复选框方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐