Web中树形数据(层级关系数据)的实现—以行政区树为例(二)

最新推荐文章于 2024-09-18 22:07:48 发布

原创

最新推荐文章于 2024-09-18 22:07:48 发布 · 7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#树 #层级数据 #JavaScript

本文介绍了如何在JavaScript中构建树形数据结构，特别是针对行政区的层级关系。通过生成适合zTree或Ext Tree的数据格式，使得在前端展示行政区树变得更加简单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面已经实现了在Java中生成行政区树(参考博客)，其实也可以在JavaScript中生成树，由于JavaScript是弱类型，从某种程度上来说，JavaScript比Java更容易构建树。在JavaScript中只要生成zTree或者Ext Tree支持的数据格式即可。

/**
 * 构建树，如果传入的参数有多个跟节点，则返回数组，如果只有一个根节点，则返回根节点。
 * 
 * @param   nodes  {Array}  树节点数组，节点格式{id: 1, parentId: null, text: '', children: [], leaf: true}
 * @return  返回树的根节点
 */
function buildTree(nodes){
	//如果传入的参数不是数组或者是空数组，则退出
	if(Object.prototype.toString.call(nodes) !== '[object Array]' || nodes.length === 0){
		return null;
	}
	
	var i, j, child, parent, hasParent,
	
		//节点数量
		len = nodes.length,
	
		//顶级节点数组，如果只有一个顶级节点，该数组只有一个元素，并且该顶级节点是根节点。
		tops = [];
	
	//如果只有一个节点，则返回该节点
	if(len === 1){
		return nodes[0];
	}
	
	//进行两轮