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

Question

在我开发的带有列分组的网格中，调整列大小时在末尾出现白色空白。有任何建议吗？[！[在此处输入图片描述] [1]] [1]

Answer 1

您可以在sizeColumnsToFit()事件发生后致电columnRowGroupChanged：

  

columnRowGroupChanged已添加或删除行组列。

.html模板事件绑定

(columnRowGroupChanged)="groupChanged($event)"

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

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

处理

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

DEMO

Answer 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
              }]