当我们点击树节点的时候我们常常只能获得树的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. UG 2406 python 二次开发环境配置

    UG 2406 python 二次开发环境配置 项目地址 https://gitee.com/unm001/nx2406.git 安装python 安装 python 3.10.11 D:\prog\ ...

  2. [FLET] 02 route 测试

    from typing import Dict import flet from flet import AppBar, ElevatedButton, Page, Text, View, color ...

  3. 你使用过 Vuex 吗?

    Vuex 是一个专为 Vue.js 应用程序开发的状态(全局数据)管理模式.每一个 Vuex 应用的核心就是 store(仓库)."store" 基本上就是一个容器,它包含着你的应 ...

  4. Mac Vue-cli脚手架搭建

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

  5. Python 潮流周刊#60:Python 的包管理工具真是多啊(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  6. VPS测试脚本,网络线路,路由测试,流媒体服务器测试脚本

    ​ 收集了一些服务器测试脚本,测试性能,网络以及解锁Netflix等服务.记录收集一下,特此记录. yabs测试脚本wget -qO- yabs.sh | bash 老外比较爱用的服务器性能测试脚本. ...

  7. redis雪崩

    每个key(即数据)如果设置了失效时间的话,如果大量key同时过期的时候,或者说因为某种原因redis中的数据突然大批量丢失,这些key又大量地去请求这些key时,因为redis里面没有这些数据,就会 ...

  8. 彻底理解Linux的DISPLAY变量的作用

    背景 最近遇到个两年前遇到的问题,使用virt-manager提示(virt-manager:873): Gtk-WARNING **: 14:53:28.147: cannot open displ ...

  9. JavaScript高级~数组方法reduce

    reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值. 有点抽象,意思可以看做每个元素执行之后,都会有一个汇总结果,你可以通过这个汇总结果 ...

  10. AngleScript语法

    Class的使用要继承于Interface或者Mixin class.Mixinclass实际上就是类似于抽象类 ,它已经实现的,在子类里面不能实现,类似如下代码: interface AInterf ...