js动态生成树形结构

传入一组json数据，[{id,pid,name},{id,pid,name},{id,pid,name}...],标明了当前id和父id，如何通过这组数据生成无线层级的树形结构？

js实现：

原理：

1.通过2层循环，选出同父id下的node放入同一个数组。

  效果如下。

arr [           [a,b,c,d]          ,[e,f,g,h]          ,[i,j,k,l,m]   ]

             父id是id2         父id是id1            父id是id3

2.拿到顶层id，然后从arr[id]开始递归遍历即可。

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[i].name;
            html+=this.getDom(this.groups[a[i].id]);
             html+='</li>\n';
          };
          html+='</ul>\n';
          return html;
      }

生成的dom结构如下所示。

<ul>
    <li>
            ...名字...
        <ul>
            <li>
                    ...名字...
                    <ul>
                        ...
                    </ul>
            </li>
        </ul>
    </li>
</ul>