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

前面已经实现了在Java中生成行政区树(參考博客)，事实上也能够在JavaScript中生成树。因为JavaScript是弱类型。从某种程度上来说。JavaScript比Java更easy构建树。在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];
	}
	
	//进行两轮遍历。构造树的父节点和子节点
	for(i = 0; i < len; i++){
		child = nodes[i];
		hasParent = false;
		
		//假设child没有父节点，则child是顶级节点
		if(!child.parentId){
			tops.push(child);
			continue;
		}
		
		for(j = 0; j < len; j++){
			parent = nodes[j];
			
			if(parent.id === child.parentId){
				//加入子节点
				if(!parent.children){
					parent.children = [];
				}
				parent.children.push(child);
				parent.leaf = false;				
				hasParent = true;
				break;
			}
		}
		
		//假设child没有父节点，则child是顶级节点
		if(!hasParent){
			tops.push(child);
		}
	}
	
	//假设仅仅有一个顶级节点，则返回该节点。否则返回数组。
	return tops.length === 1 ? tops[0] : tops;
}

通过JavaScript生成树的完整代码例如以下

//行政区数据
var data = [
	{"code": 420000, "name": "湖北省", "parentCode": 0},
	{"code": 420100, "name": "武汉市", "parentCode": 420000},
	{"code": 420101, "name": "市辖区", "parentCode": 420100},
	{"code": 420102, "name": "江岸区", "parentCode": 420100},
	{"code": 420103, "name": "江汉区", "parentCode": 420100},
	{"code": 420104, "name": "硚口区", "parentCode": 420100},
	{"code": 420105, "name": "汉阳区", "parentCode": 420100},
	{"code": 421000, "name": "荆州市", "parentCode": 420000},
	{"code": 421001, "name": "市辖区", "parentCode": 421000},
	{"code": 421002, "name": "沙市区", "parentCode": 421000},
	{"code": 421003, "name": "荆州区", "parentCode": 421000},
	{"code": 430000, "name": "湖南省", "parentCode": 0},
	{"code": 430100, "name": "长沙市", "parentCode": 430000},
	{"code": 430101, "name": "市辖区", "parentCode": 430100},
	{"code": 430102, "name": "芙蓉区", "parentCode": 430100},
	{"code": 430103, "name": "天心区", "parentCode": 430100},
	{"code": 430104, "name": "岳麓区", "parentCode": 430100}
];

//把行政区数据转成树节点，以便构建树
var i, nodes = [];
for(i = 0; i < data.length; i++){
	nodes.push({
		id: data[i].code,
		parentId: data[i].parentCode,
		text: data[i].name,
		nodeData: data[i]
	});
}

//创建行政区树
var root = buildTree(nodes);