Tree组件的快速定位更新节点的状态,以及修改节点的数据属性等操作
当我们点击树节点的时候我们常常只能获得树的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组件的快速定位更新节点的状态,以及修改节点的数据属性等操作的更多相关文章
- Easyui中tree组件实现搜索定位功能及展开节点定位
这几天遇到个input + tree 实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果 小二 上图 : 需要的部件知识: easyui ...
- js分析 快速定位 js 代码, 还原被混淆压缩的 js 代码
-1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
- Element-ui tree组件自定义节点使用方法
工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <di ...
- 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 ...
- 如何快速定位 Redis 热 key?
背景 在 Redis 中,热 key 指的是那些在一段时间内访问频次比较高的键值,具体到业务上,商品的限时抢购.瞬时的新闻热点或某个全局性的资源,都极有可能产生热点 key. 热点 key 的出现可能 ...
- 【技术博客】使用iview的Tree组件写一棵文件树
本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...
- easyUI 的tree 修改节点,sql递归查询
1.easyUI 的tree 修改节点: 我需要:切换语言状态,英文下, 修改根节点文本,显示英文. 操作位置:在tree的显示 $('#tree').tree(),onLoadSuccess事件方法 ...
- antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录
1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...
- Chrome 如何让光标快速定位到地址栏-进行搜索
我们经常花费大量的时间来进行使用浏览器搜索网页,如何进行高效的搜索,需要掌握一些快捷键: Windows: Ctrl + L 或 Alt + D 或 F6 Mac: Command + L Linux ...
随机推荐
- LangChain和Hub的前世今生
作为LLM(大模型)开发框架的宠儿,LangChain在短短几年内迅速崛起,成为开发者们不可或缺的工具.本文将带你探讨LangChain和LangChainHub的发展历程. 1. LLM开发框架的宠 ...
- 在Linux驱动中使用LED子系统
在Linux驱动中使用LED子系统 原文:https://blog.csdn.net/hanp_linux/article/details/79037684 前提配置device driver下面的L ...
- 高通Andriod开机流程与镜像说明
# 高通Andriod开机流程与镜像说明 Android镜像说明 Android设备刷机时都需要ROM包,ROM包下面有很多的.img和其他的相关镜像文件,其中这里面包含了Android很多的分区,A ...
- 我的 ZYNQ 系列总结
我的 ZYNQ 系列总结 背景 ZYNQ平台是我接触认识比较久的平台,还算不错,是工控.音视频各行业都可以使用中高端平台. 本文以ZYNQ-7000为例,其实更高级的MPSOC也是一样的. 先看看我自 ...
- 【WPF】根据选项值显示不同的编辑控件(使用DataTemplateSelector)
接了一个小杂毛项目,大概情形是这样的:ZWT先生开的店是卖拆片机的,Z先生不仅卖机器,还贴心地提供一项服务:可以根据顾客需要修改两个电机的转向和转速(机器厂家有给SDK的,但Z自己不会写程序).厂家有 ...
- 域套接字sendto errno -11分析
sendto errno -11代码分析 errno -11在内核代码中代表EAGAIN(再试⼀次),域套接字sendto过程中 sendto->sock_sendmsg->unix_dg ...
- 《Programming from the Ground Up》阅读笔记:p19-p48
<Programming from the Ground Up>学习第2天,p19-p48总结,总计30页. 一.技术总结 1.object file p20, An object fil ...
- webpack4.15.1 学习笔记(四) — Tree shaking
目录 Tree shaking 原理 标记效果 副作用代码不可被删除 如何实现 Tree shaking 的几种方法 总结 Tree shaking 本质上为了消除无用的js代码,减少加载文件体积的方 ...
- odoo 为form表单视图添加chatter功能
实践环境 Odoo 14.0-20221212 (Community Edition) 需求描述 如图,给表单新增一个类似聊天的窗口,当记录一些表单活动(本例为自动记录当前记录状态变化) 需求实现 模 ...
- 【干货】流量录制回放工具:jvm-sandbox-repeater
在软件开发和测试过程中,我们经常会遇到需要对网络请求进行录制和回放的需求,以便进行调试.测试和分析.为了模拟真实的用户请求,我们通常会使用各种流量录制回放工具来记录并重放网络请求. 其中,jvm-sa ...