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实现的页内搜索代码
May 23 Javascript
Prototype Function对象 学习
Jul 12 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jquery each()源代码
Feb 14 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue实现PC端分辨率适配操作
Aug 03 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php二维数组转成字符串示例
2014/02/17 PHP
分页栏的web标准实现
2011/11/01 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
使用Python生成XML的方法实例
2017/03/21 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python流程控制常用工具详解
2020/02/24 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
学校食堂采购员岗位职责
2013/12/05 职场文书
共产党员承诺书
2014/03/25 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
普通党员个人整改措施
2014/10/27 职场文书
用Python实现Newton插值法
2021/04/17 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
Elasticsearch 批量操作
2022/04/19 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python