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