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

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">'}}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Linux嵌入式驱动开发指南(速记版)---Linux基础篇
  • 【动态规划】两个数组的 dp 问题二
  • Maven进阶-二、依赖
  • [答疑]《分析模式》2020中译本翻译水平怎样
  • 线性调频信号脉冲压缩并非是一个门信号
  • WPF入门教学五 布局容器入门
  • uniapp自定义导航栏以及页面加背景
  • 【MySQL】MySQL 在 Centos 7环境安装
  • 【Java】掌握Java:基础概念与核心技能
  • 为C#的PetaPoco组件增加一个批量更新功能(临时表模式)
  • 【贪心算法】贪心算法二
  • Linux驱动开发 ——架构体系
  • C++编译环境(IDE)推荐及安装
  • Python 单元测试:深入理解与实战应用20240919
  • 【Ubuntu】ubuntu如何使用ufw(Uncomplicated Firewall)管理防火墙?一文带你学会!
  • 【翻译】babel对TC39装饰器草案的实现
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • October CMS - 快速入门 9 Images And Galleries
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • SQLServer之创建数据库快照
  • WePY 在小程序性能调优上做出的探究
  • 半理解系列--Promise的进化史
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 什么软件可以剪辑音乐?
  • 说说动画卡顿的解决方案
  • 算法-图和图算法
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • ​埃文科技受邀出席2024 “数据要素×”生态大会​
  • ​学习一下,什么是预包装食品?​
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • (k8s中)docker netty OOM问题记录
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (原)本想说脏话,奈何已放下
  • (原創) 系統分析和系統設計有什麼差別? (OO)
  • ***原理与防范
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .Net IOC框架入门之一 Unity
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .NET 表达式计算:Expression Evaluator
  • .NET/C# 检测电脑上安装的 .NET Framework 的版本
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • /bin、/sbin、/usr/bin、/usr/sbin
  • @ModelAttribute使用详解
  • @RequestMapping-占位符映射
  • [2013][note]通过石墨烯调谐用于开关、传感的动态可重构Fano超——
  • [AR]Vumark(下一代条形码)
  • [AutoSar]BSW_Memory_Stack_004 创建一个简单NV block并调试
  • [c++] 自写 MyString 类
  • [CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet),了解神经网络各个层背后算法原理
  • [go] 迭代器模式
  • [I2C]I2C通信协议详解(一) --- 什么是I2C
  • [iOS]中字体样式设置 API
  • [J2ME]url请求返回参数非法(java.lang.illegalArgument)