输入菜单关键字,遍历匹配到 menuIds,展开 匹配节点 的所有父节点以及 匹配节点 本身,高亮 匹配节点
菜单检索,名称、地址、权限标志 等 关键字匹配、展开、高亮(全程借助 DeepSeek )
便捷简洁的企业官网 的后台菜单管理,图示:

改造点:
(1)修改 bootstrapTreeTable 的节点class命名方式为:treegrid-{item[options.id]},即采用id作为节点的唯一标识;
(2)展开所有父节点;
(3)展开该节点本身;
(4)高亮该节点。
1. 修改 bootstrapTreeTable 的节点class命名方式为:treegrid-{item[options.id]},即采用id作为节点的唯一标识。只涉及 jquery.treegrid.extension.js 两处:
(1)修改 target.getChildNodes 方法// 递归获取子节点并且设置子节点target.getChildNodes = function(data, parentNode, parentIndex, tbody) {$.each(data, function(i, item) {if (item[options.parentCode] == parentNode[options.code]) {var tr = $('<tr></tr>');// 使用 item[options.id] 作为节点 IDtr.addClass('treegrid-' + item[options.id]);// 设置父节点关系tr.addClass('treegrid-parent-' + parentNode[options.id]);// 渲染行target.renderRow(tr, item);// 标记节点已显示item.isShow = true;// 将行添加到表格体tbody.append(tr);// 递归处理子节点target.getChildNodes(data, item, item[options.id], tbody);}});};(2)修改 target.load 方法// 加载数据target.load = function(parms) {// 加载数据前先清空target.html("");// 构造表头var thr = $('<tr></tr>');$.each(options.columns, function(i, item) {var th = null;if (i == 0 && item.field == 'selectItem') {hasSelectItem = true;th = $('<th style="text-align:' + item.valign + ';width:36px"></th>');} else {th = $('<th style="text-align:' + item.valign + ';padding:10px;' + ((item.width) ? ('width:' + item.width) : '') + '"></th>');}th.text(item.title);thr.append(th);});var thead = $('<thead class="treegrid-thead"></thead>');thead.append(thr);target.append(thead);// 构造表体var tbody = $('<tbody class="treegrid-tbody"></tbody>');target.append(tbody);// 添加加载loadingvar _loading = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">正在努力地加载数据中,请稍候……</div></td></tr>';tbody.html(_loading);// 默认高度if (options.height) {tbody.css("height", options.height);}$.ajax({type: options.type,url: options.url,data: parms ? parms : options.ajaxParams,dataType: "JSON",success: function(data, textStatus, jqXHR) {// 加载完数据先清空tbody.html("");if (!data || data.length <= 0) {var _empty = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">没有记录</div></td></tr>';tbody.html(_empty);return;}// console.log('Loaded data:', data); // 调试信息var rootNode = target.getRootNodes(data);$.each(rootNode, function(i, item) {var tr = $('<tr></tr>');tr.addClass('treegrid-' + item[options.id]); // 使用 id 作为节点 IDtarget.renderRow(tr, item);item.isShow = true;tbody.append(tr);target.getChildNodes(data, item, item[options.id], tbody);});// 下边的操作主要是为了查询时让一些没有根节点的节点显示$.each(data, function(i, item) {if (!item.isShow) {var tr = $('<tr></tr>');tr.addClass('treegrid-' + item[options.id]); // 使用 id 作为节点 IDtarget.renderRow(tr, item);tbody.append(tr);}});target.append(tbody);// 初始化treegridtarget.treegrid({treeColumn: options.expandColumn ? options.expandColumn : (hasSelectItem ? 1 : 0),expanderExpandedClass: options.expanderExpandedClass,expanderCollapsedClass: options.expanderCollapsedClass});if (!options.expandAll) {target.treegrid('collapseAll');}},error: function(xhr, textStatus) {var _errorMsg = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">' + xhr.responseText + '</div></td></tr>';tbody.html(_errorMsg);debugger;},});};
2.展开所有父节点(在 jquery.treegrid.js 中新增)
/*** 展开指定节点的所有父节点** @param {string} nodeId 节点的唯一标识符* @returns {Object[]}*/expandParentNodes: function(nodeId) {return this.each(function() {var $this = $(this);var node = $this.treegrid('getNodeById', nodeId, $this.treegrid('getTreeContainer'));if (node.length > 0) {// 递归展开父节点var parentNode = node.treegrid('getParentNode');while (parentNode !== null) {parentNode.treegrid('expand');parentNode = parentNode.treegrid('getParentNode');}}});},
3.展开该节点本身(在 jquery.treegrid.js 中新增)
/*** 展开指定节点** @param {string} nodeId 节点的唯一标识符* @returns {Object[]}*/expandNode: function(nodeId) {return this.each(function() {var $this = $(this);// 找到对应的节点var node = $this.treegrid('getNodeById', nodeId, $this.treegrid('getTreeContainer'));// console.log('Node found:', node); // 调试信息if (node.length > 0) {// 展开该节点node.treegrid('expand');// console.log('Node expanded:', node); // 调试信息}// else{// console.error('Node not found with ID:', nodeId); // 调试信息// }});},
4.高亮该节点(在 jquery.treegrid.js 中新增)
/*** 高亮指定节点(设置背景色为红色)** @param {string} nodeId 节点的唯一标识符* @param {string} backgroundColor 高亮的颜色* @returns {Object[]}*/highlightNode: function(nodeId, backgroundColor = '#CDEDC1') {return this.each(function() {var $this = $(this);var node = $this.treegrid('getNodeById', nodeId, $this.treegrid('getTreeContainer'));if (node.length > 0) {// 设置背景色为红色node.css('background-color', backgroundColor); // #CDEDC1 #FFE3FA #99FFCC}});},
5.将后面 三个改造点合并一处(在 jquery.treegrid.js 中新增):
/*** 展开指定节点的所有父节点、该节点本身,并高亮该节点** @param {string} nodeId 节点的唯一标识符* @returns {Object[]}*/expandAndHighlightNode: function(nodeId) {return this.each(function() {var $this = $(this);// 清除所有节点的背景色// 展开所有父节点$this.treegrid('expandParentNodes', nodeId);// 展开该节点本身$this.treegrid('expandNode', nodeId);// 高亮该节点$this.treegrid('highlightNode', nodeId);});},
6. 在 jquery.treegrid.extension.js 中调用 (在 jquery.treegrid.extension.js 中新增)
/*** 展开指定节点的所有父节点、该节点本身,并高亮该节点** @param {Object} target 目标表格* @param {string} nodeId 节点的唯一标识符* @param {string} backgroundColor 高亮的背景色(默认:'#CDEDC1')* @returns {Object[]}*/expandAndHighlightNode: function(target, nodeId, backgroundColor) {return target.each(function() {var $this = $(this);// 调用 treegrid 的 expandAndHighlightNode 方法$this.treegrid('expandAndHighlightNode', nodeId, backgroundColor);});},
7. 在使用处调用:
// 清除所有节点的背景色$('#table').find('tr').css('background-color', '');$.each(menuIds, function(i, id) {// console.log("展开:"+id);$('#table').bootstrapTreeTable('expandAndHighlightNode', id);});
本文同步发布于:
输入菜单关键字,遍历匹配到 menuIds,展开 匹配节点 的所有父节点以及 匹配节点 本身,高亮 匹配节点 - BGStone - 博客园
应用于 便捷简洁的企业官网 的后台菜单管理
相关文章:
输入菜单关键字,遍历匹配到 menuIds,展开 匹配节点 的所有父节点以及 匹配节点 本身,高亮 匹配节点
菜单检索,名称、地址、权限标志 等 关键字匹配、展开、高亮(全程借助 DeepSeek ) 便捷简洁的企业官网 的后台菜单管理,图示: 改造点: (1)修改 bootstrapTreeTable 的节点class命名方式为:treeg…...
【Blender】二、建模篇--07,置换修改器
0 00:00:03,620 --> 00:00:08,620 大家好 这张课呢 我们来讲建模篇的最后一个重点修改器 置换修改器 1 00:00:08,980 --> 00:00:17,580 把它放在最后 不是因为它最难 而是因为它很常用 尤其大家以后做材质的时候 我们可以用一张贴图把一个平面做出来凹凸的感觉 2 00:00…...
玩转 Java 与 Python 交互,JEP 库来助力
文章目录 玩转 Java 与 Python 交互,JEP 库来助力一、背景介绍二、JEP 库是什么?三、如何安装 JEP 库?四、JEP 库的简单使用方法五、JEP 库的实际应用场景场景 1:数据处理场景 2:机器学习场景 3:科学计算场…...
鸿蒙学习-
鸿蒙数据传值 //* 传值 //* State /**State创建一个响应式的数据,但不是所有的更改都会引起刷新,只有被框架观察到的修改才会被刷新UI* 1. 基本数据类型如 number string boolean等值的变化修改* 2. Object类型,只会观察到第一层的数据变化或…...
list结构刨析与模拟实现
目录 1.引言 2.C模拟实现 2.1模拟实现结点 2.2模拟实现list前序 1)构造函数 2)push_back函数 2.3模拟实现迭代器 1)iterator 构造函数和析构函数: *操作符重载函数: 前置/后置/--: /!操作符重载…...
机器人部分专业课
华东理工 人工智能与机器人导论 Introduction of Artificial Intelligence and Robots 必修 考查 0.5 8 8 0 1 16477012 程序设计基础 The Fundamentals of Programming 必修 考试 3 64 32 32 1 47450012 算法与数据结构 Algorithm and Data Structure 必修 考试 3 56 40 …...
流行粗野主义几何风现代曲线标题logo设计psai无衬线英文字体安装包 Mortend – Extended Family
介绍我们名为 Mortend 的新探索,这是一个强大的扩展字体系列。Mortend 的设计具有几何形状、大胆、强烈的曲线和现代感。灵感来自当今流行的粗野主义海报和极简主义设计,让您有更多机会表达您的创造力。这个字体系列带来了强烈的感觉而优雅的外观&#x…...
前端常见面试题-2025
vue4.0 Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本,引入了许多新特性和改进,旨在提升开发者的体验和性能。以下是一些关键的更新和新特性: Composition API 重构:Vue 3 引入了 Composition API 作为…...
高通Camera点亮3——Camera Module
Camera点亮除了Sensor之外还需要配置module、EEPROM等,multicamera;配置好编译设置。 Module <?xml version"1.0" encoding"utf-8" ?> <cameraModuleData<!--Module group can contain either 1 module or 2 modules…...
学习路程二 LangChain基本介绍
前面简单调用了一下deepseek的方法,发现有一些疑问和繁琐的问题,需要更多的学习,然后比较流行的就是LangChain这个东西了。 目前大部分企业都是基于 LangChain 、qwen-Agent、lammaIndex框架进行大模型应用开发。LangChain 提供了 Chain、To…...
Docker-技术架构演进之路
目录 一、概述 常见概念 二、架构演进 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 三、尾声 一、概述 在进行技术学习过程中&am…...
API接口设计模式:从分层架构到CQRS的实战应用
以下将从分层架构和 CQRS(命令查询职责分离)的基本概念入手,为你阐述从分层架构到 CQRS 的实战应用相关内容: 分层架构 概念:分层架构是将系统按照功能划分为不同的层次,每个层次负责特定的职责,…...
【机器学习】【KMeans聚类分析实战】用户分群聚类详解——SSE、CH 指数、SC全解析,实战电信客户分群案例
1.引言 在实际数据分析中,聚类算法常用于客户分群、图像分割等场景。如何确定聚类数 k 是聚类分析中的关键问题之一。本文将以“用户分群”为例,展示如何通过 KMeans 聚类,利用 SSE(误差平方和,也称 Inertiaÿ…...
【C++】 时间库chrono计算程序运行时间
C 时间库chrono计算程序运行时间 本文总结了chrono库的引入方法以及计算程序片段运行时间的方法 一、chrono库的引入方法(注意事项) 首先chrono是属于std命名空间的。 所以在程序中应该这样包含头文件: #include <chrono> using n…...
PCL 边界体积层次结构(Boundary Volume Hierarchy, BVH)
文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 边界体积层次结构(Boundary Volume Hierarchy, BVH) 是一种高效的空间数据结构,广泛应用于计算机图形学、计算机视觉、机器人学、物理仿真等领域。它的核心思想是通过将空间递归地划分为层次化的包围体(通常是轴…...
算法随笔_58: 队列中可以看到的人数
上一篇:算法随笔_57 : 游戏中弱角色的数量-CSDN博客 题目描述如下: 有 n 个人排成一个队列,从左到右 编号为 0 到 n - 1 。给你以一个整数数组 heights ,每个整数 互不相同,heights[i] 表示第 i 个人的高度。 一个人能 看到 他右边另一个人…...
创建React项目的三个方式
创建React项目 创建一个React项目非常简单,通常有几种方法可以进行,下面是最常见的几种方法: 1. 使用 create-react-app (已经不被推荐了) create-react-app 是一个官方的脚手架工具,用于快速创建 React 项目。它会为你配置好很…...
QT闲记-工具栏
工具栏通常用来放置常用的操作按钮,如QPushButton,QAction等。可以放置在顶部,底部,左侧,右侧,并且支持拖曳,浮动。 1、创建工具栏 通常通过QMainWindow 提供的addToolBar()来创建,它跟菜单栏一样,如果需要工具栏,一般情况下,我们设置这个类的基类为QMainWindow。 …...
为什么继电器要加一个反向并联一个二极管
1 动感就是电流不突变 2 为什么有的继电器上面要反向并联一个二极管和电阻 1 并联二极管是为消除掉动感产生的高压 2 加上二极管是为了让继电器更快的断开(二极管选型的工作电流要大于动感电流,开关要够快) 3 公式:二极管压降0…...
【Leetcode 每日一题 - 扩展】1512. 好数对的数目
问题背景 给你一个整数数组 n u m s nums nums。 如果一组数字 ( i , j ) (i,j) (i,j) 满足 n u m s [ i ] n u m s [ j ] nums[i] nums[j] nums[i]nums[j] 且 i < j i < j i<j,就可以认为这是一组 好数对 。 返回好数对的数目。 数据约束 1 ≤ n …...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
