Ag-grid 列分组调整大小问题答案

【问题标题】：Ag-grid column grouping resize issueAg-grid 列分组调整大小问题
【发布时间】：2020-07-21 14:27:24
【问题描述】：

在我开发的列分组网格中，当调整列大小时，最后会出现白色空白区域。有什么建议吗？[![在此处输入图片描述][1]][1]

【问题讨论】：

【解决方案1】：

你可以在columnRowGroupChanged事件之后调用sizeColumnsToFit()：

columnRowGroupChanged 添加或删除了行组列。

.html模板事件绑定

(columnRowGroupChanged)="groupChanged($event)"

或.tsgridOptions事件绑定（不要忘记在.html中定义[gridOptions]）

this.gridOptions:{
    onColumnRowGroupChanged : this.groupChanged.bind(this)
}

处理

groupChanged(params){
    params.api.sizeColumnsToFit();
}

DEMO

【讨论】：

。感谢您的回复。我试过你的建议。但没有解决。
感谢演示。在演示中，您可以在右端看到一些空白区域。这就是问题所在。我们可以解决吗？
演示图像已添加到我的问题中。
更改组后需要。
请在调整任何列的大小后尝试。右端的一些空白区域。

【解决方案2】：

从 ag-grid 23.1.0 开始，我们不再需要使用 sizeColumnsToFit。相反，在列定义中，将 flex: 1 添加到最后一个可见列。

这可以防止在调整列大小时出现所有烦人的跳转和奇怪的网格行为。如果用户放大列，将出现水平滚动条，这是预期的行为。请检查您的代码并将 sizeColumnsToFit 更改为 flex 解决方案。 Flex 还允许您控制相对列的大小，您可以在文档中了解更多信息：https://www.ag-grid.com/javascript-grid-resizing/。

例子：

columnDefs = [{...}
               ...
             {
                headerName: 'HeaderA',
                field: 'name',
                ...
                flex: 1, // Adding this to last column definition
              }]

【讨论】：