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.rhkb.cn/news/427825.html

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

相关文章

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

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

Qt 构建版本

Qt提供了三种不同的构建版本&#xff1a;Debug版本&#xff08;调试版本&#xff09;、Release版本&#xff08;发布版本&#xff09;和Profile版本&#xff08;概述版本&#xff09;&#xff0c;每种版本都有其特定的用途和编译设置。 Debug版本&#xff08;调试版本&#x…

基于 SpringBoot 的在线考试系统

专业团队&#xff0c;咨询就送开题报告&#xff0c;欢迎大家私信留言&#xff0c;联系方式在文章底部 摘 要 网络的广泛应用给生活带来了十分的便利。所以把在线考试管理与现在网络相结合&#xff0c;利用java技术建设在线考试系统&#xff0c;实现在线考试的信息化管理。则对…

Python类及元类的创建流程

Python类及元类的创建流程 代码运行结果再看type和object的关系和约定type和object具有的方法不一样看代码和运行结果&#xff0c;可以完全理解python的执行过程。再补充几点&#xff0c; 代码 class MetaCls(type):print(0>>>, MetaCls, 0)def __init__(self, name,…

uniapp vue3 梯形选项卡组件

实现的效果图&#xff1a; 切换选项卡显示不同的内容&#xff0c;把这个选项卡做成了一个组件&#xff0c;需要的自取。 // 组件名为 trapezoidalTab <template> <view class"pd24"><view class"nav"><!-- 左侧 --><view cla…

idea启动oom了解决

解决 Error:java: java.lang.OutOfMemoryError: WrappedJavaFileObject[org.jetbrains.jps.javac.InputFileObject[file:///D:/mingan/pb/backend/src/main/java/com/cy/backend/service/impl/StorageServiceImpl.java]]pos36199: WrappedJavaFileObject[org.jetbrains.jps.j…

你是不是分不清哪些字体是商用,哪些非商用?快来看,免得莫名其妙负债。

前言 最近发现有好多小伙伴在做PPT的时候&#xff0c;都有一个很不好的习惯&#xff1a;没有调整好字体。 这里说的没有调整好字体的意思是&#xff1a;在一些公开发布的内容上使用一些可能造成侵权的字体。 字体侵权‌的后果相当严重。轻者可能面临法律纠纷&#xff0c;重者…

consul服务注册发现与配置中心

目录 1 consul安装与运行 1.1 下载方式 1.2 安装 1.3 启动 1.4 访问方式 2 consul 实现服务注册与发现 2.1 引入 2.2 服务注册 2.3 服务发现 3 consul配置中心 3.1 基础配置 Eureka已经停止更新了&#xff0c;consul是独立且和微服务功能解耦的注册中心&#xff0c;…

Nginx配置虚拟主机

基于域名的虚拟主机 修改配置 进入nginx里的conf目录 修改nginx配置文件nginx.conf vi nginx.conf worker_processes auto;(自动识别CPU数) worker_rlimit_nofile 20480;&#xff08;指定 worker 子进程可以打开的最大文件句柄数&#xff0c;默认为1024&#xff09; use …

杀死端口占用的进程

1、查看端口的进程&#xff0c;以9023为例 &#xff08;1&#xff09;方法1 netstat -tunpl|grep 9023 &#xff08;2&#xff09;方法2 ss -tulpan |grep 9023 &#xff08;3&#xff09;方法3 netstat -ntlp |grep 9023 &#xff08;4&#xff09;方法4 lsof -i:9023 …

百度移动刷下拉词工具:快速出下拉词的技术分析

都2024年了&#xff0c;你还在做SEO百度下拉&#xff1f;答案当然是肯定的&#xff0c;虽然百度的搜索流量不如从前&#xff0c;但移动端的流量依然是巨大的&#xff01;除了百度SEO快排以外&#xff0c;下拉也是一大流量入口&#xff0c;尤其是在移动端搜索的流量越来越大时&a…

计算机组成原理-数值的表示与运算(进制)

在冯诺依曼体系结构中&#xff0c;计算机的3个特点中&#xff0c;有软件以二进制&#xff08;2#&#xff09;的形式表示&#xff0c;也就是数据以二进制的形式存入计算机中 其运算规则为 在有符号数中&#xff1a;1.xxx表示-0.xxx&#xff0c;1表示负号 上述的小数点是我们的认…

鸿蒙手势交互(三:组合手势)

三、组合手势 由多种单一手势组合而成&#xff0c;通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型&#xff0c;支持顺序识别、并行识别和互斥识别三种类型。 GestureGroup(mode:GestureMode, gesture:GestureType[]) //- mode&#xff1a;为GestureMode枚…

vue2中字符串动态拼接字段给到接口

【设计初衷是用户可根据给定的字段进行准确描述】 实现功能&#xff1a; 1. 文本域内容串动态配置字段&#xff0c;以$ {英文}拼接格式给到接口。 &#xff08;传参如&#xff1a;$ {heat_status_code}正常&#xff0c;$ {wdy_temp}也正常&#xff01;&#xff09; 2. 编辑时根…

table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

Postman如何测试WebSocket接口!

01、WebSocket 简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直…

【Linux 20】线程控制

文章目录 &#x1f308; 一、创建线程⭐ 1. 线程创建函数⭐ 2. 创建单线程⭐ 3. 给线程传参⭐ 4. 创建多线程⭐ 5. 获取线程 ID &#x1f308; 二、终止线程⭐1. 使用 return 终止线程⭐ 2. 使用 pthread_exit 函数终止线程⭐ 3. 使用 pthread_cancel 函数终止线程 &#x1f30…

HTTP协议详解以及常见的状态码

HTTP协议的定义&#xff1a; HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一种建立在TCP&#xff08;传输控制协议&#xff09;之上的无状态连接协议。它是互联网的基础协议之一&#xff0c;用于客户端与服务器之间的通信。HTTP规定…

【Python】练习:控制语句(二)第1关

第1关&#xff1a;分支结构基础实训 第一题第二题第三题第四题&#xff08;※&#xff09;第五题&#xff08;※&#xff09;第六题第七题 第一题 #第一题 for temp in [-280, -100, 0, 20, 120, 200]:#请在下面编写代码# ********** Begin ********** #if temp>-273.15:F9/…

如何选择适合客户运营团队的帮助中心搭建工具?8款工具盘点

在竞争激烈的商业环境中&#xff0c;客户运营团队需要高效、便捷的工具来搭建帮助中心&#xff0c;以提升客户服务质量和用户体验。选择合适的帮助中心搭建工具&#xff0c;不仅能提高团队工作效率&#xff0c;还能增强客户满意度和忠诚度。本文将为您盘点八款适合客户运营团队…