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

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>

你可能感兴趣的:(树形图【处理树形结构数据】)