问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用javascript递归实现树目录？

头像
我爱天文007
    1201932

    我正在尝试使用JavaScript实现树表，但是我无法解决这个问题。

    one
 ├── two
 │   ├── five
 │   └── six
 ├── three
 └── four
     └── seven

    你们认为上面的效果可以实现吗？

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <script>
        var data = [{
            id: 1,
            name: "one",
            pid: 0,
            level: 0,
            children: [{
                    id: 2,
                    name: "two",
                    pid: 1,
                    level: 1,
                    children: [{
                            id: 3,
                            name: "five",
                            pid: 2,
                            level: 2,
                            children: []
                        },
                        {
                            id: 4,
                            name: "six",
                            pid: 2,
                            level: 2,
                            children: []
                        }
                    ]
                },
                {
                    id: 5,
                    name: "three",
                    pid: 1,
                    level: 1,
                    children: []
                },
                {
                    id: 6,
                    name: "four",
                    pid: 1,
                    level: 0,
                    children: [{
                        id: 7,
                        name: "seven",
                        pid: 6,
                        level: 2,
                        children: []
                    }]
                }
            ]

        }];

        
        var icon = new Array('│ ', '├─ ', '└─ ');

       
        function treeA(data) {
            var str = "";
            var childPrefix = "";
            for (var i = 0; i < data.length; i++) {

                console.log(data[i].name);
                var node = data[i].children;
                childTree(node);
    
            }
        }
        function childTree(node) {
         
            for(var i = 0; i<node.length; i++) {
               
                   var child = node[i];
                   
                    if(i<node.length-1){
                            console.log(icon[1]+child.name);  
                    } else {
                            console.log(icon[2]+child.name);
                    }
               
                    if(jQuery.isArray(child.children)){  
                             
                        childTree(child.children);
                    }
                 
                }
        }
        $(function () {
            treeA(data);
        });
    </script>
</body>
</html>

    console.log打印出来结果：

    one
├─ two
├─ five
└─ six
├─ three
└─ four
└─ seven

    这个结果是不对的，应该按照上面效果才对了。

    javascriptjquery前端
    阅读 1.8k
    1 个回答
    得票最新
    头像
    linvic
      94439
      ✓ 已被采纳

      https://codepen.io/linvic/pen...
      直接看吧

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <script>
        var data = [{
            id: 1,
            name: "one",
            pid: 0,
            level: 0,
            children: [{
                    id: 2,
                    name: "two",
                    pid: 1,
                    level: 1,
                    children: [{
                            id: 3,
                            name: "five",
                            pid: 2,
                            level: 2,
                            children: []
                        },
                        {
                            id: 4,
                            name: "six",
                            pid: 2,
                            level: 2,
                            children: []
                        }
                    ]
                },
                {
                    id: 5,
                    name: "three",
                    pid: 1,
                    level: 1,
                    children: []
                },
                {
                    id: 6,
                    name: "four",
                    pid: 1,
                    level: 0,
                    children: [{
                        id: 7,
                        name: "seven",
                        pid: 6,
                        level: 2,
                        children: []
                    }]
                }
            ]

        }];

        
        var icon = new Array('│   ', '├── ', '└── ',);

        function treeA(data,deep) {
            for (var i = 0; i < data.length; i++) {
                var _deep = deep;
                var _prefix = (new Array(_deep)).join(icon[0]);
                if (_deep === 0) {
                    console.log(data[i].name);  
                }
                else {
                    if (i < data.length - 1) {
                        console.log(_prefix + icon[1] + data[i].name);  
                    } else {
                        console.log(_prefix + icon[2] + data[i].name);
                    }
                }
                
                if (data[i].children && data[i].children.length > 0) {
                    _deep ++;
                    treeA(data[i].children,_deep)
                } else{
                    _deep --;
                }
            }
        }
        $(function () {
            treeA(data,0);
        });
    </script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题