js 递归treeview

JavaScript中的递归树视图（TreeView）是一种常见的数据结构，用于表示层次化的数据。递归树视图允许用户通过点击节点来展开或折叠子节点，从而查看数据的层次结构。

基础概念

递归：在函数定义中使用函数自身的方法。在树视图中，递归通常用于遍历树的节点。

树视图（TreeView）：一种图形用户界面元素，用于显示数据的层次结构，类似于文件系统的目录结构。

类型

静态树视图：节点和层次结构在初始化时就确定。
动态树视图：节点和层次结构可以根据用户的操作或数据的变化动态更新。

应用场景

文件管理系统：展示文件夹和文件的层次结构。
组织结构图：展示公司或团队的层级关系。
配置管理：展示复杂配置项的层次结构。

示例代码

以下是一个简单的JavaScript递归树视图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recursive TreeView</title>
    <style>
        .tree {
            list-style-type: none;
            padding-left: 20px;
        }
        .node {
            cursor: pointer;
        }
        .node::before {
            content: '▶ ';
            font-size: 10px;
        }
        .node.expanded::before {
            content: '▼ ';
        }
        .children {
            display: none;
        }
        .children.expanded {
            display: block;
        }
    </style>
</head>
<body>
    <ul id="tree" class="tree"></ul>

    <script>
        const data = {
            name: 'Root',
            children: [
                {
                    name: 'Node 1',
                    children: [
                        { name: 'Node 1.1' },
                        { name: 'Node 1.2' }
                    ]
                },
                {
                    name: 'Node 2',
                    children: [
                        { name: 'Node 2.1' },
                        { name: 'Node 2.2' }
                    ]
                }
            ]
        };

        function renderTree(node, parentElement) {
            const li = document.createElement('li');
            li.className = 'node';
            li.textContent = node.name;

            if (node.children && node.children.length > 0) {
                const childrenUl = document.createElement('ul');
                childrenUl.className = 'children';
                node.children.forEach(child => {
                    renderTree(child, childrenUl);
                });
                li.appendChild(childrenUl);
            }

            li.addEventListener('click', (event) => {
                event.stopPropagation();
                li.classList.toggle('expanded');
                const children = li.querySelector('.children');
                if (children) {
                    children.classList.toggle('expanded');
                }
            });

            parentElement.appendChild(li);
        }

        const treeElement = document.getElementById('tree');
        renderTree(data, treeElement);
    </script>
</body>
</html>