当前位置: 首页 > 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.mrgr.cn/news/30074.html

相关文章:

  • 再看Java-笔试
  • 为什么嫁人就要嫁公务员?稳定、收入高、福利好、资源多
  • 【技术解析】消息中间件MQ:从原理到RabbitMQ实战(深入浅出)
  • ICL、CoT、ReAct个人记录
  • js中两种异步方式:async+await以及then
  • 基于Python的自然语言处理系列(12):使用TorchText和LSTM进行序列到序列(seq2seq)翻译
  • 2024年03月中国电子学会青少年软件编程(图形化)等级考试试卷(一级)答案 + 解析
  • 基于python+django+vue的图书管理系统
  • 【AI视频】Runway文生视频Gen-2、Gen-3详解
  • 【AIGC半月报】AIGC大模型启元:2024.09(下)
  • 【数据结构】排序算法---归并排序
  • Halcon OCR检测 免训练版
  • GEC6818初次连接使用
  • C++(学习)2024.9.18
  • 新手教学系列——非正常关机导致MySQL权限表(db)损坏及修复详解
  • 健康监测功能或暂缓亮相,Apple Watch Series 10最新爆料解析
  • Find My太阳镜|苹果Find My技术与太阳镜结合,智能防丢,全球定位
  • 关于联想笔记本开机无法正常进入到桌面,提示Check Date and Time settings错误的解决方法
  • JavaAPI-String和StringBuffer
  • 【AI大模型】LLM主流开源大模型介绍