Web中樹形數據(層級關係數據)的實現—以行政區樹爲例(二)

前面已經實現了在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];
	}
	
	//進行兩輪遍歷，構造樹的父節點和子節點
	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);