Ag-Grid:一旦列超出容器大小,调整列宽并显示水平滚动条

Posted

技术标签:

【中文标题】Ag-Grid:一旦列超出容器大小,调整列宽并显示水平滚动条【英文标题】:Ag-Grid: adjust columns width and show horizontal scroll bar once columns reach beyond container size 【发布时间】:2020-05-28 01:34:04 【问题描述】:

我有列面板可以在 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

【问题讨论】:

【参考方案1】:

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

您可能想要定义最小宽度并使用getMinWidth,而不是getActualWidth

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:一旦列超出容器大小,调整列宽并显示水平滚动条的主要内容,如果未能解决你的问题,请参考以下文章

datatable内容过长时表格会超出界面解决方法

与 ember.js 中的模态叠加一起使用时,ag-grid 调整列的大小需要很长时间才能响应

如何将动态列宽设置为 AG-Grid?

调整单个页面中多个 ag-grid 实例的所有列的大小

调整列宽 DBGrid

ag-grid:key.forEach 在调整列大小时不是函数控制台错误