树形结构，根据父子ID生成树形节点

来源：互联网发布：淘宝怎么提高自然流量编辑：程序博客网时间：2024/05/21 06:14

说明：因项目需要，根据父子ID建树的树形控件，要生成对应的树形节点。

原始数据

var treejson = [{"id":"1", "pid":"", "name":"node1", "node":""},{"id":"2", "pid":"1", "name":"node2", "node":""},{"id":"3", "pid":"1", "name":"node3", "node":""},{"id":"4", "pid":"1", "name":"node4", "node":""},{"id":"5", "pid":"2", "name":"node5", "node":""},{"id":"6", "pid":"2", "name":"node6", "node":""},{"id":"7", "pid":"2", "name":"node7", "node":""},{"id":"8", "pid":"7", "name":"node8", "node":""},{"id":"9", "pid":"7", "name":"node9", "node":""},{"id":"10", "pid":"7", "name":"node10", "node":""},{"id":"11", "pid":"10", "name":"node11", "node":""},{"id":"12", "pid":"10", "name":"node12", "node":""},{"id":"13", "pid":"10", "name":"node13", "node":""},{"id":"14", "pid":"1", "name":"node14", "node":""},{"id":"15", "pid":"2", "name":"node15", "node":""},{"id":"16", "pid":"10", "name":"node16", "node":""}];

如图树形结构：

格式化结束后数据

var formatjson = [{"id":"1","pid":"","name":"node1","node":"001"},{"id":"2","pid":"1","name":"node2","node":"001001"},{"id":"5","pid":"2","name":"node5","node":"001001001"},{"id":"6","pid":"2","name":"node6","node":"001001002"},{"id":"7","pid":"2","name":"node7","node":"001001003"},{"id":"8","pid":"7","name":"node8","node":"001001003001"},{"id":"9","pid":"7","name":"node9","node":"001001003002"},{"id":"10","pid":"7","name":"node10","node":"001001003003"},{"id":"11","pid":"10","name":"node11","node":"001001003003001"},{"id":"12","pid":"10","name":"node12","node":"001001003003002"},{"id":"13","pid":"10","name":"node13","node":"001001003003003"},{"id":"16","pid":"10","name":"node16","node":"001001003003004"},{"id":"15","pid":"2","name":"node15","node":"001001004"},{"id":"3","pid":"1","name":"node3","node":"001002"},{"id":"4","pid":"1","name":"node4","node":"001003"},{"id":"14","pid":"1","name":"node14","node":"001004"}];

如图：

详细代码清单如下：

<span style="font-family: Arial, Helvetica, sans-serif;"></span>

var treejson = [{"id":"1", "pid":"", "name":"node1", "node":""},{"id":"2", "pid":"1", "name":"node2", "node":""},{"id":"3", "pid":"1", "name":"node3", "node":""},{"id":"4", "pid":"1", "name":"node4", "node":""},{"id":"5", "pid":"2", "name":"node5", "node":""},{"id":"6", "pid":"2", "name":"node6", "node":""},{"id":"7", "pid":"2", "name":"node7", "node":""},{"id":"8", "pid":"7", "name":"node8", "node":""},{"id":"9", "pid":"7", "name":"node9", "node":""},{"id":"10", "pid":"7", "name":"node10", "node":""},{"id":"11", "pid":"10", "name":"node11", "node":""},{"id":"12", "pid":"10", "name":"node12", "node":""},{"id":"13", "pid":"10", "name":"node13", "node":""},{"id":"14", "pid":"1", "name":"node14", "node":""},{"id":"15", "pid":"2", "name":"node15", "node":""},{"id":"16", "pid":"10", "name":"node16", "node":""}];//格式化数据，建立多叉树function formatTreeData(treejson){if(!treejson)return;var formatTreeJson = {};for(var i = 0; i < treejson.length; i++){if(formatTreeJson[treejson[i].pid]){var x = formatTreeJson[treejson[i].pid].i * 1 + 1;formatTreeJson[treejson[i].pid].i = x;//node数以三位递增，不足补0treejson[i].node = x*1 < 10 ? ("00" + x):( x*1 > 100 ? x : ("0" + x));formatTreeJson[treejson[i].pid].child.push(treejson[i]);}else{formatTreeJson[treejson[i].pid] = {};formatTreeJson[treejson[i].pid].i = 1;formatTreeJson[treejson[i].pid].child = [];treejson[i].node = "001";formatTreeJson[treejson[i].pid].child.push(treejson[i]);}}return formatTreeJson;}var formatJson = null;function generateNode(){formatJson = formatTreeData(treejson);var nodeArr = [];node(formatJson[""], "", nodeArr);// 其中nodeArr就是生产后的数据console.log(JSON.stringify(nodeArr));}function node(json, pnode, arr){if(!json) return;for(var i = 0, len = json.child.length; i < len; i++){json.child[i].node = pnode + json.child[i].node;arr.push(json.child[i]);2015-4-9node(formatJson[json.child[i].id], json.child[i].node, arr);}}

执行generateNode()得到结果。

0 0