当我们点击树节点的时候我们常常只能获得树的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. Linux系统的硬件信息

    查看Linux系统的硬件信息 [1]查看内核信息 uname 用于显示系统的内核信息 option -s:显示内核名称 -r:显示内核版本 [root@bogon /]# uname -a Linux ...

  2. Java中代码Bug记录--泛型失效、数组删除、HashMap死循环

    最近在工作的过程中,遇到了不少奇怪自己或者同事的Bug,都是一些出乎意料的,不太容易发现的,记录一下来帮助可能也遇到了这些Bug的人 1. 编译时泛型校验失效 Map<String, Strin ...

  3. 两张图带你全面了解React状态管理库:zustand和jotai

    zustand 和 jotai 是当下比较流行的react状态管理库.其都有着轻量.方便使用,和react hooks能够很好的搭配,并且性能方面,对比React自身提供的context要好得多,因此 ...

  4. Kubernetes(K8S)基本概念

    前言 有公司用 java 或 go , vue 或 react , linux 或 win ,但所有的大厂都在用k8s,没有或,而且是全世界.一个熟悉k8s的开发,薪资可以轻松上25的 base . ...

  5. 动手学深度学习——CNN应用demo

    CNN应用demo CNN实现简单的手写数字识别 import torch import torch.nn.functional as F from torchvision import datase ...

  6. Java-用户登录验证案例

    用户登录验证 1.案例需求: 1.访问带有验证码的登录页面login.jsp 2.用户输入用户名,密码以及验证码 * 如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误 * 如果验证码输入 ...

  7. 基于Java“萌宠之家”宠物综合服务平台设计实现(源码+lw+部署文档+讲解等)

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面 ...

  8. oeasy教您玩转python - 4 - # 调试程序

    ​ 调试程序 回忆上次内容 py 的程序都是写在明面上的 所有需要执行的事情都明着写到了 py 文件中 用 python3 解释 py 文件进行执行 可以下载人家写好的 py 文件 下载的 py 文件 ...

  9. Vue 修改网页标题和图标

    Vue 修改网页标题和图标   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.5.2 需求描述 如下,想更改网页的标题和图标 解决方法 编辑项目根目录下的in ...

  10. 使用update-alternatives管理GCC版本

    目录 简介 操作过程 简介 当操作系统中存在多个版本的GCC时,可以使用使用update-alternatives管理默认使用的编译器版本. 本文使用gcc-9和gcc-11做演示,操作系统为ubun ...