首页 > 其他分享 >Tree组件的快速定位更新节点的状态,以及修改节点的数据属性等操作

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

时间:2024-08-22 17:04:36浏览次数:12  
标签:Tree callback key 组件 treeLoop null data 节点

当我们点击树节点的时候我们常常只能获得树的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,callback,key,组件,treeLoop,null,data,节点
From: https://www.cnblogs.com/Evisu47/p/18374198

相关文章

  • el-tree封装。可以搜索/下拉/高亮/能操作增删改查
    项目场景:     el-tree树形图组写成一个组件,并控制默认高亮问题描述     el-tree树形图组写成一个组件,并控制默认高亮。上边存在搜索框和下拉框。能添加和删除解决方案:组件代码:<template><divclass="grid-contentbg-purple"><!--标题--><......
  • antd5版本修改Table组件滚动条样式
    因为项目需求,要将Table组件的样式修改为UI图所给的效果,但是怎么写都不生效最后发现在 .ant-table的样式中设了scrollbar-color,只要把这里的样式设为scrollbar-color:auto;然后再改.ant-table-body里面滚动条的样式,就可以了.ant-table-body{&::-w......
  • 现在至考研期间的重要时间节点(完整版)
    一、8月下旬-9月上旬全国各个高校招生简章将正式公布,关注全国研究生招生最新政策变化,以及你的目标院校的目标专业研究生招生人数、考试科目、指定参考教材有否发生变化。一般情况下,专业课参考教材每年变化不大,如有变化可能会增加或替代一本或两本参考书,该情况需要多留意。二......
  • Exadata计算节点,如何收缩(/)根文件系统的空间
    1.前言为什么会有收缩根文件系统空间的这种需求呢,这主要是近期的一次Exadata升级项目遇到这种困境。一台11.2.3.3.0版本的Exadata,进行计算节点升级时,提示LVDbSys1的空间大于LVDbSys2的空间,无法进行操作系统备份,升级前的预检查工作失败。(LVDbSys1已经被扩展至1.1TB;而LVDbSys2还是......
  • 为什么用Vite框架?来看它的核心组件案例详解
    Vite是一个前端构建工具,它以其快速的开发服务器和生产优化的打包器而闻名前端界,今天的内容,必须得唠唠Vite的关键能力,以下是Vite的核心组件分析,以及使用案例:原理分析:Vite利用了现代浏览器对ESModule语法的支持,在开发环境中不进行打包编译,而是通过启动本地devServer......
  • centos7安装Kafka单节点环境部署一-ZooKeeper安装与配置
    由于Kafka运行需要zookeeper配合,zookeeper需要运行在JVM上,所以需要安装JDK,zookeeper。Kafka从2.0.0版本开始就不再支持JDK7及以下版本,就以CentOS764位JDK8为例1、下载ZooKeeperwgethttps://archive.apache.org/dist/zookeeper/zookeeper-3.4.12/zookeeper-3.4.12.ta......
  • 开源组件——异步日志方案 spdlog 的讲解
    一:日志的作用1、定义        日志(Log)是记录系统中发生的事件或操作的详细信息的文件或数据流。这些事件或操作可能包括程序执行、系统错误、用户活动、安全事件等日志(Log)是记录系统中发生的事件或操作的详细信息的文件或数据流。这些事件或操作可能包括程序执行、系......
  • ZoneTree: 高性能ACID兼容的.NET有序键值数据库
    安装Install-PackageZoneTree简单示例usingvarzoneTree=newZoneTreeFactory<int,string>().OpenOrCreate();zoneTree.Upsert(39,"HelloZoneTree");配置示例//设置数据库的存储路径vardataPath="data/mydatabase";//使用using语句确保ZoneTre......
  • 从源码分析 SpringBoot 的 LoggingSystem → 它是如何绑定日志组件的
    开心一刻今天心情不好,想约哥们喝点我:心情不好,给你女朋友说一声,来我家,过来喝点哥们:行!我给她说一声我:你想吃啥?我点外卖哥们:你俩定吧,我已经让她过去了我:???我踏马让你过来!和她说一声哥们:哈哈哈,我踏马寻思让她过去呢前情回顾SpringBoot2.7霸王硬上弓Logback1.3→不甜但解渴......
  • 树形菜单节点上下移动(同级别)
     在软件开发过程中,有遇到过树形菜单节点排序问题,如节点上移、节点下移。以下是一种实现方式,请工程师们审查是否合理!     publicclassNodeInfoEntity{///<summary>///id///</summary>[Column(Name="id")]publicstringId{......