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.mzph.cn/news/879819.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《 C++ 修炼全景指南:十 》自平衡的艺术:深入了解 AVL 树的核心原理与实现

摘要 本文深入探讨了 AVL 树&#xff08;自平衡二叉搜索树&#xff09;的概念、特点以及实现细节。我们首先介绍了 AVL 树的基本原理&#xff0c;并详细分析了其四种旋转操作&#xff0c;包括左旋、右旋、左右双旋和右左双旋&#xff0c;阐述了它们在保持树平衡中的重要作用。…

C++ 常用设计模式

1、单例模式 一个类只有一个实例&#xff0c;提供一个全局访问点来访问这个实例。 分为懒汉模式和饿汉模式&#xff1a; 懒汉模式就是 只有用到这个实例才会初始化对象并返回 &#xff08;调用了对外的接口才实例化对象&#xff09;饿汉模式就是 不管用不用得到&#xff0c;都…

Unity3D 小案例 像素贪吃蛇 02 蛇的觅食

Unity3D 小案例 像素贪吃蛇 第二期 蛇的觅食 像素贪吃蛇 食物生成 在场景中创建一个 2D 正方形&#xff0c;调整颜色&#xff0c;添加 Tag 并修改为 Food。 然后拖拽到 Assets 文件夹中变成预制体。 创建食物管理器 FoodManager.cs&#xff0c;添加单例&#xff0c;可以设置…

【VitualBox】VitualBox的网络模式+网络配置

VirtualBox 1. 简介 VirtualBox 是一款开源虚拟机软件&#xff0c;使用者可以在VirtualBox上安装并且执行Solaris、Windows、DOS、Linux、OS/2 Warp、BSD等系统作为客户端操作系统。 2. 六种网络接入模式 VirtualBox提供了多种网络接入模式&#xff0c;他们各有优缺点&#xf…

YOLOv8改进 | 自定义数据集训练 | AirNet助力YOLOv8检测

目录 一、本文介绍 二、AirNet原理介绍 2.1 对比基降解编码器&#xff08;CBDE&#xff09; 2.2 降解引导修复网络&#xff08;DGRN&#xff09; 三、yolov8与AirNet结合修改教程 3.1 核心代码文件的创建与添加 3.1.1 AirNet.py文件添加 3.1.2 __init__.py文件添加 3…

【qt】一个WPS项目了解qt界面设计的基本套路

项目功能演示: 放心食用!最后有完整代码. 超级详细,期待您的一个点赞❥(^_-) 一览全局: WPS项目目录 一.创建项目二.导入资源三.ui设计四.字号选择框初始化五.滚动条初始化六.添加自定义文本类七.初始化action状态八.新建文档九.打开文件十.保存与另存为十一.打印/打印预览十…

富格林:正规攻克黑幕稳健交易

富格林指出&#xff0c;黄金投资的热度猛增不减&#xff0c;很多投资者听闻其优势后都纷纷进场。但这不乏有经验不足的新手投资者&#xff0c;由于正规经验匮乏导致无法看清黑幕现象确保不了稳健交易。这时&#xff0c;相关正规的交易经验对于点破黑幕现象稳健交易就显得极其重…

vue 入门一

参考&#xff1a;丁丁的哔哩哔哩 1.使用vue 1.1 使用CDN的方式使用Vue mount和<div id"counter">关联起来 1.2 vue中的createApp import { createApp } from "vue"; import App from "./App.vue"; createApp(App).mount("#app&qu…

计算机网络 8.*结构化布线

第八章 结构化布线 第一节 结构化布线基础 一、认识结构化布线 1.定义&#xff1a;在建筑物或楼宇内安装的传输线路&#xff0c;是一个用于语音、数据、影像和其他信息技术的标准结构化布线系统。 2.任务&#xff1a;使语音和数据通信设备、交换设备和其他信息管理系统彼此相…

PyTorch使用------自动微分模块

