1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/javascript">
  9.  
  10. 			function translateDataToTree(data) {
  11. 				  let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)
  12. 				  let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)
  13. 				  let translator = (parents, children) => {
  14. 					parents.forEach((parent) => {
  15. 					  children.forEach((current, index) => {
  16. 						if (current.parentId === parent.id) {
  17. 						  let temp = JSON.parse(JSON.stringify(children))
  18. 						  temp.splice(index, 1)
  19. 						  translator([current], temp)
  20. 						  typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
  21. 						}
  22. 					  }
  23. 					  )
  24. 					}
  25. 					)
  26. 				  }
  27.  
  28. 				  translator(parents, children)
  29.  
  30. 				  return parents
  31. 				}
  32. 			/**
  33.  * 该方法用于将有父子关系的数组转换成树形结构的数组
  34.  * 接收一个具有父子关系的数组作为参数
  35.  * 返回一个树形结构的数组
  36.  */
  37. 			function translateDataToTree(data) {
  38. 			  //没有父节点的数据
  39. 			  let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)
  40.  
  41. 			  //有父节点的数据
  42. 			  let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)
  43.  
  44. 			  //定义转换方法的具体实现
  45. 			  let translator = (parents, children) => {
  46. 				//遍历父节点数据
  47. 				parents.forEach((parent) => {
  48. 				  //遍历子节点数据
  49. 				  children.forEach((current, index) => {
  50. 					//此时找到父节点对应的一个子节点
  51. 					if (current.parentId === parent.id) {
  52. 					  //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
  53. 					  let temp = JSON.parse(JSON.stringify(children))
  54. 					  //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
  55. 					  temp.splice(index, 1)
  56. 					  //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
  57. 					  translator([current], temp)
  58. 					  //把找到子节点放入父节点的children属性中
  59. 					  typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
  60. 					}
  61. 				  }
  62. 				  )
  63. 				}
  64. 				)
  65. 			  }
  66.  
  67. 			  //调用转换方法
  68. 			  translator(parents, children)
  69.  
  70. 			  //返回最终的结果
  71. 			  return parents
  72. 			}
  73. 		</script>
  74. 	</body>
  75. </html>
  76.  
  77. ---------------------------------------------------------------
  1. /*转化函数*/
  2. function(data, attributes) {
  3.     let resData = data;
  4.     let tree = [];
  5.     for(let i = 0; i < resData.length; i++) {
  6.         if(resData[i][attributes.parentId] === attributes.rootId) {
  7.             let obj = {
  8.                 id: resData[i][attributes.id],
  9.                 title: resData[i][attributes.name],
  10.                 children: []
  11.             };
  12.             tree.push(obj);
  13.             resData.splice(i, 1);
  14.             i--;
  15.         }
  16.     }
  17.     run(tree);
  18.  
  19.     function run(chiArr) {
  20.         if(resData.length !== 0) {
  21.             for(let i = 0; i < chiArr.length; i++) {
  22.                 for(let j = 0; j < resData.length; j++) {
  23.                     if(chiArr[i].id == resData[j][attributes.parentId]) {
  24.                         let obj = {
  25.                             id: resData[j][attributes.id],
  26.                             title: resData[j][attributes.name],
  27.                             children: []
  28.                         };
  29.                         chiArr[i].children.push(obj);
  30.                         resData.splice(j, 1);
  31.                         j--;
  32.                     }
  33.                 }
  34.                 run(chiArr[i].children);
  35.             }
  36.         }
  37.     }
  38.  
  39.     return tree;
  40.  
  41. }
  42. 1
  43. var data=[{id:1,parentId:0,name:"测试1"},
  44. 1
  45. {id:2,parentId:1,name:"测试2"}]
  46. 1
  47. 2
  48. 3
  49. 4
  50. 5
  51. <em id="__mceDel"><br>let attributes = {    //定义数据属性名称
  52. id: 'id',
  53. parentId: 'parentId',
  54. name: 'groupName',<br>rootId: 0
  55. }<br>/*调用*/<br>formatTreeData(data,attributes);<br></em>

　　

　　

