首页 > 其他分享> > 树形图【处理树形结构数据】

树形图【处理树形结构数据】

2020-01-16 16:40:21 作者：互联网

1. 树形图

树形图.html

<html>

<head>
    
</head>
<body>
	<script>
		var data = [
			 {"id":2,"name":"第一级1","pid":0},
			 {"id":3,"name":"第二级1","pid":2},
			 {"id":5,"name":"第三级1","pid":4},
			 {"id":100,"name":"第三级2","pid":3},
			 {"id":6,"name":"第三级2","pid":3},
			 {"id":601,"name":"第三级2","pid":6},
			 {"id":602,"name":"第三级2","pid":6},
			 {"id":603,"name":"第三级2","pid":6}
			];
			console.log(arrayToJson(data));
		 function arrayToJson(treeArray){
		  var r = [];
		  var tmpMap ={};
		 
		  for (var i=0, l=treeArray.length; i<l; i++) {
		   // 以每条数据的id作为obj的key值，数据作为value值存入到一个临时对象里面
		   tmpMap[treeArray[i]["id"]]= treeArray[i]; 
		  } 
		  console.log(tmpMap);

		  for (i=0, l=treeArray.length; i<l; i++) {
		   var key=tmpMap[treeArray[i]["pid"]]; 
		   //判断是否有id的值  与  pid的值 相同，key存在时，两者相同，此时对应的id有子元素。
			
		   //循环每一条数据的pid，假如这个临时对象有这个key值，就代表这个key对应的数据有children，需要Push进去
		   if (key) {
			if (!key["children"]){
			  key["children"] = [];  //第一次
			  key["children"].push(treeArray[i]);
			}else{
			 key["children"].push(treeArray[i]);
			}    
		   } else {
			//如果没有这个Key值，那就代表没有父级,直接放在最外层
			r.push(treeArray[i]);
		   }
		  }
		  return r
		  }
	</script>
</body>
</html>

qq_26144233 发布了3 篇原创文章 · 获赞 1 · 访问量 57 私信关注

标签：第三级,name,处理,pid,树形图,树形,var,id
来源： https://blog.csdn.net/qq_26144233/article/details/104006716