AG 网格：以编程方式切换自动高度（自动行高）

Question

有没有办法在 AG Grid 中以编程方式切换行高？

我想从 50px 的行高开始，然后在单击它时扩展行的高度，从它的初始高度 50px 到它最高的单元格的高度。

再次单击应将其折叠回 rowHeight 50px。

后者很容易用setRowHeight完成，但我不知道如何以编程方式设置自动行高。

我尝试将 autoHeight 设置为 React 状态变量，并在单击行时切换它，但这没有用。

Answer 1

是的，可以在 AG Grid 中以编程方式切换自动行高。您可以通过将 gridOptions 属性 getRowHeight 设置为根据条件返回自动高度或固定高度的函数来执行此操作。

这里是一个如何实现你正在寻找的例子：

const [autoHeight, setAutoHeight] = useState(false);

// ...

// This function sets the row height based on whether autoHeight is enabled or not
const getRowHeight = (params) => {
  if (autoHeight) {
    return -1; // -1 means auto height
  }
  return 50; // fixed height of 50px
};

// ...

// This function toggles the autoHeight state variable
const toggleAutoHeight = () => {
  setAutoHeight((prev) => !prev);
};

// ...

// In your gridOptions, set getRowHeight to the function defined above
const gridOptions = {
  // other options...
  getRowHeight,
};

然后，您可以在行单击事件处理程序中使用 toggleAutoHeight 函数来切换自动高度：

const handleRowClick = (params) => {
  toggleAutoHeight();
  gridOptions.api.resetRowHeights(); // This is necessary to recalculate row heights
};

resetRowHeights 方法对于在切换 getRowHeight 函数后重新计算行高是必要的。