前面已经实现了在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);