基于layui的table插件进行复选框联动功能的实现方法


Posted in Javascript onSeptember 19, 2019

实际项目功能:

给员工账号进行分配权限(增加权限,修改权限)

实现思路:

用表格展示权限列表?>勾选分配该账号的权限?>调用接口

出现的问题:

因为某些权限之间是有关联的,比如: “ 查看材料 ” 和 “ 修改材料 ” ,这两个权限是有联系的,当你勾选 “ 修改材料 ” 权限的时候,那么, “ 查看材料 ” 权限也要勾选上,当你取消勾选 “ 查看材料 ”权限的时候,“ 修改材料 ” 权限也要取消。

所以当用户勾选某个权限的时候,我们要通过js代码去判断是否有和这个权限相关的权限,如果有,就需要通过js代码自动勾选或取消勾选。

而layui的table插件没有提供通过js代码自动勾选或取消勾选复选框的方法;

解决方案:

通过table的reload方法和form的render方法实现

思路:

//以查看材料和修改材料权限为例:查看材料的id为2,修改材料的id为3
//用户点击复选框时,触发的回调函数
table.on('checkbox(quanXianAll)', function(obj) {
 //判断是否是全选
 if (obj.type === "one") {
   //判断判断选中的权限是否为“修改材料”
   if (obj.data.id === 3) {
    //判断是否选中状态
    if (obj.checked) {
     tableIns.reload({
      data:data,
      done: function (res) {
       //根据“查看材料”权限的id获取的索引
       var n = res.data.findIndex(function (item, i) {
        if (item.id === 2) {
         return true
        }
       })
       //判断查看材料”权限是否已被勾选
       if(!res.data[n].LAY_CHECKED){
        res.data[n].LAY_CHECKED = true;
        $(".layui-table-body").find("tr[data-index=" + n + "]").find('input[name="layTableCheckbox"]').prop("checked", true);
        form.render('checkbox');
       }

      }
     })
    }
   }
  }
})

这种关联肯定不止一个,所以我们要把代码进行封装。(思路应该说明白了,代码就不再进行这里封装了)

在table的源文件中添加一个这样的方法

在table源码中的a.elem.on("click", 'input[name="layTableCheckbox"]+', function () {}方法内,添加以下方法

var mylaysetCheck= function (index,checked,callbacks) {
 var e=t("table[lay-filter="+f+"]").next().find(".layui-table-box").find(".layui-table-main").find("tr[data-index="+index+"]"),
  l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
  o = "layTableAllChoose" === e.attr("lay-filter");

 e.find('input[name="layTableCheckbox"]').prop("checked",checked);
 if(callbacks){
  this.setCheckData(index, checked), this.syncCheckAll();a.renderForm("checkbox");
  layui.event.call(this, s, "checkbox(" + f + ")", {
   checked: n,
   data: d.cache[a.key] ? d.cache[a.key][l] || {} : {},
   type: o ? "all" : "one",
   mysetCheck:mylaysetCheck.bind(a)
  })
 }else {
  this.setCheckData(index, checked), this.syncCheckAll();a.renderForm("checkbox");

 }
};

在table源码中

a.elem.on("click", 'input[name="layTableCheckbox"]+', function () {}方法内有一个layui.event.call()函数===> 源码为:

layui.event.call(this, s, "checkbox(" + f + ")", {
 checked: n,
 data: d.cache[a.key] ? d.cache[a.key][l] || {} : {},
 type: o ? "all" : "one"
})

改为:

layui.event.call(this, s, "checkbox(" + f + ")", {
 checked: n,
 data: d.cache[a.key] ? d.cache[a.key][l] || {} : {},
 type: o ? "all" : "one",
 mysetCheck:mylaysetCheck.bind(a)
})

通过以下代码调用

//用户点击复选框时,触发的回调函数
table.on('checkbox(test)', function(obj){
 //两个参数,第一个是数组的索引,第二个是是否勾选,第三个是否使用回调函数
 obj.mysetCheck(index,checked,callbacks);
});

//案例:查看材料的id为2,索引为2;修改材料的id为3,索引为3
table.on('checkbox(quanXianAll)', function(obj){
 if(obj.data.id===3&&obj.checked){
  obj.mysetCheck(2,true,true);
 }
 if(obj.data.id===2&&!obj.checked){
  obj.mysetCheck(3,false,true);
 }

});
//这样就可以实现:勾选“修改材料”时也会把“查看材料”勾选上,取消勾选“查看材料”时也会取消“修改材料”的勾选

对比:

第一种方法不用修改源码,但代码量多,且不是局部刷新;

第二种方法是局部刷新,代码不多,但是修改源码,设计到版本迁移的问题,且业务逻辑错误,容易发生无限循环;

以上这篇基于layui的table插件进行复选框联动功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 #Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 #Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 #Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
Vue.set 全局操作简单示例
Sep 19 #Javascript
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
React key值的作用和使用详解
2018/08/23 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python pandas库的安装和创建
2019/01/10 Python
django2笔记之路由path语法的实现
2019/07/17 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
事业单位人员的自我评价范文
2014/09/21 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年教研组工作总结
2015/05/04 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
三下乡活动心得体会
2016/01/23 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL