js树形数据处理--树形数据转换，获取指定类型节点下的所有子节点或指定类型下的所有父节点

最新推荐文章于 2024-01-18 09:53:16 发布
置顶 最新推荐文章于 2024-01-18 09:53:16 发布
阅读量2.3k 收藏 6
点赞数 1
分类专栏： js Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40696108/article/details/109492342
版权
js 同时被 2 个专栏收录
39 篇文章 2 订阅
订阅专栏
Vue
27 篇文章 0 订阅
订阅专栏

常用的UI组件为我们提供了很便捷的树形展示和操作方案，例如ant,element,Iview等Tree组件；
以此为基础，无论是友好的java同学直接给你treeList 还是平级结构下的前端组装数据的处理仍需要使用者自己来动手
为了事半功倍工具函数是不可少的
1.树形数据组装：

   /**
     * @Description:sourceData数据源

     * @Author: ShiWei

     * @Date: 2020-11-04
     */
export const createTree = function (sourceData,id,pid) {
  // 转换成插件需要格式的树结构
  // const id = id
  // const pid = pid
  // 深拷贝
  const data = sourceData.map(item => {
    return Object.assign({}, item)
  })
  const res = []
  const temp = {}
  for (let i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (let k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]].children) {
        temp[data[k][pid]].children = []
      }
      if (!temp[data[k][pid]]._level) {
        temp[data[k][pid]]._level = 1
      }
      data[k]._level = temp[data[k][pid]]._level + 1
      temp[data[k][pid]].children.push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

2.获取节点所有父节点

/**
 * 深度优先遍历树
 * 一个递归方法
 * @params id:当前节点
 * @params data:原始数据
 * @params deptId:当前遍历节点的父级节点id，初始为null(deptId)
 **/
  getFathersById(id, data, prop = 'deptId') {
    var arr = []
    const rev = (data, IDS) => {
      for (var i = 0, length = data.length; i < length; i++) {
        const node = data[i]
        if (node[prop] === IDS) {
          arr.unshift(node[prop])
          return true
        } else {
          if (node.children && node.children.length) {
            if (rev(node.children, IDS)) {
              arr.unshift(node[prop])
              return true
            }
          }
        }
      }
      return false
    }
    rev(data, id)
    return arr
},

