树形表格js

树形表格（Tree Table）是一种常见的数据展示方式，它结合了表格的行列结构和树形结构的层次关系，能够清晰地展示具有层级关系的数据。在前端开发中，树形表格常用于展示组织结构、文件目录、分类信息等。

基础概念

树形表格通常由以下几个部分组成：

节点（Node）：表格中的每一行代表一个节点，节点可以有子节点。
展开/折叠图标：用于显示或隐藏子节点。
层级标识：通过缩进或其他视觉元素表示节点的层级关系。

类型

静态树形表格：数据在初始化时就已经确定，不支持动态添加或删除节点。
动态树形表格：支持实时更新数据，可以动态添加、删除或修改节点。

应用场景

组织架构图：展示公司内部的部门结构和员工关系。
文件管理系统：显示文件和文件夹的层级结构。
商品分类：在电商网站中展示商品的分类信息。
项目管理工具：展示项目的任务分解和进度跟踪。

示例代码

以下是一个简单的树形表格实现示例，使用JavaScript和HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Table Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .indent {
            padding-left: 20px;
        }
        .toggle {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="treeTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
            </tr>
        </thead>
        <tbody>
            <!-- Example data will be inserted here -->
        </tbody>
    </table>

    <script>
        const data = [
            {
                name: 'Root',
                type: 'Folder',
                children: [
                    {
                        name: 'Subfolder 1',
                        type: 'Folder',
                        children: [
                            { name: 'File 1.1', type: 'File' },
                            { name: 'File 1.2', type: 'File' }
                        ]
                    },
                    { name: 'File 2', type: 'File' }
                ]
            }
        ];

        function renderTreeTable(nodes, level = 0) {
            nodes.forEach(node => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="indent-${level}">${node.name}</td>
                    <td>${node.type}</td>
                `;
                document.querySelector('#treeTable tbody').appendChild(row);

                if (node.children && node.children.length > 0) {
                    const toggleIcon = document.createElement('span');
                    toggleIcon.className = 'toggle';
                    toggleIcon.textContent = '+';
                    toggleIcon.onclick = () => {
                        const rows = Array.from(document.querySelectorAll(`.indent-${level + 1}`));
                        rows.forEach(row => row.style.display = row.style.display === 'none' ? '' : 'none');
                        toggleIcon.textContent = toggleIcon.textContent === '+' ? '-' : '+';
                    };
                    row.cells[0].appendChild(toggleIcon);

                    renderTreeTable(node.children, level + 1);
                }
            });
        }

        renderTreeTable(data);
    </script>
</body>
</html>

常见问题及解决方法

节点展开/折叠功能失效：
- 原因：可能是事件绑定错误或DOM操作不当。
- 解决方法：检查事件绑定代码，确保每次展开/折叠操作都能正确更新DOM。

性能问题：
- 原因：当数据量较大时，频繁的DOM操作可能导致页面卡顿。
- 解决方法：使用虚拟滚动技术（如React Virtualized）来优化大数据量下的渲染性能。
样式错乱：
- 原因：CSS样式冲突或不兼容。
- 解决方法：仔细检查CSS代码，确保每个类的样式定义正确且独立。

通过以上内容，你应该对树形表格有了全面的了解，并能够在实际项目中应用和优化。

页面内容是否对你有帮助？

有帮助

没帮助