当我们点击树节点的时候我们常常只能获得树的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. 高通UEFI中的I2C的方式读取TP的id

    高通UEFI中的I2C的方式读取TP的id 原文:https://blog.csdn.net/mengluoxixiang/article/details/100103347 老规矩,先说要实现的功能 ...

  2. Android Verified Boot 2.0 AVB详解(基于Android P)

    原文地址:https://android.googlesource.com/platform/external/avb/+/master/ 译文地址:https://blog.csdn.net/sha ...

  3. CF1864C 题解

    \(x = 2^k\) 是好做的,每次以 \(2^{k-1}\) 为因数即可. 对于其他情况,考虑每次让 \(x\) 减去其二进制下最低位的 \(1\) 直至变成 \(2^k\). 这种策略下显然每个 ...

  4. mybatis 逆行工程 附源码

    导读 逆向工程说白了,就可以简化开发工作量,自动生成一些死板的东西,比如POJO.映射文件等等,然后在将代码拷贝至实际工程,直接拿来用! 项目结构 GeneratorSqlMap.java impor ...

  5. Nginx 高性能架构解析

    本文详细探讨了Nginx的反向代理.负载均衡和性能优化技术,包括配置优化.系统优化.缓存机制和高并发处理策略,旨在帮助专业从业者深入理解并有效应用Nginx. 关注TechLead,复旦博士,分享云服 ...

  6. P1387

    #include<iostream> #include<utility> using namespace std; typedef long long ll; #define ...

  7. LabVIEW Actor Framwork (1)________ 边学边做server&client

    初始需求: 现在要做一个类似聊天的demo,一个server端,若干个client端:首先是server启动,通过server可以打开若干个client端,然后每个client可以独立给server发 ...

  8. Swift开发基础06-闭包

    Swift的闭包(Closures)是一种将功能块和上下文整合并演示在代码中的一种手段.闭包可以捕获并存储其上下文中的变量和常量.与普遍存在于其他语言的匿名函数(如Python的lambda.Java ...

  9. SQL Server 验证某栏位是否存在某字符串(CHARINDEX)

    SELECT * FROM LiuJun_PKqitchqi WHERE CHARINDEX('230527Z3258',qr_code) > 0

  10. [oeasy]python0024_ 输出时间_time_模块_module_函数_function

    ​ 输出时间 回忆上次内容 ​print​​函数 有个默认的 ​​end参数​ ​​end参数​​ 的值可以是任意字符串 ​​end参数​​ 的值会输出到结尾位置 ​​end参数​​ 的默认值是 ​​ ...