前面已經實現了在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);