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 trim函数 去空格函数与正则集锦
Nov 20 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
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
php实现ping
2006/10/09 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python学习数据结构实例代码
2015/05/11 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python实现两张图片的像素融合
2019/02/23 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python实现字符串和数字拼接
2020/03/02 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
python解包概念及实例
2021/02/17 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
卫生巾广告词
2014/03/18 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
在职证明格式样本
2015/06/15 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js