AG 网格：具有实例化父级的分层表可以展平吗？

Question

使用案例

如下图所示：分层表有两层（“父级”和“子级”）。在某些情况下，我们的用户需要扁平化层次结构，以便子级显示与其父级相同。目的是对该列表进行排序，而不考虑子父关系。扁平化还可以直观地过滤元数据（此处：状态）。

注：

• 父节点本身具有可排序和可过滤的数据。
• 父节点可以折叠，以便其子节点折叠起来。在这种情况下，父母仍应显示他们的元数据。
• 我们还需要可以过滤行，无论其元数据如何。即使所有孩子都被隐藏，父母也应该有 可见选项。
我们希望保存用户会话之间的行可见性。
在某些情况下，需要
• 在辅助列中显示父关系，但这在我们当前的用例中是不想要的。

我的问题：在 AG Grid 中是否可以进行这种扁平化，而无需创建两个在之间切换的表？

我最初的方法是按需隐藏 AutoColumn。这似乎不起作用，并且评论

here似乎表明至少五年前这是不可能的。为了在下面的代码中演示，隐藏适用于 parent

，但不适用于 

ag-Grid-AutoColumn

:

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

辐射

技术债务：我们已经成功创建了两个可以在（分层和扁平）之间切换的表。当用户想要隐藏行并在会话之间存储此可见性时，可以使用 getFilterModel() 和 setFilterModel() 来存储数据（与 cookie 结合使用）。然而，当在分层和扁平之间切换时，getFilterModel

的结构也会切换，如下所示：

Flat getFilterModel：

父级←不是分层模型中的单独行
• 儿童1
  孩子2

分层getFilterModel：

父#子1
家长#孩子2

“行分组”还是“树数据”？

AG Grid 支持“

行分组”和“树数据”。我可以使用任何一种，但为了获得所需的行过滤器，树数据似乎是必要的。

示例代码

单击下面代码片段中的

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>

Answer 1

经过反复试验（主要是后者），我得出结论，这是无法完成的，当用户想要展平以便排序时，我诉诸于销毁表并从头开始重新创建它。

这在技术上是有效的，但上下文丢失（表中的导航，例如列的过滤、滚动和折叠被重置）或必须在重新创建时重新应用（产生额外的、不需要的代码/技术债务），其有用性和可用性成本就很高。 ).

所以仍然感谢任何非破坏性的解决方案。