js递归生成树结构数据

最新推荐文章于 2023-06-10 11:33:41 发布
最新推荐文章于 2023-06-10 11:33:41 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： 递归 前端 文章标签： 树结构 js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caiye_007/article/details/118334346
版权

准备源数据如下

{
    "msg": "操作成功", 
    "code": 200, 
    "data": [
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:21", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 100, 
            "parentId": 0, 
            "ancestors": "0", 
            "deptName": "中旭科技", 
            "orderNum": "0", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:21", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 101, 
            "parentId": 100, 
            "ancestors": "0,100", 
            "deptName": "深圳总公司", 
            "orderNum": "1", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:21", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 102, 
            "parentId": 100, 
            "ancestors": "0,100", 
            "deptName": "长沙分公司", 
            "orderNum": "2", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:21", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 103, 
            "parentId": 101, 
            "ancestors": "0,100,101", 
            "deptName": "研发部门", 
            "orderNum": "1", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:21", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 104, 
            "parentId": 101, 
            "ancestors": "0,100,101", 
            "deptName": "市场部门", 
            "orderNum": "2", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:22", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 105, 
            "parentId": 101, 
            "ancestors": "0,100,101", 
            "deptName": "深圳部门", 
            "orderNum": "3", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:22", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 106, 
            "parentId": 101, 
            "ancestors": "0,100,101", 
            "deptName": "财务部门", 
            "orderNum": "4", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:22", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 107, 
            "parentId": 101, 
            "ancestors": "0,100,101", 
            "deptName": "运维部门", 
            "orderNum": "5", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:22", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 108, 
            "parentId": 102, 
            "ancestors": "0,100,102", 
            "deptName": "市场部门", 
            "orderNum": "1", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }, 
        {
            "searchValue": null, 
            "createBy": "admin", 
            "createTime": "2021-05-27 14:08:22", 
            "updateBy": null, 
            "updateTime": null, 
            "remark": null, 
            "params": { }, 
            "deptId": 109, 
            "parentId": 102, 
            "ancestors": "0,100,102", 
            "deptName": "财务部门", 
            "orderNum": "2", 
            "leader": "中旭", 
            "phone": "15888888888", 
            "email": "ry@qq.com", 
            "status": "0", 
            "delFlag": "0", 
            "parentName": null, 
            "children": [ ]
        }
    ]
}

构建树结构数据方法如下

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }

  return tree;
}

调用如下

      listDept().then(response => { //从后台获取到数据
        this.deptList = this.handleTree(response.data, "deptId");
      });

构建之后数据结构如下

