当前位置: 首页 > 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">'}}
http://www.lryc.cn/news/444875.html

相关文章:

  • 102.SAPUI5 sap.ndc.BarcodeScannerButton调用摄像头时,localhost访问正常,使用IP访问失败
  • 20240923软考架构-------软考186-190答案解析
  • 基于Spring Boot的宠物咖啡馆平台【附源码】
  • C++模拟实现list:list、list类的初始化和尾插、list的迭代器的基本实现、list的完整实现、测试、整个list类等的介绍
  • Offer60:n个骰子的点数
  • 几种常见的索引类型扫描
  • 苹果CMS插件:优化蜘蛛访问内容,提升百度收录率
  • 后端开发刷题 | 没有重复项数字的全排列
  • Python中的“打开与关闭文件”:从入门到精通
  • 9.23 My_string.cpp
  • 【android10】【binder】【3.向servicemanager注册服务】
  • Java — LeetCode 面试经典150题(一)
  • Python酷玩之旅_mysql-connector
  • 7.搭建个人金融数据库之快速获取股票列表和基本信息!
  • Nginx基础详解1(单体部署与集群部署、负载均衡、正反代理、nginx安装)
  • 等保一体机如何帮你应对网络攻击
  • CVE-2024-1112 Resource Hacker 缓冲区溢出分析
  • WebGL渲染与创建2D内容
  • ArcGIS Desktop使用入门(三)图层右键工具——拓扑(下篇:地理数据库拓扑)
  • LeetCode题练习与总结:二叉树的最近公共祖先--236
  • uni-app 多环境配置
  • 【d48】【Java】【力扣】LCR 123. 图书整理 I
  • 【MySQL】InnoDB 索引为什么使用B+树而不用跳表?
  • 【学习笔记】TLS/SSL握手之Records
  • 【MySQL】创建新账号新数据库并授权
  • Nginx反向代理简介,作用及配置;Nginx负载均衡简介,作用及配置;
  • SAP MIGO M7146不支持移动原因
  • vue使用PDF.JS踩的坑--部署到服务器上显示pdf.mjs viewer.mjs找不到资源
  • 重型工程车辆数据集
  • 【Kubernetes】常见面试题汇总(三十三)