javascript - 请问 JS 如何能实现动态展开 N 阶 Table, Row 功能算法，类似finereport?

Question

如下图

想要做类似finereport功能，可以动态横向、纵向、任意位子展数据
可以动态N阶集合展开
不知道类似算法的关键字，谢谢!

Answer 1

在JavaScript中实现类似FineReport的动态N阶表格展开功能，你可以考虑使用递归和动态生成DOM元素的方式。这种功能通常涉及到多级数据结构的处理和视图的动态更新。以下是一个基本的思路和示例代码框架，用于指导你如何实现这样的功能：

1. 数据结构设计

首先，你需要设计一个能够表示多级数据结构的数据模型。这通常是一个树形结构，每个节点可以包含多个子节点。

const data = [
    {
        id: 1,
        name: "Root",
        children: [
            {
                id: 2,
                name: "Child 1",
                children: [
                    { id: 4, name: "Grandchild 1" },
                    { id: 5, name: "Grandchild 2" }
                ]
            },
            {
                id: 3,
                name: "Child 2"
            }
        ]
    }
];

2. 递归函数生成表格

然后，你可以编写一个递归函数来遍历这个数据结构，并动态生成HTML表格元素。这个函数将检查每个节点是否有子节点，并相应地添加展开/折叠的控件。

function renderTable(data, parentElement) {
    data.forEach(node => {
        const row = document.createElement('tr');
        const cell = document.createElement('td');
        cell.textContent = node.name;
        if (node.children && node.children.length > 0) {
            // 添加展开/折叠按钮
            const toggleButton = document.createElement('button');
            toggleButton.textContent = '展开';
            toggleButton.onclick = () => toggleChildren(node, row);
            cell.appendChild(toggleButton);

            // 初始时不显示子节点
            const childrenContainer = document.createElement('div');
            childrenContainer.style.display = 'none';
            row.appendChild(childrenContainer);

            // 递归渲染子节点
            renderTable(node.children, childrenContainer);
        }
        row.appendChild(cell);
        parentElement.appendChild(row);
    });
}

function toggleChildren(node, parentRow) {
    const childrenContainer = parentRow.querySelector('div');
    if (childrenContainer.style.display === 'none') {
        childrenContainer.style.display = 'block';
    } else {
        childrenContainer.style.display = 'none';
    }
}

// 假设你有一个表格元素 <table id="myTable"></table>
const table = document.getElementById('myTable');
const tbody = document.createElement('tbody');
table.appendChild(tbody);
renderTable(data, tbody);

3. 样式和交互的完善

以上代码提供了基本的功能框架，但你可能还需要添加CSS样式来美化表格，以及更复杂的交互逻辑（如处理列的动态添加/删除、数据的异步加载等）。

4. 注意事项

• 递归深度：如果你的数据结构非常深，递归可能会导致性能问题或堆栈溢出。考虑使用迭代方式或其他优化策略。
• 异步数据：如果数据是异步加载的，你可能需要在数据加载完成后调用renderTable函数。
• 响应式设计：确保你的表格在不同屏幕尺寸下都能良好地显示和交互。

这个示例提供了一个简单的起点，你可以根据具体需求进行调整和扩展。