[
    {
        "searchValue": null, 
        "createBy": "admin", 
        "createTime": "2021-05-27 14:08:21", 
        "updateBy": null, 
        "updateTime": null, 
        "remark": null, 
        "params": { }, 
        "deptId": 100, 
        "parentId": 0, 
        "ancestors": "0", 
        "deptName": "中旭科技", 
        "orderNum": "0", 
        "leader": "中旭", 
        "phone": "15888888888", 
        "email": "ry@qq.com", 
        "status": "0", 
        "delFlag": "0", 
        "parentName": null, 
        "children": [
            {
                "searchValue": null, 
                "createBy": "admin", 
                "createTime": "2021-05-27 14:08:21", 
                "updateBy": null, 
                "updateTime": null, 
                "remark": null, 
                "params": { }, 
                "deptId": 101, 
                "parentId": 100, 
                "ancestors": "0,100", 
                "deptName": "深圳总公司", 
                "orderNum": "1", 
                "leader": "中旭", 
                "phone": "15888888888", 
                "email": "ry@qq.com", 
                "status": "0", 
                "delFlag": "0", 
                "parentName": null, 
                "children": [
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:21", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 103, 
                        "parentId": 101, 
                        "ancestors": "0,100,101", 
                        "deptName": "研发部门", 
                        "orderNum": "1", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }, 
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:21", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 104, 
                        "parentId": 101, 
                        "ancestors": "0,100,101", 
                        "deptName": "市场部门", 
                        "orderNum": "2", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }, 
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:22", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 105, 
                        "parentId": 101, 
                        "ancestors": "0,100,101", 
                        "deptName": "深圳部门", 
                        "orderNum": "3", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }, 
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:22", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 106, 
                        "parentId": 101, 
                        "ancestors": "0,100,101", 
                        "deptName": "财务部门", 
                        "orderNum": "4", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }, 
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:22", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 107, 
                        "parentId": 101, 
                        "ancestors": "0,100,101", 
                        "deptName": "运维部门", 
                        "orderNum": "5", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }
                ]
            }, 
            {
                "searchValue": null, 
                "createBy": "admin", 
                "createTime": "2021-05-27 14:08:21", 
                "updateBy": null, 
                "updateTime": null, 
                "remark": null, 
                "params": { }, 
                "deptId": 102, 
                "parentId": 100, 
                "ancestors": "0,100", 
                "deptName": "长沙分公司", 
                "orderNum": "2", 
                "leader": "中旭", 
                "phone": "15888888888", 
                "email": "ry@qq.com", 
                "status": "0", 
                "delFlag": "0", 
                "parentName": null, 
                "children": [
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:22", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 108, 
                        "parentId": 102, 
                        "ancestors": "0,100,102", 
                        "deptName": "市场部门", 
                        "orderNum": "1", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }, 
                    {
                        "searchValue": null, 
                        "createBy": "admin", 
                        "createTime": "2021-05-27 14:08:22", 
                        "updateBy": null, 
                        "updateTime": null, 
                        "remark": null, 
                        "params": { }, 
                        "deptId": 109, 
                        "parentId": 102, 
                        "ancestors": "0,100,102", 
                        "deptName": "财务部门", 
                        "orderNum": "2", 
                        "leader": "中旭", 
                        "phone": "15888888888", 
                        "email": "ry@qq.com", 
                        "status": "0", 
                        "delFlag": "0", 
                        "parentName": null
                    }
                ]
            }
        ]
    }
]
Cai_007
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS生成树型结构
02-09
非常不错的js代码 简单 易用 而且美观 如果你还对js生成像windows文件夹结构的树型结构苦恼的话 就来下载吧
javascript如何用递归写一个简单的树形结构示例
12-12
现在有一个数据，需要你渲染出对应的列表出来： var data = [ {"id":1}, {"id":2}, {"id":3}, {"id":4}, ]; var str="<ul>"; data.forEach(function(v,i){ str+="<li><span>"+v.id+"</span></li>" }) str=...
js递归操作树形结构
weixin_53990507的博客
12-13 6714
js递归操作树形结构（不限制层级）
js递归生成树形结构
林海雪猿的代码空间
11-10 1620
实现一个人员根据所在部门分类的el-cascader，使用人员表、部门表中数据，人员表中存有所在部门id字段，部门表中存有上级部门的id字段，人员为叶子节点，无子节点的部门不进行显示。 先遍历两个表，组合数据，对叶子节点进行标记。 that.personList.forEach(function(obj) { that.personCascaderFront.push({ value: obj.id, .
js通过递归实现树形数据操作
qq_44552416的博客
05-25 7257
一、处理复杂数据结构转成树形数据操作 案列一如下： 需求分析 1，根据fatherTreeCode判断是不是父级，为空是父级，然后处理成树形层级关系。 2，完成树形结构后再树形数据里面添加对应的key和value值进行显示。 原数据 const treeData = [ { capList: [], fatherTreeCode: "", isLeaf: "0", showSeqno: "1", treeCode: "TRE0rv",
js递归生成树形结构、
u013675978的博客
05-17 1万+
后端获取json数组，成树结构，下面直接上代码。 首先集合的数据格式是这样的。 数据： [ { "id": 1, "name": "11111111楼", "parentId": 0 }, { "id": 2, "name": "2楼", "parentId": 0 ...
JavaScript递归算法生成树形菜单
10-19
JavaScript递归算法生成树形菜单是一种常见的编程技巧，主要用于处理具有层级关系的数据，例如网站的导航菜单、组织结构等。在本示例中，我们看到如何利用递归方法将一个对象数组转换为HTML的树形结构，从而在网页上...
使用递归和dom遍历dom树形结构
09-28
在DOM树的情况下，递归非常适合用来遍历整个树结构，因为它可以深入到树的每一层，确保每个节点都被访问。 #### Java实现示例 以下是一个使用递归和DOM来遍历XML文档的Java代码示例： ```java package ...
JS 树形递归实例代码
10-29
在处理树形结构数据时，递归是一种常见的编程技术。递归允许我们在遇到子节点时重复调用相同函数，直至处理到树形结构的末端节点。下面将详细解释给定文件中的JS树形递归实例代码，从递归的基本概念到具体的代码实现...
js学习记录之javaScript 递归生成树形(tree)结构
最新发布
Zhangrui20的博客
06-10 1246
注意：element级联选择器所需原始数据格式为。本篇文章起源于在使用element级联选择器（4.在调用接口获取原始数据的地方，调用递归方法。1.在body中引入级联选择器样式。2.在data中定义数组。
一个js无极递归树实现
06-25
解决无极表数据整理
JavaScript使用递归制作树形结构
AQUROEAN
06-17 398
JavaScript（tree.js）： var data = [{ name: 'IT互联网', child: [{ name: '编辑语言', child: [{ name: 'java' }, { name: 'c#/.net' }, { name: 'python' }, { name: '前端开发', child: [{ name: 'jq' },
Javascript js递归函数 树结构
weixin_34362991的博客
10-09 378
近期项目用到大量的树结构，比如目录树、文章标记动态生成树结构，实现的过程是基于vue的框架，结合vue数据驱动应用递归函数实现数据结构的增删改查 一切思绪的来源，结合vue官方提供的树形图实例，可以轻松实现自定义开源树结构，github上优秀的开源插件我都看过，都是基于树形结构实现的 vue树形视图 <item ref="tr...
js快捷使用递归构建树
A_9888的博客
12-21 923
一、方法封装导出 export const makeElementTree = (params) => { // console.log(params); // 解构取出参数 const { pid, list, pidFiled, labelFiled, valueFiled } = params // 构建一个内部函数，用于实现递归 const makeTree = (pid, arr) => { const res =
js树结构数据的递归操作
热门推荐
winne雪
09-07 2万+
1、获取树中的所有祖先节点名称 2、根据过滤条件筛选出需要留下节点的树结构数据 3、获取树中叶子节点的总个数 4、重新组合树结构中的数据 5、根据id和pid把json结构 转 树状结构
JS递归简单理解及利用递归生成树结构
weixin_44416446的博客
11-25 1736
//递归方法论 //递归则是自己调用自己 //！！！化归 //----------函数本身要做一件事，`在这里插入代码片`调用一个函数即是要做一件事 //----------自己调用自己，要做一件事情，就要先做XXX //------------如果要做某件事情就是将其转换为已经解决的问题 //1.假设已经完成了递归函数 // function func(){ // //...
JavaScript 生成树结构
NRGAGA的专栏
03-16 1750
http://www.admin10000.com/document/3778.html http://webrevisions.com/jquery-plugins/8-best-jquery-tree-view-plugin/#.Vui8W_R71j_ http://www.oschina.net/project/tag/283/jquery-tree?lang=0&o
javaScript 递归生成树形(tree)结构
Schema
01-20 8698
原始数据 const temp = [ { 'id': 1, 'name': '1级1', 'parentId': 0 }, { 'id': 2, 'name': '2级1', 'parentId': 0 }, { 'id': 4, 'name': '1级1-1', .
在js中如何使用递归函数生成树状数据
zyl1229ngm的博客
05-21 632
递归函数的简单使用，在项目中有时候后端给的数据并达不到我们使用的要求，就需要我们自己来简单加工一下。
js递归生成树形结构数据
06-10
好的，以下是一个简单的示例代码，用于将扁平的数据转换为树形结构数据： ```javascript function generateTreeData(flatData, parentId = null) { const treeData = []; flatData.forEach(item => { if (item....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值