js中实现无限层级的树形结构（类似递归）
Posted 有深度
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中实现无限层级的树形结构（类似递归）相关的知识，希望对你有一定的参考价值。
这个是后台管理的动态创建的菜单，比较难，不过，仔细揣摩还是比较简单的，所以，直接上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="div"></div> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var zNodes=[ {code:0,pId:-1,name:"Aaaa"}, {code:1,pId:0,name:"主页"}, {code:11,pId:1,name:"A1"}, {code:111,pId:11,name:"A11"}, {code:12,pId:1,name:"A2"}, {code:13,pId:1,name:"A3"}, {code:2,pId:0,name:"文章管理"}, {code:21,pId:2,name:"用户管理"}, {code:22,pId:2,name:"角色管理"}, {code:23,pId:2,name:"权限管理"}, {code:3,pId:0,name:"C"}, {code:31,pId:3,name:"C1"}, {code:32,pId:3,name:"C2"}, {code:33,pId:3,name:"C3"}, {code:34,pId:31,name:"x"}, {code:35,pId:31,name:"y"}, {code:36,pId:31,name:"z"}, {code:37,pId:36,name:"z1123"}, {code:38,pId:37,name:"z123123123"}, {code:381,pId:38,name:"z1231231234"}, ]; 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]){ //console.log(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]); console.log(this.groups[this.tree[i].pId]); } } }, getDom:function(a){ if(!a){return \'\'} var html=\'\\n<ul >\\n\'; for(var i=0;i<a.length;i++){ html+=\'<li><span>\'+a[i].name+\'</span>\'; //html+=\'<li><a href="#">\'+a[i].name+\'</a>\'; html+=this.getDom(this.groups[a[i].code]); html+=\'</li>\\n\'; }; html+=\'</ul>\\n\'; return html; } }; var html=new treeMenu(zNodes).init(0); $("#div").html(html); </script> </body> </html>
配上这张图看代码的话，可能更加好理解这段代码。
下面这一种和前一种的区别就是他们的数据结构不一样，导致实现代码的逻辑也不一样。不过，下面这一种方式复杂的工作全部交给了后台，基本上没有前端什么事情了。
以上是关于js中实现无限层级的树形结构（类似递归）的主要内容，如果未能解决你的问题，请参考以下文章