如何更新详细信息表中的数据并且不丢失范围选择和过滤器？

Posted 2023-03-28

【中文标题】如何更新详细信息表中的数据并且不丢失范围选择和过滤器？

【英文标题】：How can I update data within Detail table and don't loose range selection and filters?

【发布时间】：2020-05-19 03:42:48

【问题描述】：

我有最新的企业 React agGrid 表和主/详细网格。我的数据每 5 秒在客户端上获取一次，然后一成不变地放到 redux 存储中。 React 网格组件在 Detail 选项中使用 deltaRowDataMode=true 道具和 deltaRowDataMode: true。

我的主网格按预期正常运行：如果我选择了范围，网格将在数据更新后保持选择，过滤器和可见性菜单仍将打开。但是细节网格的行为不同：在数据刷新时，选择被删除，可见性菜单关闭，如果过滤器被改变，网格会跳转。

我在文档中读到，当我打开 Detail 网格时，它是从头开始创建的，但在我的情况下，我没有关闭 Detail。我在任何地方都尝试过keepDetailRows=true 标志，它解决了跳跃更新和选择丢失的问题，但细节网格现在不更新数据。

【参考方案1】：

根据文档https://www.ag-grid.com/javascript-grid-master-detail/#changing-data-refresh，似乎只有两个可能的选项。第一个是每次主行中的数据更改时重绘明细表，第二个是如果启用了标志 suppressRefresh 则明细行根本不会更改。奇怪的决定，糟糕的行为......

更新。

你好。我找到了一些解决方案。

第一个是在表的选项中使用detailCellRendererParams 并将suppressRefresh 设置为true。它提供了使用getDetailGridInfo 获取详细信息表的api 的机会。 虽然详细表的刷新被禁用，但使用 detailGridInfo 允许将新的 data 设置为详细表。

useEffect(() => 
    const api = gridApiRef;
    api && api.forEachNode(node => 
      const  detailNode, expanded  = node;
      if (detailNode && expanded) 
        const detailGridInfo = api.getDetailGridInfo(detailNode.id);
        const rowData = detailNode.data.someData; // your nested data

        if (detailGridInfo) 
          detailGridInfo.api.setRowData(rowData);
        
      
    );
, [results]);

第二个是使用自定义的cellRenderer，wicth 更加灵活，允许在 cellRenderer 中使用任何内容。 在表的选项集detailCellRenderer: 'yourCustomCellRendereForDetailTable. 在 yourCustomCellRendereForDetailTable 中，您可以使用

this.state = 
    rowData: [],

每个 cellRenderer 都有一个刷新方法，可以如下使用。

  refresh(params) 
    const newData = [ ...params.data.yourSomeData];
    const oldData = this.state.rowData;

    if (newData.length !== oldData.length) 
      this.setState(
        rowData: newData,
      );
    

    if (newData.length === oldData.length) 
      if (newData.some((elem, index) => 
        return !isEqual(elem, oldData[index]);
      )) 
        this.setState(
          rowData: newData,
        );
      
   

    return true;
  

以这种方式使用refresh 方法提供了一种完全可定制的使用detailCellRenderer 的方法。

注意。要使用不可变数据（如 redux）获得更好的性能，需要在主表和详细表中将 immutableData 设置为 true。