当我们点击树节点的时候我们常常只能获得树的id,那么我么如何获快速定位到树节点的内容呢,除此之外,当树已经存在时,但是缺少我们想要的内容时,我们想在树节点上添加我们需要的额外的内容时该怎么办,那么就是用以下方法可以快速定位到我们需要的节点并可以快速添加内容

/**
* @params
* data:树节点
* key:需要传的id(具体就是树节点唯一值就可以具体对于树而言)
* callback:更新节点的状态,收集特定类型的节点信息,修改节点的数据属性等。
* node:当前节点的所有数据
* i:这个索引帮助我们理解
* data:这个参数提供了当前层级所有节点的信息,可以用于上下文相关的操作。当前节点在其兄弟节点中的相对位置。
* parent:允许访问父节点的信息,对于构建层级关系非常有用
* parentNode:它表示当前节点的父节点。这个参数在递归调用 treeLoop 时传递给下一层,以便下一层的节点能够知道它们的父节点是谁。
*/ const treeLoop = (
data: treeDataNode[],
key: React.Key | null,
callback: (node: treeDataNode, i: number, data: treeDataNode[], parent?: treeDataNode | null) => void,
parentNode?: treeDataNode | null,
) => {
for (let i = 0; i < data.length; i++) {
if (key == null) {
callback(data[i], i, data, parentNode)
if (data[i].children) {
treeLoop (data[i].children!, key, callback, data[i], type)
}
} else {
if (data[i].id === key) {
return callback(data[i], i, data, parentNode)
}
if (data[i].children) {
treeLoop (data[i].children!, key, callback, data[i], type)
}
}
}
}

treeLoop 函数是一个通用的树形结构遍历工具,它可以用于多种场景,如查找特定节点、更新节点状态等。通过传入不同的 callback 函数,可以实现不同的功能。当 key 为 null 时,callback 会在遍历到每一个节点时被调用;而当 key 不为空时,只有在找到与 key 匹配的节点时才会调用 callback。

Tree组件的快速定位更新节点的状态,以及修改节点的数据属性等操作的更多相关文章

  1. Easyui中tree组件实现搜索定位功能及展开节点定位

    这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui ...

  2. js分析 快速定位 js 代码, 还原被混淆压缩的 js 代码

    -1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...

  3. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  4. Element-ui tree组件自定义节点使用方法

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~   <template> <di ...

  5. XPath可以快速定位到Xml中的节点或者属性。XPath语法很简单,但是强大够用,它也是使用xslt的基础知识。

    示例Xml: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <?xml versio ...

  6. 如何快速定位 Redis 热 key?

    背景 在 Redis 中,热 key 指的是那些在一段时间内访问频次比较高的键值,具体到业务上,商品的限时抢购.瞬时的新闻热点或某个全局性的资源,都极有可能产生热点 key. 热点 key 的出现可能 ...

  7. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  8. easyUI 的tree 修改节点,sql递归查询

    1.easyUI 的tree 修改节点: 我需要:切换语言状态,英文下, 修改根节点文本,显示英文. 操作位置:在tree的显示 $('#tree').tree(),onLoadSuccess事件方法 ...

  9. antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录

    1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...

  10. Chrome 如何让光标快速定位到地址栏-进行搜索

    我们经常花费大量的时间来进行使用浏览器搜索网页,如何进行高效的搜索,需要掌握一些快捷键: Windows: Ctrl + L 或 Alt + D 或 F6 Mac: Command + L Linux ...

随机推荐

  1. 用基础Array数组实现动态数组、链表、栈和队列

    代码地址: https://gitee.com/Tom-shushu/Algorithm-and-Data-Structure.git 一.ArrayList自定义封装 package com.zho ...

  2. qt中的 connect 函数

    1.connect()函数实现的是信号与槽的关联. 注意:只有QO bject类及其派生的类才能使用信号和槽的机制 2.函数原型 static QMetaObject::Connection conn ...

  3. RK3568J“麒麟”+“翼辉”国产系统正式发布,“鸿蒙”也正在路上!

    RK3568J "麒麟" + "翼辉"国产系统正式发布 近期,创龙科技RK3568J全国产平台(国产化率100%,提供报告)已正式适配两大国产系统:银河麒麟嵌入 ...

  4. 基于OMAPL138+FPGA核心板——MCSDK开发入门(下)

    本文测试板卡为创龙科技 SOM-TL138F 是一款基于 TI OMAP-L138(定点/浮点 DSP C674x + ARM9)+ 紫光同创 Logos/Xilinx Spartan-6 低功耗 F ...

  5. 核对不同文件夹所含内容的差异并提取缺失内容:Python代码

      本文介绍基于Python语言,以一个大文件夹作为标准,对另一个大文件夹所包含的子文件夹或文件加以查漏补缺,并将查漏补缺的结果输出的方法.   首先,来明确一下本文所需实现的具体需求.现有一个大文件 ...

  6. DASCTF X GFCTF 2024|四月开启第一局 [PWN]详解

    DASCTF X GFCTF 2024|四月开启第一局[PWN] wp(详解) 1.dynamic_but_static 题目保护情况 64位程序,没有开canary和pie保护,got表可改 64位 ...

  7. Mac Vue-cli脚手架搭建

    安装node环境 官网地址:http://nodejs.cn/download/ 我选择版本:v16.16.0 修改npm镜像地址 # 查看镜像地址 npm config get registry # ...

  8. 扬州万方:基于申威平台的 Curve 块存储在高性能和超融合场景下的实践

    背景 扬州万方科技股份有限公司主要从事通信.计算机和服务器.智能车辆.基础软件等产品的科研生产,是国家高新技术企业.专精特新小巨人企业.国家火炬计划承担单位. 业务介绍 申威处理器是在国家" ...

  9. mysql order by 造成语句 执行计划中Using filesort,Using temporary相关语句的优化解决

    mysql> explain  select permission.* from t_rbac_permission   permission  inner JOIN  t_rbac_acl   ...

  10. TypeScript 学习笔记 — 模板字符串和类型体操(十五)

    目录 基本介绍 字符串类型体操实操环节 1. 字符串首字母大写 CapitalizeString 2. 获取字符串第一个字符 FirstChar 3. 获取字符串最后一个字符 LastChar 4. ...