js折叠树

JavaScript 折叠树（Tree Folding）是一种常见的用户界面交互模式，用于展示层次结构的数据。它允许用户通过点击节点来展开或折叠子节点，从而控制显示的内容量，提高用户体验。

基础概念

折叠树通常由以下几个部分组成：

节点（Node）：表示树中的一个元素，可以是文件夹、文件或其他数据项。
父节点（Parent Node）：拥有子节点的节点。
子节点（Child Node）：属于某个父节点的节点。
根节点（Root Node）：树的起始点，没有父节点。

优势

节省空间：用户可以根据需要展开或折叠节点，避免一次性显示大量数据导致的界面混乱。
提高可读性：通过层次结构展示数据，使用户更容易理解数据的组织方式。
增强交互性：用户可以主动探索数据，而不是被动接受信息。

类型

静态折叠树：节点结构固定，不支持动态添加或删除节点。
动态折叠树：允许用户在运行时添加、删除或修改节点。

应用场景

文件管理系统：展示文件夹和文件的层次结构。
组织架构图：显示公司内部的部门和员工关系。
数据库导航：帮助用户浏览和管理数据库表和字段。

示例代码

以下是一个简单的静态折叠树实现示例，使用HTML、CSS和JavaScript：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折叠树示例</title>
    <style>
        .tree ul {
            list-style-type: none;
            padding-left: 20px;
        }
        .tree li {
            cursor: pointer;
        }
        .tree .node {
            display: inline-block;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="tree">
        <ul>
            <li>
                <span class="node">+</span> 根节点
                <ul>
                    <li>
                        <span class="node">+</span> 子节点1
                        <ul>
                            <li>叶子节点1</li>
                            <li>叶子节点2</li>
                        </ul>
                    </li>
                    <li>
                        <span class="node">+</span> 子节点2
                        <ul>
                            <li>叶子节点3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        document.querySelectorAll('.tree .node').forEach(node => {
            node.addEventListener('click', function(event) {
                event.stopPropagation();
                const ul = this.nextElementSibling;
                if (ul && ul.tagName === 'UL') {
                    ul.style.display = ul.style.display === 'none' ? '' : 'none';
                    this.textContent = this.textContent === '+' ? '-' : '+';
                }
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

节点展开/折叠状态丢失：
- 原因：页面刷新或重新加载导致状态丢失。
- 解决方法：使用本地存储（如localStorage）保存节点状态，并在页面加载时恢复状态。

性能问题：
- 原因：树结构非常庞大，导致渲染和交互缓慢。
- 解决方法：采用虚拟滚动技术，只渲染当前视口内的节点，减少DOM操作。
事件冒泡：
- 原因：点击子节点时触发了父节点的事件处理程序。
- 解决方法：在事件处理程序中使用event.stopPropagation()阻止事件冒泡。

通过以上方法，可以有效解决折叠树在实际应用中遇到的常见问题，提升用户体验。