javascript - ag-grid - 数据更改时调整细节高度

Question

我有一个使用主/详细信息配置的表，并且正在使用 getRowHeight 回调。

高度的初始设置按预期工作。我的期望是，当更新表数据时，将重新计算包含详细网格的行的高度，但我似乎无法触发这些行的大小调整。

我的getRowHeight定义是:

getRowHeight = params => params.node.detail ? this.getDetailHeight(params) : 48;

getDetailHeight = params => {
  let rows = params.data.filterData.length;
  return rows * 48 + 116; // all rows height + (header & footer)
};

表的数据按如下方式更新(设置 deltaRowDataMode 标志):

componentDidUpdate() {
    if (this && this.gridApi) {
      this.gridApi.setRowData(_.cloneDeep(this.props.data));
      this.gridApi.resetRowHeights();
      this.gridApi.forEachDetailGridInfo(detail => detail.api.resetRowHeights());
      this.gridApi.redrawRows(_.cloneDeep(this.props.data));
    }
  }

并且我希望基于 https://www.ag-grid.com/javascript-grid-row-height/#api-resetrowheights 调用 resetRowHeights 再次触发 getRowHeight :

api.resetRowHeights()

Call this API to have the grid clear all the row heights and work them all out again from scratch - if you provide a getRowHeight() callback, it will be called again for each row. The grid will then resize and reposition all rows again. This is the shotgun approach.

但是，我看到的行为是仅为主行触发 getRowHeight，而不是 详细网格行(不是详细信息表中的行，而是详细网格行本身的高度)。

我希望这是清楚的，感谢您的反馈。

Answer 1

如果有人遇到同样的问题，我有一些适合我的情况的东西。我注意到，对于详细节点，ag-grid 不会清除 resetRowHeights 上的行高，因此我更新了更新方法来处理此问题:

componentDidUpdate() {
    if (this && this.gridApi) {
      this.gridApi.setRowData(_.cloneDeep(this.props.data));
      // call to resetRowHeights will apply the changes from forEachNode(..)
      this.gridApi.forEachNode(row => row.detailNode && row.detailNode.setRowHeight(null));
      this.gridApi.resetRowHeights();
      this.gridApi.redrawRows(_.cloneDeep(this.props.data));
    }
  }

这会重置详细节点的 rowHeight，以便 ag-grid 重新运行 getRowHeight 调用。