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){ reutrn nodes[0]; } //进行两轮遍历，构造树的父节点和子节点 for(i = 0; i < len; i++){ child = nodes[i]; hasParent = false; //如果child没有父节点，则child是顶级节点 if(!child.parentId){ tops.add(child); continue; } for(j = 0; j < len; j++){ parent = nodes[j]; if(parent.id === child.parentId){ //添加子节点 parent.children.push(child); parent.leaf = false; hasParent = true; break; } } //如果child没有父节点，则child是顶级节点 if(!hasParent){ tops.add(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);

企业建站2800元起，携手武汉肥猫科技，做一个有见地的颜值派！更多优惠请戳：光谷网站建设 http://www.ggwzjs.com.cn