js根据json数据，递归拼接htm代码有关问题
日期：2014-05-16 浏览次数：20413 次
js根据json数据，递归拼接htm代码问题!
数据结构如下：
我想要利用这些数据的结构拼接成如下的html字符串：
------解决方案--------------------
修正一下，这样效率高点，省得N次去遍历原节点数组，先一次遍历将其归类好，然后直接调用就可以了
数据结构如下：
- JScript code
var zNodes=[
{id:1,pId:0;name:"A"},
{id:11,pId:1;name:"A1"},
{id:12,pId:1;name:"A2"},
{id:13,pId:1;name:"A3"}，
{id:2,pId:0;name:"B"},
{id:21,pId:2;name:"B1"},
{id:22,pId:2;name:"B2"},
{id:23,pId:2;name:"B3"},
{id:3,pId:0;name:"C"},
{id:31,pId:3;name:"C1"},
{id:32,pId:3;name:"C2"},
{id:33,pId:3;name:"C3"}
]
我想要利用这些数据的结构拼接成如下的html字符串：
- HTML code
<ul> <li><a href="#">A</a> <ul> <li><a href="#">A</a></li> <li><a href="#">A</a></li> <li><a href="#">A</a></li> </ul> </li> <li><a href="#">B</a> <ul> <li><a href="#">B</a></li> <li><a href="#">B</a></li> <li><a href="#">B</a></li> </ul> </li> <li><a href="#">C</a> <ul> <li><a href="#">C</a></li> <li><a href="#">C</a></li> <li><a href="#">C</a></li> </ul> </li> </ul>
------解决方案--------------------
修正一下，这样效率高点，省得N次去遍历原节点数组，先一次遍历将其归类好，然后直接调用就可以了
- JScript code
var zNodes=[
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
{id:22,pId:2,name:"B2"},
{id:23,pId:2,name:"B3"},
{id:3,pId:0,name:"C"},
{id:31,pId:3,name:"C1"},
{id:32,pId:3,name:"C2"},
{id:33,pId:3,name:"C3"},
{id:34,pId:31,name:"x"},
{id:35,pId:31,name:"y"},
{id:36,pId:31,name:"z"}
];
function treeMenu(a){
this.tree=a||[];
this.groups={};
};
treeMenu.prototype={
init:function(pid){
this.group();
return this.getDom(this.groups[pid]);
},
group:function(){
for(var i=0;i<this.tree.length;i++){
if(this.groups[this.tree[i].pId]){
this.groups[this.tree[i].pId].push(this.tree[i]);
}else{
this.groups[this.tree[i].pId]=[];
this.groups[this.tree[i].pId].push(this.tree[i]);
}
}
},
getDom:function(a){
if(!a){return ''}
var html='\n<ul>\n';
for(var i=0;i<a.length;i++){
html+='<li><a href="#">'+a[i].name+'</a>';
html+=this.getDom(this.groups[a[i].id]);
html+='</li>\n';
};
html+='</ul>\n';
return html;
}
};
var html=new treeMenu(zNodes).init(0);
alert(html);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
