当前位置: 首页 > article >正文

layui table中的checkbox禁用问题

  • 在项目开发中遇到table框已经选择过的数据不支持二次选择从而要禁用复选框不许选中,但会导致复选框全选时layui的table组件源码中赋值时是根据全部复选框的下标顺序来赋值到数组中返回给你,这样已被禁用复选框的数据也会被push到数组中导致数据错乱;本layui 版本为2.4.5,现解决方案如下,找到layui的table.js源码文件

第一步 找到下面代码块

// 找到该代码块!!!!!
a.elem.on("click", 'input[name="layTableCheckbox"]+', function () {
    var e = t(this).prev(), i = a.layBody.find('input[name="layTableCheckbox"]'),
         l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
         o = "layTableAllChoose" === e.attr("lay-filter");
     o ? (i.each(function (e, t) {
         t.checked = n, a.setCheckData(e, n)
     }), a.syncCheckAll(), a.renderForm("checkbox")) : (a.setCheckData(l, n), a.syncCheckAll()), layui.event.call(e[0], u, "checkbox(" + p + ")", v.call(e[0], {
         checked: n,
         type: o ? "all" : "one"
     }))
 })

第二部 在第一步的代码快下面添加

a.elem.on("click", 'input[name="checkChooseAll"]+', function () {
            var e = t(this).prev(), i = a.layBody.find('input[name="checkChooseAll"]'),
                l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
                o = "tableCheckChooseAll" === e.attr("lay-filter");
            var _i = a.layBody.find('input[name="layTableCheckbox"]');
            if(o){
                i.each(function (e, i) {
                    var idx = t(i).parents('tr').attr('data-index');
                    i.checked = n, a.setCheckData(idx, n)
                });
                (_i.each(function (e, i) {
                    var idx = t(i).parents('tr').attr('data-index');
                    i.checked = n, a.setCheckData(idx, n)
                }), a.syncCheckAll(), a.renderForm("checkbox"))
            }else {
                var id = e.data('id');
                var idName = e.data('idKey');
                var bc = a.layBody.find('[data-check-id="' + id + '"]');
                (bc.each(function (e, t) {
                    t.checked = n;
                }), a.renderForm("checkbox"));
                var r = d.cache[a.key];
                t.each(r, function (idx, ee) {
                    if (ee[idName] === id) {
                        a.setCheckData(idx, n)
                    }
                });
            }
            layui.event.call(e[0], u, "checkbox(" + p + ")", v.call(e[0], {
                checked: n,
                type: o ? "all" : "one"
            }))
        })

第三步 回到你渲染table数据的js中修改checkbox;其中注意data-id的值与data-id-key的字段需要一致,因在第一步代码块中有做判断处理

 {
    field: 'choosePatient',
     width: 60,
     align: 'center',
     title: '<input type="checkbox" name="checkChooseAll" lay-skin="primary" lay-filter="tableCheckChooseAll">',
     templet: function (d) {
         return '<input type="checkbox" lay-skin="primary" class="check-all" name="checkChooseAll" data-id="' + d.drugsInfo + '" data-id-key="drugsInfo">'
     }
 }

http://www.kler.cn/news/312107.html

相关文章:

  • Vue3.0组合式API:使用ref获取DOM元素
  • 中国电子学会202403青少年软件编程(Python)等级考试试卷(二级)真题
  • 数据库———事务及bug的解决
  • SpringCloud~
  • idea 恢复 pom 文件呈现灰色并带删除线
  • 【JavaEE】线程创建和终止,Thread类方法,变量捕获(7000字长文)
  • redis集群创建问题处理
  • 408算法题leetcode--第六天
  • 【项目案例】物联网比较好的10+练手项目推荐,附项目文档/源码/视频
  • Elasticsearch:一次生产集群 ES Watcher 失效的深度排查与分析 - 全过程剖析与解决方案
  • 【面试八股总结】GMP模型
  • IP-adapter masking
  • 高频旋转滑环的特点与应用分析
  • 前端大屏自适应方案
  • POI操作EXCEL增加下拉框
  • 《线性代数》常用公式定理总结
  • 第十一章 【后端】商品分类管理微服务(11.5)——增强响应
  • JavaScript网页设计案例(动态表单、实时搜索、交互式地图、无限滚动加载等)
  • 【qt】一个WPS项目了解qt界面设计的基本套路
  • 基于SpringBoot+Vue的私人牙科诊所管理系统
  • 从0书写一个softmax分类 李沐pytorch实战
  • 《深入了解 Linux 操作系统》
  • Scrapy爬虫框架 Pipeline 数据传输管道
  • K8S容器实例Pod安装curl-vim-telnet工具
  • 人工智能在鼻咽癌中的应用综述|文献精析·24-09-13
  • Python中使用Redis布隆过滤器
  • 苹果为什么不做折叠屏手机?
  • 2024蓝桥杯省B好题分析
  • vulnhub靶机:Holynix: v1
  • GO CronGin