输入菜单关键字,遍历匹配到 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 …...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