3.获取指定节点所有父节点

   tree: [
        {
        "id": "71be0269ef4a4afa8c76b5e1500904b7",
        "appId": "503f49ba244d4f5ab8f235d123772091",
        "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
        "gmtCreate": null,
        "gmtModified": null,
        "deleteStatus": 0,
        "name": "TAN档案管理",
        "editType": "0",
        "classifyType": "项目",
        "sort": null,
        "fileType": null,
        "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
        "contractId": null,
        "ownerId": null,
        "createBy": null,
        "modifiedBy": null,
        "parentId": "0",
        "programId": null,
        "templateid": null,
        "children": [{
          "id": "74b24fd213df44b1a7589e3f88694391",
          "appId": "503f49ba244d4f5ab8f235d123772091",
          "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
          "gmtCreate": null,
          "gmtModified": null,
          "deleteStatus": 0,
          "name": "施工单位",
          "editType": "0",
          "classifyType": "施工单位",
          "sort": 3,
          "fileType": null,
          "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
          "contractId": null,
          "ownerId": null,
          "createBy": null,
          "modifiedBy": null,
          "parentId": "71be0269ef4a4afa8c76b5e1500904b7",
          "programId": null,
          "templateid": null,
          "children": [{
            "id": "b0e3c550761049c09ba35b08a55c4d48",
            "appId": "503f49ba244d4f5ab8f235d123772091",
            "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
            "gmtCreate": null,
            "gmtModified": null,
            "deleteStatus": 0,
            "name": "深圳01施工合同段",
            "editType": "0",
            "classifyType": "施工合同段",
            "sort": 1,
            "fileType": null,
            "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
            "contractId": "bd0ebe78f54e401d88e62f8747a057a1",
            "ownerId": null,
            "createBy": null,
            "modifiedBy": null,
            "parentId": "74b24fd213df44b1a7589e3f88694391",
            "programId": null,
            "templateid": null,
            "children": [{
              "id": "154b6175ccad40f486f0264f404e2c9c",
              "appId": "503f49ba244d4f5ab8f235d123772091",
              "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
              "gmtCreate": null,
              "gmtModified": null,
              "deleteStatus": 0,
              "name": "1",
              "editType": "0",
              "classifyType": "案卷分类",
              "sort": 133,
              "fileType": null,
              "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
              "contractId": null,
              "ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
              "createBy": null,
              "modifiedBy": null,
              "parentId": "b0e3c550761049c09ba35b08a55c4d48",
              "programId": null,
              "templateid": null,
              "children": null,
              "operable": "1"
            }, {
              "id": "58805d3b7d7447199f620eed384f74d0",
              "appId": "503f49ba244d4f5ab8f235d123772091",
              "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
              "gmtCreate": null,
              "gmtModified": null,
              "deleteStatus": 0,
              "name": "新增案卷分类112",
              "editType": "0",
              "classifyType": "案卷分类",
              "sort": 134,
              "fileType": null,
              "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
              "contractId": null,
              "ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
              "createBy": null,
              "modifiedBy": null,
              "parentId": "b0e3c550761049c09ba35b08a55c4d48",
              "programId": null,
              "templateid": null,
              "children": null,
              "operable": "1"
            }, {
              "id": "59b41972221f4aa09d0f34c153db25da",
              "appId": "503f49ba244d4f5ab8f235d123772091",
              "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
              "gmtCreate": null,
              "gmtModified": null,
              "deleteStatus": 0,
              "name": "子节点1",
              "editType": "0",
              "classifyType": "案卷分类",
              "sort": 135,
              "fileType": null,
              "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
              "contractId": null,
              "ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
              "createBy": null,
              "modifiedBy": null,
              "parentId": "b0e3c550761049c09ba35b08a55c4d48",
              "programId": null,
              "templateid": null,
              "children": null,
              "operable": "1"
            }, {
              "id": "fb5b90951f13487ebf096c752546a56e",
              "appId": "503f49ba244d4f5ab8f235d123772091",
              "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
              "gmtCreate": null,
              "gmtModified": null,
              "deleteStatus": 0,
              "name": "文件011",
              "editType": "0",
              "classifyType": "案卷分类",
              "sort": 136,
              "fileType": null,
              "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
              "contractId": null,
              "ownerId": "f8c4a36f9ce44083bf350e5fb16814ba",
              "createBy": null,
              "modifiedBy": null,
              "parentId": "b0e3c550761049c09ba35b08a55c4d48",
              "programId": null,
              "templateid": null,
              "children": null,
              "operable": "1"
            }, {
              "id": "f0ba629b163d426fb6a5a5ab50d9ae6c",
              "appId": "503f49ba244d4f5ab8f235d123772091",
              "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
              "gmtCreate": null,
              "gmtModified": null,
              "deleteStatus": 0,
              "name": "测试导出专用案卷节点",
              "editType": "1",
              "classifyType": "案卷分类",
              "sort": 164,
              "fileType": null,
              "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
              "contractId": null,
              "ownerId": null,
              "createBy": null,
              "modifiedBy": null,
              "parentId": "b0e3c550761049c09ba35b08a55c4d48",
              "programId": null,
              "templateid": null,
              "children": null,
              "operable": "1"
            }, {
              "id": "d962ac1f4d164169a022292872f6951c",
              "appId": "503f49ba244d4f5ab8f235d123772091",
              "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
              "gmtCreate": null,
              "gmtModified": null,
              "deleteStatus": 0,
              "name": "测试案卷移动",
              "editType": "1",
              "classifyType": "案卷分类",
              "sort": 166,
              "fileType": null,
              "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
              "contractId": null,
              "ownerId": null,
              "createBy": null,
              "modifiedBy": null,
              "parentId": "b0e3c550761049c09ba35b08a55c4d48",
              "programId": null,
              "templateid": null,
              "children": null,
              "operable": "1"
            }
            ],
            "operable": "1"
          }, {
            "id": "ca953f2d8b604d1d97b14495363441e4",
            "appId": "503f49ba244d4f5ab8f235d123772091",
            "tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa",
            "gmtCreate": null,
            "gmtModified": null,
            "deleteStatus": 0,
            "name": "深圳02施工合同段",
            "editType": "0",
            "classifyType": "施工合同段",
            "sort": 2,
            "fileType": null,
            "projectId": "d0b033e2b4614a9882fb12bbe45960c5",
            "contractId": "fe465ae6e5444dd684196f127f07dd1d",
            "ownerId": null,
            "createBy": null,
            "modifiedBy": null,
            "parentId": "74b24fd213df44b1a7589e3f88694391",
            "programId": null,
            "templateid": null,
            "children": null,
            "operable": "1"
          }
          ],
          "operable": "1"
        }
        ],
        "operable": null
      }
      ]

  Farthloops（data）
   /**
     * @Description:获取指定节点下下的所有子节点

     * @Author: ShiWei

     * @Date: 2020-11-04
     */
    const targetData = {};
     Farthloops(data, parent) {
      return data.map(({ children, title: value }) => {
        const node = {
          value,
          parent
        }
        targetData[value] = node;
        node.children = Farthloops(children, node);
        return
      })
    }
  //获取数据节点
  getFarthNode(value) {
      let node = [];
      let currentNode = targetData[value];
      node.push(currentNode.value);
      if (currentNode.parent) {
        node = [...getFarthNode(currentNode.parent.value), ...node];
      }
      return node
    }
    //获取父节点
   console.log(const target = getNode('id'))