目录 &#x1f354; 梯度基本计算 1.1 单标量梯度的计算 1.2 单向量梯度的计算 1.3 多标量梯度计算 1.4 多向量梯度计算 1.5 运行结果&#x1f4af; &#x1f354; 控制梯度计算 2.1 控制不计算梯度 2.2 注意: 累计梯度 2.3 梯度下降优化最优解 2.4 运行结果&#x1…

数字工厂管理系统与MES系统在实际应用中有哪些区别

随着制造业的数字化转型步伐加快&#xff0c;数字工厂管理系统与制造执行MES系统作为两大关键工具&#xff0c;在实际应用中展现出了明显的差异。本文将从实际应用的角度&#xff0c;详细探讨这两种系统之间的主要区别。 数字工厂管理系统的实际应用 数字工厂管理系统侧重于对…

掌握Spring Boot数据库集成:用JPA和Hibernate构建高效数据交互与版本控制

在现代应用开发中&#xff0c;数据库操作是核心环节之一。Spring Boot提供了简化数据库集成的强大工具&#xff0c;而JPA&#xff08;Java Persistence API&#xff09;和Hibernate是两种非常流行的ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;可以帮助我们将对象…

梧桐数据库(WuTongDB):MySQL 优化器简介

MySQL 优化器是数据库管理系统中的一个重要组件&#xff0c;用于生成并选择最优的查询执行计划&#xff0c;以提高 SQL 查询的执行效率。它采用了基于代价的优化方法&#xff08;Cost-Based Optimizer, CBO&#xff09;&#xff0c;通过评估不同查询执行方案的代价&#xff0c;…

如何删除EXCELL文件中的空行?

1&#xff0c;选择某一列 2&#xff0c;点击《开始》《查找和选择》>《定位条件》&#xff0c;调出《定位条件》的选择框&#xff1b; 3&#xff0c;在定位条件选项框&#xff0c;选择《空值》&#xff1b; 4&#xff0c;找到变灰被选中的某一行&#xff0c;右击《删除》 5&…

GitLab权限及设置

之前很少关注这些&#xff0c;项目的权限&#xff0c;一般由专门的管理人员设置。 但自己创建的项目自己可以设置权限。下面是一些笔记。 GitLab中用户权限_gitlab 权限-CSDN博客 开发中遇到要将自己这块的代码上传到Git&#xff0c;由其他组的同事拉取后继续开发。上传代码后…

SQL 查询语句汇总

在软件开发和数据分析中&#xff0c;SQL&#xff08;结构化查询语言&#xff09;是与数据库交互的重要工具。为了更好地理解 SQL 查询语句的使用&#xff0c;本文将设计一个简单的数据库&#xff0c;包括几张表&#xff0c;并通过这些表展示各种 SQL 查询的应用。 一、背景信息…

JavaScript 笔记汇总

JavaScript 笔记汇总 引入方式 内部方式 通过 script 标签包裹 JavaScript 代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <…

SpringBoot Kafka发送消息与接收消息实例

前言 Kafka的基本工作原理 我们将消息的发布&#xff08;publish&#xff09;称作 producer(生产者)&#xff0c;将消息的订阅&#xff08;subscribe&#xff09;表述为 consumer&#xff08;消费者&#xff09;&#xff0c;将中间的存储阵列称作 broker(代理)&#xff0c;这…

QT打开摄像头采集

QT打开摄像头采集 今天好不容易把opencv的环境装好&#xff0c;然后想学习一下人脸识别的功能&#xff0c;但是在图书馆坐了4个多小时了&#xff0c;屁股疼就先写个摄像头采集的功能&#xff0c;明天继续学习吧&#xff0c;废话不多&#xff0c;嚼个奶片开始发车&#xff01;&…

滚雪球学SpringCloud[5.3讲]: 配置管理中的高可用与容错

全文目录&#xff1a; 前言高可用配置中心的搭建为什么需要高可用配置中心&#xff1f;多实例与负载均衡数据一致性实战示例&#xff1a;使用Nginx实现高可用配置中心 Spring Cloud Config中的高可用性高可用性的进一步优化 配置管理中的故障处理策略分布式系统中的常见故障故障…