网络编程
位置:首页>> 网络编程>> JavaScript>> layui默认选中table的CheckBox复选框方法

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

作者:readyyy  发布时间:2024-11-18 16:25:34 

标签: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第一行禁用,第二行选中,第三行未选中


<script>
   //存储选中的设备Id
   var checkId=[];
 </script>
<table class="layui-hide" id="deviceList" lay-filter="deviceFilter"></table>
             //模板页定义复选框,可以直接写js控制是否选中
             <script type="text/html" id="checkboxTpl">
               {{#
               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){ }}
               <input type="checkbox" lay-skin="primary" value="{{d.id}}" lay-filter="deviceIdFilter" disabled>
               {{# } else {
                 if(checkFuntion(checkId)){ }}
               <input type="checkbox" lay-skin="primary" id="{{d.id}}" isCheck="true" value="{{d.id}}" lay-filter="deviceIdFilter" checked>
                 {{# } else { }}
               <input type="checkbox" lay-skin="primary" id="{{d.id}}" isCheck="false" value="{{d.id}}" lay-filter="deviceIdFilter">
                 {{# } }}
               {{# } }}
             </script>

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: '<div id="checkAll" οnclick="selectAll()" all="false" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div></div>'}
           // ,{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');
   }
 }

来源:https://blog.csdn.net/readyyy/article/details/82971723

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com