ag-grid

Question

我有一个 table 使用 Master/Detail 配置并且正在使用 getRowHeight 回调。

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

我的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)
};

table 的数据更新如下（设置了 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()

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 仅针对主行触发， 而不是 详细网格行（不是详细信息中的行 table，但详细信息网格行本身的高度）。

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

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 调用。

Answer 2

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

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

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

ag-grid - Resize detail height when data changes

javascript

reactjs

ag-grid-react

`api.resetRowHeights()`