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


Posted in Javascript onSeptember 19, 2019

方法一:如何根据条件判断是否默认选中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');
    }
  }

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

Javascript 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
javascript 精粹笔记
May 09 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 #Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 #Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 #Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 #Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 #Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python实现kNN算法
2017/12/20 Python
python实现Flappy Bird源码
2018/12/24 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
部队学习十八大感言
2014/01/11 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
企业新年寄语
2014/04/04 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
升职自荐信怎么写
2015/03/05 职场文书
自我评价优缺点范文
2015/03/11 职场文书
大客户经理岗位职责
2015/04/09 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL