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" 
     
     "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
     
     ');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }