js根据json数据，递归拼接htm代码有关问题

js根据json数据，递归拼接htm代码问题!
数据结构如下：

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"}  ]

，pID如果等于id，那么前者就是后者的子节点；
我想要利用这些数据的结构拼接成如下的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>

，每个节点都要不确定的子孙节点，各位哥哥，怎么用js实现？

[解决办法]
修正一下，这样效率高点，省得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); 

 

查看更多 下一篇