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

【问题标题】：ag-grid - Resize detail height when data changesag-grid - 数据更改时调整细节高度
【发布时间】：2019-08-06 12:06:50
【问题描述】：

我有一个使用 Master/Detail 配置的表，并且正在使用 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));
    }
  }

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

api.resetRowHeights()

调用此 API 以使网格清除所有行高并从头开始重新计算它们 - 如果您提供 getRowHeight() 回调，它将为每一行再次调用。然后网格将重新调整所有行的大小并重新定位。这是霰弹枪方法。

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

我希望这很清楚，感谢您的任何反馈。

【问题讨论】：

标签： javascript reactjs ag-grid ag-grid-react

【解决方案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 调用。

【讨论】：

这个问题已经在 ag-grid 中作为 AG-2814 提出
对此的任何更改我都尝试了 v 22 中的此代码不起作用。我必须更改详细信息行，getRowHeight 只触发一次，而不是每个细节渲染
@user2217288 根据ag-grid's pipeline 的说法，这仍在他们的积压工作中需要修复。上述解决方法仍然适用于我们在 ag-grid 23.0.2 上的应用程序

【解决方案2】：

我已经连接到 rowDataChanged 事件 (https://www.ag-grid.com/javascript-grid/grid-events/#reference-miscellaneous)，此时我正在调用 this.gridApi.resetRowHeights(); - 它仅在我的数据更改时更新高度（而不是在调整大小或重新绘制网格时）。

onRowDataChanged(params) {
  this.gridApi.resetRowHeights();
}

【讨论】：