ag-grid - autoGroupColumnDef 更改时 AgGridReact 组件不更新

Question

我正在使用 ag-Grid 和 React 来测试他们的企业 row grouping特征。我想在运行时更改行分组列名称，但我无法做到这一点。

当我对 AgGridReact 的 columnDefs 属性进行更改时，更改会反射(reflect)在表中。但是，即使调试日志显示检测到更改，也不会呈现对 autoGroupColumnDef 属性的更改。以下是 TypeScript 中的示例(使用 React hooks 进行状态):

import React, { FC, useState } from 'react';
import 'ag-grid-enterprise';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

const AgGridTest: FC = () => {
  const rowData = [
    { col1: 'a', col2: 0, col3: 0 },
    { col1: 'b', col2: 1, col3: 1 },
    { col1: 'c', col2: 2, col3: 0 },
    { col1: 'd', col2: 3, col3: 1 },
    { col1: 'a', col2: 4, col3: 0 },
    { col1: 'b', col2: 5, col3: 1 },
    { col1: 'c', col2: 6, col3: 0 },
    { col1: 'd', col2: 7, col3: 1 },
  ];
  const [columnDefs, setColumnDefs] = useState([
    { headerName: 'Column 1', field: 'col1', rowGroup: true }, // initial group column
    { headerName: 'Column 2', field: 'col2', rowGroup: false },
    { headerName: 'Column 3', field: 'col3', rowGroup: false },
  ]);

  const [autoGroupColumnDef, setAutoGroupColumnDef] = useState(
    {headerName: 'col1 Initial'} // auto group column name is 'col1 Initial' to start
  );

  const groupByColumn = (field: string): void => {
    // this successfully changes the grouping column...
    setColumnDefs(
      prevColumnDefs => prevColumnDefs.map(
        colDef => colDef.field === field ? 
          {...colDef, rowGroup: true} :
          {...colDef, rowGroup: false}
      )
    );
    // ...but this won't change the auto group column name!
    setAutoGroupColumnDef({
      headerName: `${field} Group Column`,
    });
  }

  return (
    <div className="ag-theme-balham" style={{ height: '300px' }}>
      <button onClick={() => groupByColumn('col1')}>Group by Column 1</button>
      <button onClick={() => groupByColumn('col2')}>Group by Column 2</button>
      <AgGridReact 
        rowData={rowData}
        columnDefs={columnDefs}
        autoGroupColumnDef={autoGroupColumnDef}
        debug // enable debug logs
      />
    </div>
  );
}

const App: React.FC = () => <AgGridTest />

export default App;

我尝试调用网格 API 的 api.refreshHeader但这也不起作用:

const AgGridTest: FC = () => {
  // ...

  // store the api in an instance variable
  // when the on ready event makes it available
  const api = useRef<GridApi>();
  const onGridReady = (params: GridReadyEvent) => {
    api.current = params.api;
  }

  const groupByColumn = (field: string): void => {
    // ... re-assign the grouping cols ...
  }

  useEffect(() => {
    // run this after grouping changes have been rendered
    gridApi.current && gridApi.current.refreshHeader(); // doesn't work
  });

  return (
    <div>
      <AgGridReact
        onGridReady={onGridReady}
        // ...
      />
    </div>
  );
}

我尝试寻找 API 函数来设置 autoColumnGroupDef，但找不到。 documentation只提到通过 gridOptions 设置属性。 API 具有更新常规列定义的功能:api.setColumnDefs 。这就是当 columnDefs 属性更改时 AgGridReact 调用的内容(相关代码片段 here 和 here )。但是，当 autoGroupColumnDef 属性更改时，AgGridReact 只是覆盖 gridOptions 对象 ( relevant code snippet ) 中的 autoGroupColumnDef 属性。似乎没有任何关联的 setter 函数。

似乎甚至没有办法获取自动组列对象。 columnApi.getAllColumns/getColumnGroup只返回常规列。自动组列列表单独保存在 columnController ( relevant code snippet ) 中的私有(private)实例变量中，该变量公开了一个公共(public) getPrimaryAndSecondaryAndAutoColumns 访问器，但我们无法访问 columnController API。

关于如何在运行时修改自动组列名称有什么想法吗？或者我是否必须禁用它们和 create my own group columns ？

这个问题被问了here和 here但他们从未收到答案(而且我不明白第二个问题中的评论)。

Answer 1

正如您可能知道的那样，ag-grid 是纯 js，React 和 Angular 版本是它的包装器。

我已经使用 Angular 版本大约一年了，并对它进行了大量自定义，我发现许多 gridOptions，即使它们是绑定(bind)属性，在网格初始实例化后没有任何效果。我怀疑 autoGroupColumnDef 就是其中之一。

因此，我会尝试根据您引用的链接创建您自己的列组。

如果这不起作用，(丑陋的)替代方法是销毁网格，然后使用反射(reflect)新 autoGroupColumnDef 的新 gridOptions 重新创建它

另一条来之不易的建议: 如果您使用 setColumnDefs API 更新列定义，它可以正常工作，但是，如果您稍后想要保存和恢复网格状态，从 API 获取网格状态会生成附加“_1”的列名称，并且如果您以此设置列状态，您会收到有关未找到列的错误。解决方案是先将columnDefs设置为空数组，然后设置实际的columnDefs。