js 一维数组转成tree 对象的更多相关文章

  1. 基于List数组转换成tree对象

    package com.shjysoft.yunxi.sync.webservice; import java.util.ArrayList;import java.util.Date;import ...

  2. js将一个具有相同键值对的一维数组转换成二维数组

    这两天,一个前端朋友在面试的笔试过程中遇到了一道类似于"用js实现将一个具有相同code值的一维数组转换成相同code值在一起的二维数组"的题目.他面试过后,把这个问题抛给了我,问 ...

  3. JS一维数组、多维数组和对象的混合使用

    转载地址:http://blog.csdn.net/wangyuchun_799/article/details/38460515 引言 这篇文章的主要目的是讲解JavaScript数组和对象的混合使 ...

  4. Java第十二次作业：什么是一维数组？什么是对象数组？吃金币游戏2.0版 新增炸弹功能 新增游戏倒计时功能 新增胜利失败检测功能 使用如鹏游戏引擎制作窗体 一维数组设置金币

    什么是数组? 数组的定义:是用统一的名字代表这批数据,用序号来区分各个数据.数组是无序的数据元素按有序的下标组成的集合,分配固定空间大小的一种容器. 如何理解:其实就是一个同时放很多数据的变量. a= ...

  5. 【php】实现多个一维数组转换成二维循环数组

    1.目的:将下面类型数组转换成模板循环打印二维数组 数组库一维数组: 模板要求循环二维数组: 2.代码: header("Content-type: text/html; charset=u ...

  6. C# byte数组转成Bitmap对象

    方法一: /// <summary> /// 将数组转换成彩色图片 /// </summary> /// <param name="rawValues" ...

  7. html标签内部简单加js 一维数组求最大值 最小值两个值位置和数字金字塔图形

     html标签内部,简单加js <a href=""></a><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  8. PHP多个一维数组合并成二维数组的简易方法

    当我们需要进行数组遍历数据的时候,需要将多个一维数组进行二维的转换,方法很简单.如下: <?php $a= array('张三','李四','王五'); $b= array ('23','24' ...

  9. js一维数组转换为二维数组

    function arrTrans(num, arr) { // 一维数组转换为二维数组 const iconsArr = []; // 声明数组 arr.forEach((item, index) ...

随机推荐

  1. 解决SublimeText 3无法安装Package Control的问题

    "GOOD 解决SublimeText 3无法安装Package Control的问题 2019年4月6日Sublime Text3更新至3.2.1(BUILD 3207)版本,Sublim ...

  2. [題解]hdu_6412公共子序列

    https://blog.csdn.net/nka_kun/article/details/81902421 #include<bits/stdc++.h> #define ll long ...

  3. Nginx 开启目录浏览功能配置

    在server节点下添加 server { listen ; server_name default; #index index.php; # 目录浏览功能 autoindex on; # 显示文件大 ...

  4. AJPFX关于Collection接口的总结

    ###15Collection-List-ArrayList/LinkedList/*  * Collection接口中的方法* A:添加功能*                 boolean add ...

  5. Oracle查询排序asc/desc 多列 order by

    查询结果的排序 显示EMP表中不同的部门编号. 如果要在查询的同时排序显示结果,可以使用如下的语句: SELECT 字段列表 FROM 表名 WHERE 条件 ORDER BY 字段名1 [ASC|D ...

  6. Vue.js - day7

    使用mui的tab-top-webview-main完成分类滑动栏 兼容问题 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题,导致tab栏失效, ...

  7. arcgis jsapi接口入门系列（6）：样式

    symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...

  8. 最详细的github快速入门教程

    一:下载github 二:安装GitHub 下载之后点击 进行安装过程,安装之后桌面上会有两个图标,如下图 三:新建项目 GitHub是图形界面模式,Git Shell是命令行模式,在Windows系 ...

  9. windows命令行快速启动软件

    windows桌面上太多的应用程序快捷方式很影响美观,于是寻思使用类似Linux系统中命令行的方式来启动软件. 只需要3步: 1.建立一个目录A,用来存放快捷方式.比如,建立D:\path.并复制快捷 ...

  10. MySQL流程控制和存储过程介绍

    /*定义变量方式1:set @变量名=值;方式2:select 值 into @变量名;方式3:declare 变量名 类型(字符串类型加范围) default 值; in参数 入参的值会仅在存储过程 ...