js递归渲染子节点(点击父节点展示子节点)
需求概况如下:点击某个文件夹,显示该文件夹下的子文件夹。文件夹的层级和数量不固定。
![](https://images2017.cnblogs.com/blog/1285885/201712/1285885-20171204172113372-1620119146.png)
在这里,我简单准备了一下数据结构,来模拟这个效果:
var nodes=[
{
id: 1,
pid: 0,
name: "1-1",
children: [
{
id: 11,
pid: 1,
name: "1-1-1",
children: [
{
id: 111,
pid: 11,
name: "1-1-1-1",
children: [
{
id: 1111,
pid: 111,
name: "1-1-1-1-1",
children: [ ]
}
]
},
{
id: 112,
pid: 11,
name: "1-1-1-2",
children: [ ]
}
]
}
]
},
{
id: 2,
pid: 0,
name: "1-2",
children: [
{
id: 22,
pid: 2,
name: "1-2-1",
children: [ ]
}
]
}
]
代码实现:
var n=0;
function znode(arr){
var str=''
var childrenstr=''
n++;
var m=0;
$.each(arr,function(index,item){
m++;
childrenstr+='<div class="children'+m+'">'+item.name+'</div>';//代表第n级第m个子集
$('body').on('click','.level'+n+' .children'+m+'',function(){
if(item.children.length>0){
znode(item.children)//点击某个子集,递归循环对应的数组,获取子子集
}else{
alert('没有子集了')
}
})
})
str='<div class="level'+n+'">'+childrenstr+'</div>'//代表第n级
$('body').html(str);
};
znode(nodes)
效果如下:
点击1-1后,展示1-1的子集如下