js 遍历树的层级关系的实现

js 遍历树的层级关系的实现
1.遍历树的层级关系

1)先整理数据

2)找到id和数据的映射关系

3)然后找到父节点的数据,进行存储

test() {
      const list = [
        { id: "123", parentId: "", children: [] },
        { id: "124", parentId: "123", children: [] },
        { id: "125", parentId: "124", children: [] },
        { id: "126", parentId: "125", children: [] },
        { id: "127", parentId: "126", children: [] }
      ];
      const mapList = [];
      const tree = [];
      list.forEach(item => {

        mapList[item.id] = item;
      });
      list.forEach(item => {
        const parentNode = mapList[item.parentId];
        if (!parentNode) {

       if (!item.children) {
         item.children = []
       }

          tree.push(item);
        } else {

      if (!parentNode.children) {
        parentNode.children = []
      }

          parentNode.children.push(item);
        }
      });
      console.log("tree", tree);
    }

参考

原文地址:https://www.cnblogs.com/bigorang/p/12423126.html

时间: 2024-10-09 01:44:19

js 遍历树的层级关系的实现的相关文章

Web中树形数据(层级关系数据)的实现—以行政区树为例

在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 树形数据一般通过父节点和子节点实现数据之间的层级关联,层级关系在数据库中主要通过主键和外键来实现. --使用Oracle数据库 --创建行政区表 create table TB_XZQ ( code NUMBER not null, --行政区编码,主键 parent_code NUMBER, -

树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:parent_id) 三.Java模型 (我们把这张网撒在html的一张表里.其实用ul来展示会简单N多,自己思考为什么LZ会选择放在表里) private class Table {        private Long id; // 当前对象的id         private int x; /

如何用报表工具实现树状层级结构的填报表

需求说明 对于带有层级结构的数据中,用户为了能够更加清晰直观地查看,往往需要在数据展示时将层级展示出来,比如常见的省.市.县结构,或者一些科目中也会带有层级.通常,我们管这种形式叫做树状报表.在查询统计类报表中可以使用报表的左主格来实现,但是由于填报模型更加侧重于数据处理,格式设计上有别于查询统计报表,往往较难实现树状报表. 下面,我们通过一个层级科目的例子介绍一下在填报表中如何实现这个需求.首先,我们看一下报表展示的结果: 这个报表是一个按照科目录入数据的填报表,科目分不同等级,比如 1001

6. 处理层级关系

在实际的测试脚本中,有可能需要获取其层级关系,以及获得当前的层级.一般来说当前层级都不会是链接,而父层级则基本是以链 接.找到所在的div或ul,然后再通过该div或ul找到下面的所有链接,这些链接就是父层级.最后不是链接的 部分就应该是当前层级了. HTML: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> &l

通用多层json递归解析,根据json层级关系直接使用: 基节点.子节点.孙节点。

package com.matol.utils; import java.io.InputStream; import java.util.ArrayList; import java.util.Iterator; import java.util.LinkedHashMap; import java.util.List; import java.util.Map; import java.util.Properties; import org.codehaus.jackson.map.Obje

遍历树的两种方式的测试及比较

节点类: /**  * 节点类  */ public class TreeNode { /**  * 节点编号  */ public String id; /**  * 节点内容  */ public String text; /**  * 父节点编号  */ public String parentId; /**  * 孩子节点列表  */ //private Children children = new Children(); private List<TreeNode> childre

探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系

节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”RenderBin 所构成的渲染树,进一步了解这两棵树之间错综复杂的关系,以及理解它们与场景节点树之间更加复杂的关系. 上面是一个虚构的场景结构图,其中叶节点_geode3,以及所有六个几何对象均设置了关联的渲染状 态集(StateSet),且几何体 1 和几何体 2 共享了同一个 StateSet(ss11(

vue层级关系的数据管理

项目背景:为一些有层级关系的数据管理做一套后台管理系统,例如一个小区,里面是有许多楼,楼里有许多层,每一层有许多不同的房······,现在就是要实现对这些数据进行增删改查操作. 1.Tree(树形组件) Sublime Text 3左侧的项目目录,就是有一定层级关系的"数据"被组织成Tree,然后单击各子树,会呈现不一样的内容,因此可借用这个设计思想来设计这一套系统的导航功能.为什么要做这个导航功能,因为若要简单实现,直接用一个选择器组件,放入所有可选项让用户进行选择即可,然而这样做的

怎样理解 DOM 的三种层级关系

除了根节点,其他节点都有三种层级关系. 父节点关系(parentNode):直接的那个上级节点 子节点关系(childNodes):直接的下级节点 同级节点关系(sibling):拥有同一个父节点的节点 注意: 1. 根节点和非根节点都可以没有子节点, 但根节点一定没有父节点, 而非根节点一定有, 且有且仅有一个父节点. 2. 子节点可以有多个, 父节点只能有一个. 3. 同级节点也叫 兄弟节点 , 他们有同样的父节点, 但子节点不一样. 4. 在 js 中, 根节点为 document. 原文