Question

我具有“列”面板，用于从AG-Grid添加/删除列。大约有50列，默认情况下有5列带有属性 api.sizeColumnsToFit（）。它工作正常，但是当用户尝试添加更多列并且列超出了容器的空间时，问题就来了。它试图适应容器的大小并弄乱了。

如果我删除了 api.sizeColumnsToFit（），一旦用户删除了所有列并仅保留2-3列，它就适合大小，但是在网格中显示了空白，看起来不错。

任何想法我都可以通过以下方式有条件地配置ag-grid使其正常工作：

if columns_are_less_than_container_size
  api.sizeColumnsToFit()
else
  Do NOT apply sizeColumnsToFit
  rather show a horizontal scroll

Answer 1

您可以实现onDisplayedColumnsChanged并根据父元素的宽度进行计算。

您可能想定义一个最小宽度而不是getActualWidth并使用getMinWidth。

onDisplayedColumnsChanged(params) {
    const gridWidth = document.getElementById("parent").offsetWidth;
    const widthVisibleColumns = params.columnApi.getAllColumns()
      .filter(c => c.isVisible())
      .map(c => c.getActualWidth())
      .reduce((a, b) => a + b);
    if (gridWidth > widthVisibleColumns) {
      params.api.sizeColumnsToFit();
    }
}

Ag-Grid：调整列宽并在列超出容器大小时显示水平滚动条

1 个答案: