AG Grid：能否不切换表格展平含实例化父节点的分层表格？

使用场景 #

分层表格分为两级（“父节点”和“子节点”）。在某些场景下，用户需要将层级展平，使子节点与父节点处于同等地位，目的是脱离父子关系对列表进行排序，同时也能更直观地对元数据（如：状态）进行筛选。

注意事项：

• 父节点自身拥有可排序、可筛选的数据。
• 父节点可折叠，折叠时其子节点会被收起，但父节点的元数据仍需显示。
• 需支持基于元数据筛选隐藏行，且即使所有子节点被隐藏，父节点仍可选择保持可见。
• 需在用户会话间保存行的可见状态。
• 部分场景下适合在辅助列中显示父子关系，但当前用例不需要此功能。

核心问题：在AG Grid中，能否无需创建两个可切换的表格，实现上述分层表格的展平？

选择“行分组（Row Grouping）”还是“树形数据（Tree Data）”？ #

AG Grid同时支持“行分组”和“树形数据”两种模式。两种模式均可考虑，但树形数据似乎是实现所需行筛选功能的必要选择。

创建两个表格的弊端：技术债务 #

我们已成功实现可切换的分层表格和平铺表格。当用户需要隐藏行并在会话间保存可见状态时，可结合cookie使用getFilterModel()和setFilterModel()存储数据。但切换两种视图时，getFilterModel的结构也会随之变化：

平铺视图下的getFilterModel：

• Parent ← 在分层模型中不是单独行
  • Child 1
  • Child 2

分层视图下的getFilterModel：

• Parent#Child 1
• Parent#Child 2

这意味着后端需要同时支持两种数据结构，用于读取和写入用户偏好的行可见状态。

首次失败方案：隐藏AutoColumn #

我最初尝试按需隐藏AutoColumn，但此方案无效，且相关评论显示至少五年前该操作就无法实现。如下代码所示，parent列可被隐藏，但ag-Grid-AutoColumn不行：

let isHierarchyVisible = gridApi.getColumn('ag-Grid-AutoColumn').isVisible();
gridApi.setColumnsVisible(['parent'], isHierarchyVisible);
gridApi.setColumnsVisible(['ag-Grid-AutoColumn'], !isHierarchyVisible);

点击代码片段中的Switch View（全屏查看），可看到parent列可隐藏，但ag-Grid-AutoColumn无法隐藏。

let gridApi;
const gridDiv = document.querySelector('#myGrid');
const agGridAutoColumnVisibleValue = document.querySelector('#ag-grid-auto-column-visible-value');

const columnDefs = [
  { field: 'parent', rowGroup: true, hide: true },
  { field: 'child' },
];

const rowData = [
  { parent: 'Parent A', child: 'Child A1' },
  { parent: 'Parent A', child: 'Child A2' },
  { parent: 'Parent B', child: 'A - Child B1' },
  { parent: 'Parent B', child: 'Child B2' },
];

const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  //autoGroupColumnDef: { field: 'parent' },
  groupDefaultExpanded: -1,
};


function switchView() {
  let isHierarchyVisible = gridApi.getColumn('ag-Grid-AutoColumn').isVisible();
  gridApi.setColumnsVisible(['parent'], isHierarchyVisible);
  gridApi.setColumnsVisible(['ag-Grid-AutoColumn'], !isHierarchyVisible);
  agGridAutoColumnVisibleValue.textContent = gridApi.getColumn('ag-Grid-AutoColumn').isVisible();
  gridApi.refreshCells();
}

gridApi = agGrid.createGrid(gridDiv, gridOptions)
agGridAutoColumnVisibleValue.textContent = gridApi.getColumn('ag-Grid-AutoColumn').isVisible();

<script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise/dist/ag-grid-enterprise.min.js"></script>
<button onclick="switchView()">Switch View</button>
<div>ag-Grid-AutoColumn.visible value: <code id="ag-grid-auto-column-visible-value"></code></div>
<div id="myGrid" style="height: 600px;width: 600px;" class="ag-theme-alpine"></div>

第二次失败方案：使用行分组 #

以下是使用行分组而非树形数据的尝试，但折叠父节点时无法显示父节点元数据，且用户对使用“(self)”等命名方式引用父节点的方式不满。用户希望父节点仅占用一行，我们尝试用groupHideOpenParents解决，但在排序和折叠时出现问题。

内容的提问来源于stack exchange，提问作者bjornte