4.指定节点获取所有子节点


    /**
     * @Description:获取指定节点下下的所有子节点

     * @Author: ShiWei

     * @Date: 2020-11-04
     */
    getChildNode(nodes, item, arr) {
      for (let el of nodes) {
        if (el.parentId === item) {
          arr.push(el.id);
          if (el.children) {
            this.childsNodeDeepWay(el.children, arr);
          }
        } else if (el.children) {
          this.getChildNode(el.children, item, arr);
        }
      }
      return arr;
    },
   childsNodeDeepWay(nodes, arr) {
      if (nodes)
        nodes.forEach((ele) => {
          arr.push(ele.id);
          if (ele.children) {
            this.childsNodeDeepWay(ele.children, arr);
          }
        });
    },
    //调用
      console.log( this.getChildNode(this.tree,this.tree[0].id,[]))

在这里插入图片描述

Eirice
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 关于树的操作 查找所有子节点，找出某一节点的父节点
weixin_40624809的博客
06-17 2433
1. 获取全部子节点（广度优先）VUE代码 // 数据 data: [{ id: 0, label: '0级', children: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9,
sql 树状结构中知道 父节点与孙节点_MySQL 树形结构 根据指定节点 获取其所有父节点序列...
weixin_39639260的博客
12-20 477
背景说明需求：MySQL树形结构， 根据指定的节点，获取其所有父节点序列。问题分析1、可以使用类似Java这种面向对象的语言，对节点集合进行逻辑处理，获取父节点。2、直接自定义MySQL函数getParentNodeList，通过一层while循环，实现对指定节点的所有父子节点进行查询。功能实现1、创建数据表1)表结构截图如下(此处简单建一张表t_tree，id主键自增，uuid表示本节点，pa...
JavaScript中利用二叉树对数组进行排序
这个昵称没有被占用吧的博客
11-12 673
二叉树和二叉搜索树 二叉树中的节点最多只能有两个子节点：一个是左侧子节点，另一个是右侧子节点。 二叉搜索树(BST)是二叉树中的一种，但是它只允许在左侧节点存储比父节点小的值，在右侧几点存储比节点大(或相等)的值。 可以利用BST的这种特性，对数组进行排序： class Node{ constructor(key){ this.key = key; this...
js根据树结构查找某个节点的下面的所有父节点或者子节点
lchmyhua88的博客
05-29 3120
js根据树结构查找某个节点的下面的所有父节点或者子节点
JS 树结构中获取全部的父节点
看陌生的风景的博客
04-30 1756
var treedata = [ { code: "PF", name: "数字化建模", id: "3427f03a-6032-4d0c-aa5b-1fb08279a260", apps: [ { code: "GZTBDM", name: "基础数据", id: "3561a1a5-33a6-4245.
JS树形数据转换
huai42717的博客
03-30 164
【代码】JS树形数据转换。
js遍历树节点下的所有子节点_数据结构 | 二叉查找树
weixin_39710251的博客
12-03 1111
本文根据网上资料和自己学习所得整理而成，思维导图如下，希望对你有用。1 定义 二叉查找树是二叉树中最常用的一种类型，也叫二叉搜索树。它支持快速的查找，插入，删除一个数据。做到这些，依赖于它特殊的结构。二叉查找树的结构是这样的，在树中任意一个节点，其左子树中的每个节点的值，都要小于这个节点的值，而右子树的值都大于这个节点的值。简单来说，就是对任意一个节点，左右子树满足左小右大的特点。二叉查找树2 二...
js实现树形数据转成扁平数据的方法示例
10-15
对于树形数据，将树形结构转换为扁平结构是一种常见的需求，特别是在数据展示、遍历或搜索等场景下。本文将详细介绍如何使用JavaScript实现这一转换。 首先，让我们理解什么是树形数据和扁平数据。树形数据是一种...
mysql查询树形结构子节点_MySQL递归查询所有子节点，树形结构查询
weixin_36245388的博客
01-19 1407
--表结构CREATE TABLE `address` (`id` int(11) NOT NULL AUTO_INCREMENT,`code_value` varchar(32) DEFAULT NULL COMMENT '区域编码',`name` varchar(128) DEFAULT NULL COMMENT '区域名称',`remark` varchar(128) DEFAULT NUL...
js 将线性数据转为树形的示例代码
10-16
"兰桂坊" }, { id: 9, parent_id: 2, name: "东莞市" }, { id: 10, parent_id: 9, name: "长安镇" }, { id: 11, "parent_id...在JavaScript中，有许多库如`lodash`或自定义方法可以帮助处理树形数据的增删改查等操作。
树父节点递归获取树子节点
03-12
java实现树父节点递归获取树子节点 工具类，以后再项目中直接用即可
基于jstree使用JSON数据组装成树
10-19
主要为大家详细介绍了基于jstree使用JSON数据组装成树，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript将扁平的数据转为树形结构的高效率算法
10-15
在JavaScript编程中，将扁平的数据结构转换为树形结构是一项常见的任务，特别是在处理层级关系的数据时，如组织结构、菜单导航或文件系统等。在本文中，我们将深入探讨一种高效的算法，该算法可以将一维数组转换为...
JS遍历树节点下的所有子节点
joan_yb的博客
06-23 2639
JS遍历树节点下的所有子节点
[js] 查找树结构数据中的指定节点，查找指定节点的所有叶子节点，查找整棵树的所有叶子节点, 获取指定节点的所有子孙节点,判断树形结构中的某个节点是否为叶子节点
最新发布
qq_14993591的博客
01-18 2118
【代码】[js] 查找树结构数据中的指定节点，查找指定节点的所有叶子节点，查找整棵树的所有叶子节点。
js 组装树形结构数据
ChuanDD的博客
07-03 790
js 组装树形结构数据，组装树形用户数据，js 组装树形结构，js组装树形结构，js组装树形结构数据
tree通过子节点id获取子节点及父节点id
weixin_38222276的博客
06-25 490
【代码】tree通过子节点id获取子节点及父节点id。
dtree.js 树结构点击父节点异步加载子节点数据
wan小小冰的博客
11-24 4270
由于此次项目开发框架使用layui，里面的树结构自然想到了使用dtree,功能需求是选择省份下的企业，由于企业数据达到上万家，一次性将所有的数据加载出来会造成页面卡顿，由此想到先加载行政区划再根据点击事件获取 ...
JS树形结构遍历获取目标对象父级组成名称
pixle的博客
08-06 936
JS树形遍历获取目标对象父级组成名称
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值