我们可以在树视图和平面视图之间切换吗？

Question

是否可以提供一项功能，允许用户对同一网格中的同一数据同时拥有树视图和平面视图选项

例如

树视图

我可以看到数据为 nested/linked

父行

• 子行

在平面视图中：只显示子行

子行

Answer 1

如果要展平树，只需 return 树路径中的最后一项即可。您还需要重置所有行以应用更改。

const displayTree = React.useRef(true);
const updateDisplayTree = (tree) => () => {
  displayTree.current = tree;
  gridApi.setRowData(rowData);
};

...

<button onClick={updateDisplayTree(true)}>Tree</button>
<button onClick={updateDisplayTree(false)}>Flat</button>
<AgGridReact
  treeData
  autoGroupColumnDef={{
    headerName: "Organisation Hierarchy",
    minWidth: 300,
  }}
  getDataPath={(data) => {
    if (displayTree.current) {
      return data.orgHierarchy;
    } else {
      return data.orgHierarchy.slice(-1);
    }
  }}
  {...}
/>

现场演示