基于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 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
js实现微信聊天界面
Aug 09 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP7修改的函数
2021/03/09 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
python处理json数据中的中文
2014/03/06 Python
Python的迭代器和生成器
2015/07/29 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python中文编码知识点
2019/02/18 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
简述 Python 的类和对象
2020/08/21 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
关于赌博的检讨书
2014/01/24 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
英文导游词
2015/02/13 职场文书
小学科学课教学反思
2016/02/23 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS