禁用layui树形表格的多选框checkbox

1. 背景

在使用树形表格渲染数据时,需要对数据进行批量操作。相对于选中数据后,再做错误提示。直接把数据的多选框禁用掉更加直观。

2. 实现

     DisabledTableCheckBox: () => {
         // 获取所有行 
         var tableElem = $(".layui-table-fixed-l");
         var rows = tableElem.find('tr');
         for (var i = 1; i < rows.length; i++) {
             var row = rows[i];
             // 检查行是否包含非根节点的标志(例如,parentId不为空)
             if (row.getAttribute('data-level') == 0) {
                 // 找到行内的checkbox
                 var checkbox = row.querySelector('input[type="checkbox"]');
                 // 禁用checkbox 
                 checkbox.setAttribute("disabled", true);
                 row.setAttribute("title", "根节点不能审核!");
                 // 可以添加类来改变外观,表明它被禁用了
                 checkbox.classList.add('layui-disabled');
             }
         }

     }// 渲染表格 

调用点

                tableRender: function () {
                    var self = this;
                    treeTable.render({
                        elem: "#WorkList",
                        limit: 100000,
                        cols: [[ //标题栏
                            { type: "numbers", fixed: 'left' },
                            { type: "checkbox", fixed: 'left', },

                        ]],
                        tree: {
                            customName: {
                                children: "ChildList",
                                name: "Name"
                            },
                            data: {
                                rootPid: "10",
                                cascade: "none"
                            },
                            callback: {
                                onExpand: function () {
                                    format.init();
                                    self.DisabledTableCheckBox();//调用点
                                }
                            }
                        },
                        done: function (res) {
                            format.init();

                            $(".expandAll").on("click", function () {
                                treeTable.expandAll("WorkList", true);
                                format.init();
                                self.DisabledTableCheckBox();//调用点
                            })
                            $(".foldAll").on("click", function () {
                                treeTable.expandAll("WorkList", false);
                                format.init();
                            });
                        }
                    });

3. 效果图

父节点被禁用,

4. 总结

在对以上代码实现过程中,遇到的两个问题。

1. layui表格的渲染过程后,会出现三个tbody,所以

      代码 var tableElem = $(".layui-table-fixed-l"); 而不是var tableElem = $(".workList“)来获取表格DOM元素。

2. 在对父节点禁用,同时添加鼠标悬浮提示信息时,title属性添加在div元素上,而不是input元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/686737.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

操作系统教材第6版——个人笔记6

3.3.4 页面调度 页面调度 当主存空间已满而又需要装入新页时&#xff0c;页式虚拟存储管理必须按照一定的算法把已在主存的一些页调出去 #主存满加新&#xff0c;把已在主存一些页调出选择淘汰页的工作称为页面调度 选择淘汰页的算法称为页面调度算法 页面调度算法设计不当&a…

Linux日志服务rsyslog深度解析(上)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、日志在Linux系统中的作用 2、rsyslog历史背景 …

python怎么下载numpy

安装Python step1&#xff1a;官网下载安装包&#xff1b; https://www.python.org/ 我下载的是python-3.4.4.msi step2&#xff1a;python环境变量配置&#xff1b; 计算机-属性-高级系统设置-环境变量-系统变量 找到PATH&#xff0c;点击编辑&#xff0c;加英文分号;在…

【Java面试】十五、HashMap相关

文章目录 1、二叉树1.1 二叉搜索树1.2 红黑树 2、散列表2.1 哈希冲突2.2 哈希冲突 - 链表法 3、HashMap的实现原理4、HashMap源码4.1 属性部分4.2 构造函数部分 5、HashMap的put方法的流程6、HashMap的扩容机制7、HashMap的寻址算法8、为何HashMap底层的数组长度一定是2的次幂 …

个人笔记-python生成gif

使用文件的修改时间戳进行排序 import os import re import imageio# 设置图片所在的文件夹路径 folder_path /home/czy/ACode/AMAW_20240219/9.3.x(Discrete_time_marching&#xff09;/9.3.17.11.1(Disc_concessive_CH_ZJ)/current_figures # 文件夹路径&#xff1b;linux…

Python Virtualenv:创建独立的 Python 开发环境

在当今软件开发的世界中&#xff0c;Python 是一种备受欢迎的编程语言&#xff0c;其简洁、易读和强大的特性吸引了无数开发者。然而&#xff0c;随着项目的增多和复杂度的提高&#xff0c;有效地管理 Python 项目所需的各种依赖项和库变得越来越重要。在这种情况下&#xff0c…

IPv4 和 IPv6 是什么意思?它们之间的区别都有哪些?

什么是 IPv4 和 IPv6 什么是 IPv4 和 IPv6 呢&#xff1f;下面我们就来了解一下。 IPv4 就是互联网协议第 4 版&#xff0c;是目前广泛使用的网络协议版本。它由互联网工程任务组&#xff08;IETF&#xff09;在 1981 年开发完成。IPv4 使用 32 位地址&#xff0c;允许大约 4…

Vue——子级向父级使用props传递数据(函数)

文章目录 前言原理案例效果演示 前言 看到这个标题&#xff0c;相信很多人会说我&#xff0c;你之前博客写的父级向子级中传递数据使用的是props&#xff0c;然后说的子级向父级传递数据则是用的$emit。 并且还说了对于String、数组Array&#xff0c;只能是父级使用props传递…

深度学习_02_卷积神经网络循环神经网络

卷积神经网络 1. 卷积神经网络 神经元存在局部感受区域----感受野 . 第一个卷积神经网络雏形----新认知机 缺点&#xff1a;没有反向传播算法更新权值&#xff0c;模型性能有限 第一个大规模商用卷积神经网络----Lenet-5 缺点&#xff1a;没有大量数据和高性能计算资源。 第一个…

第三篇——大数据思维的科学基础

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 大数据时代&#xff0c;大数据思维的重要性不言而喻&#xff1b;而信息在…

eclipse添加maven插件

打开eclipse菜单 Help/Install New SoftwareWork with下拉菜单选择 2022-03 - https://download.eclipse.org/releases/2022-03‘type filter text’搜索框中输入 maven选择 M2E - Maven Integration for Eclipse一路next安装&#xff0c;重启eclipseImport项目时&#xff0c;就…

教程 | Navicat 17 管理连接新方法

Navicat 17 提供了比以往更多的连接数据库实例的方式。除了传统的连接字符串方式以外&#xff0c;Navicat 17 还支持 URI 连接&#xff0c;无论身在何处&#xff0c;都可以轻松地通过 URI 访问对象。另外&#xff0c;还有一个新的管理连接功能&#xff0c;即允许你通过一个以用…

Pandas读取excel异常

Pandas 处理excel异常: ValueError: Excel file format cannot be determined, you must specify an engine manually.今天使用pandas 处理excel的时候&#xff0c;抛出异常&#xff1a;ValueError: Excel file format cannot be determined, you must specify an engine manua…

【多模态】36、ShareGPT4V | 借助 GPT4V 的能够来生成更丰富的 caption 用于提升 LMM 模型的能力

文章目录 一、背景二、方法2.1 ShareGPT4V 数据集构建2.2 ShareGPT4V-PT 数据生成2.3 ShareGPT4V-7B Model 三、效果3.1 benchmark3.2 定量分析3.3 多模态对话 四、一些例子 论文&#xff1a;ShareGPT4V: Improving Large Multi-Modal Models with Better Captions 代码&#…

PolygonalSurfaceContourLineInterpolator 多边形交互器

1. 效果&#xff1a; 2.简介&#xff1a; 可以实现在多边形上进行交互&#xff0c;选择&#xff1b;在多边形曲面上实现轮廓点的交互绘制。 该类的使用需要结合 vtkPolygonalSurfacePointPlacer 类&#xff0c;定位点的功能也就是拾取器。 前提&#xff1a;输入的多边形曲面…

华为OD机试 - 两个字符串间的最短路径问题 - 动态规划(Java 2024 D卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…

485数据采集模块

在工业自动化与智能化的浪潮中&#xff0c;数据采集作为整个系统的基础和核心&#xff0c;其准确性和实时性直接关系到生产效率和产品质量。而485数据采集模块&#xff0c;作为连接现场设备与上位机的重要桥梁&#xff0c;其性能与稳定性对于整个系统的运行至关重要。HiWoo Box…

GAT1399协议分析(8)--批量图像查询

一、请求消息定义 视频图像包含视频片段、 图像、 文件、 人员、 人脸、 机动车、 非机动车、 物品、 场景和视频案事件、 视频图像标签等对象 在消息体中,可以包含其中一种类,加上Data字段即可。 ImageInfo对象 二、请求消息实例 wireshark 抓包实例 请求: 文本化: /V…

Linux网络编程:数据链路层协议

目录 前言&#xff1a; 1.以太网 1.1.以太网帧格式 1.2.MTU&#xff08;最大传输单元&#xff09; 1.2.1.IP协议和MTU 1.2.2.UDP协议和MTU 1.2.3.TCP协议和MTU 2.ARP协议&#xff08;地址解析协议&#xff09; 2.1.ARP在局域网通信的角色 2.2.ARP报文格式 2.3.ARP报文…

sqli-labs 靶场 less-5、6 第五关和第六关:判断注入点、使用错误函数注入爆库名、updatexml()函数

SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它&#xff0c;我们可以学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。Less 5 SQLI DUMB SERIES-5 判断注入点&#xff1a;1. 首先&#xff0c;尝试正常的回显内容&#x…