如何在Excel/HTML/数据库表格中实现多级分组与折叠展开？

Question

常见技术问题： 在Excel、HTML和数据库表格中实现多级分组与折叠展开时，常面临「层级语义缺失」与「交互一致性差」的共性难题。Excel虽原生支持行/列分级（数据→分类汇总或大纲），但依赖严格排序与手动分级，无法动态绑定父子关系；HTML表格（``）本身无内置折叠逻辑，需借助JavaScript（如jQuery DataTables或原生`

`+`

`）模拟，但易导致DOM冗余、可访问性（a11y）不达标及响应式失效；数据库（如MySQL/PostgreSQL）则完全缺乏展示层能力，仅能通过递归CTE或闭包表存储层级，却无法直接渲染折叠UI——必须依赖应用层（如后端API返回嵌套JSON + 前端树形组件）桥接。三者间数据结构（扁平表 vs 嵌套JSON vs 大纲编号）、状态维护（客户端展开态持久化？服务端缓存？）及性能优化（大数据量下的懒加载与虚拟滚动）均存在断层，导致跨平台复用困难、维护成本陡增。

Answer 1

```html

一、现象层：三端共性问题的具象化呈现

• Excel：用户需先排序→手动点击“数据→分级显示→创建组”，层级编号（1-2-3）仅是视觉标记，ParentID字段无法绑定；修改父子关系即崩溃大纲结构。
• HTML表格：原生 <table> 无语义化嵌套能力，强行用 <details><summary> 嵌套会导致 DOM 深度 >12 层时渲染延迟 >800ms（实测 Chrome 125）。
• 数据库：PostgreSQL 的 WITH RECURSIVE 可查出树形路径，但返回仍是扁平结果集（如 id, name, path, level），无折叠状态元数据。
• 三者间数据流转断点：Excel 导出 CSV → ETL 入库 → API 返回 JSON → 前端解析为树 → 渲染为可折叠表格，每步均丢失「展开态」上下文。

二、结构层：数据模型与语义鸿沟的深度解构

维度	Excel	HTML Table	SQL 表
层级标识	大纲级别（整数 1~8）+ 隐藏行标记	无原生属性，依赖 data-level 或 class 名称	parent_id / lft/rgt / path 字符串
状态存储	仅内存态（关闭文件即丢失）	localStorage 或 URL hash（如 #expanded=1,5,12）	需额外表 user_collapsed_nodes(user_id, node_id)
可访问性支持	NVDA 仅读“第3级组”，不播报子项数	若未加 aria-expanded 和 aria-controls，WCAG 2.1 AA 不达标	数据库层完全无 a11y 概念

三、交互层：一致性断裂的技术根因分析

以下 Mermaid 流程图揭示跨平台状态同步失败的关键节点：

flowchart LR
    A[Excel 用户点击“展开部门A”] -->|无事件钩子| B(状态仅存于Excel进程内存)
    C[Web 前端监听 click] --> D{是否匹配后端缓存?}
    D -- 否 --> E[发起新 API 请求带 ?expand=deptA]
    D -- 是 --> F[从 Redis 读取预渲染 HTML 片段]
    G[数据库触发器] -->|无法感知前端操作| H[不更新 user_collapsed_nodes]
    E --> I[响应含 collapsed: [“deptB”, “proj7”]]
    I --> J[前端强制重置所有节点状态]

四、架构层：面向复用的统一抽象方案

1. 定义层级中间表示（LIR）标准：采用 RFC 8259 兼容 JSON Schema，包含 nodes: [{id, pid, label, children[], isExpanded?: boolean}]；Excel 插件导出时自动注入 isExpanded 字段。
2. 服务端统一折叠引擎：Spring Boot 提供 /api/table/tree?source=excel&id=123&view=grid，根据请求头 X-Client-Type: web/excel/mobile 动态生成对应格式（JSON/CSV/HTML fragment）。
3. 前端轻量级适配器：封装 useCollapsibleTable({ dataSource, persistence: 'localStorage' }) Hook，自动处理键盘导航（←→展开/折叠，↑↓跳转兄弟节点）。
4. 数据库增强扩展：PostgreSQL 创建 collapsible_view 视图，内联查询 user_collapsed_nodes 并注入布尔字段 default_expanded。
5. 性能兜底策略：当节点数 > 5000 时，启用 Web Worker 解析 LIR + 虚拟滚动（只渲染可视区 20 行），DOM 节点数稳定在 ≈ 60。

五、工程层：生产就绪的落地检查清单

• ✅ Excel 插件必须支持 Office.js 1.12+，捕获 onSelectionChanged 事件以同步焦点到 Web 端
• ✅ 所有 HTML 折叠组件需通过 axe-core 扫描，确保 role="tree", aria-level, aria-setsize 全覆盖
• ✅ 数据库递归查询添加 LIMIT 10000 防熔断，超限时返回 {error: "depth_too_deep", hint: "use path LIKE '1.3.%'"}
• ✅ 客户端展开状态持久化增加版本号字段 v2，避免旧版 localStorage 格式污染新版逻辑
• ✅ 提供 CLI 工具 lir-validate --file data.lir.json 校验层级环路、ID 冲突、空 pid 等 12 类异常
• ✅ 响应式断点设计：移动端折叠箭头始终右对齐；桌面端支持拖拽调整分组列宽（监听 columnresize 事件）

```