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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
js添加绑定事件的方法
May 15 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
网络传输协议(http协议)
Nov 18 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
bootstrap table表格使用方法详解
Apr 26 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php生成验证码函数
2015/10/20 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python中format()函数的简单使用教程
2018/03/14 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
关于Django Models CharField 参数说明
2020/03/31 Python
python中关于数据类型的学习笔记
2020/07/19 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
合同专员岗位职责
2013/12/18 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
村委会主任先进事迹
2014/01/15 职场文书
上班打牌检讨书
2014/02/07 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python