js递归渲染子节点（点击父节点展示子节点）

Posted 2020-10-16 nancy_明月无缺

需求概况如下：点击某个文件夹，显示该文件夹下的子文件夹。文件夹的层级和数量不固定。

在这里，我简单准备了一下数据结构，来模拟这个效果：
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的子集如下