尽管在 ag-grid 中使用了 sizeColumnsToFit，但不必要的水平滚动条出现了

Question

我已经将我的 ag-grid 版本从 7.2.0 升级到 v14.2.0。当我将 sizeColumnsToFit() api 与 onGridReady 或 onGridSizeChanged 事件一起使用时，它可以工作，但它保留了不必要的水平滚动，可能是由于网格宽度计算错误。

这个问题（？）也可以在 ag-grid 的官方示例中看到，

https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1

对于以前的版本，这在没有任何水平滚动的情况下完全可以正常工作。

当我手动调用 $scope.gridOptions.api.sizeColumnsToFit() 时，它会删除水平滚动条。

这是我的网格选项：

        $scope.ag_grid_options = {
            headerHeight: 50,
            rowHeight: 50,
            //rowModelType: 'virtual',
            rowModelType: 'infinite',
            rowBuffer: 0,
            cacheOverflowSize: 1,
            infiniteInitialRowCount: 1,
            cacheBlockSize: 50,
            paginationPageSize: 50,
            //virtualPaging: true,
            enableServerSideSorting: true,
            enableSorting: false,
            enableColResize: true,
            angularCompileRows: true,
            onGridSizeChanged: function (param) {
                $scope.ag_grid_options.api.doLayout();
                $scope.ag_grid_options.api.sizeColumnsToFit();
            },
            columnDefs: grid_column_definitions
        };

我知道我可以使用属性 suppressHorizontalScroll= true。但我不想使用它，因为有了它，当用户手动调整列大小时滚动将不会出现。

Answer 1

这不是错误，而是一项功能。如果所有列的总宽度数大于包装器，则会出现滚动条。您应该更改 headerFields 的 minWidth / maxWidth 属性就可以了。

var columnDefs = [
  {headerName: 'Athlete', field: 'athlete', minWidth: 150},
  {headerName: 'Age', field: 'age', minWidth: 50},
  {headerName: 'Country', field: 'country', minWidth: 120},
  {headerName: 'Year', field: 'year', minWidth: 90},
  {headerName: 'Date', field: 'date', minWidth: 110}
];

旁注： 如果网格数据由于范围更改或未初始定义而更改，您需要在新的摘要圈中调用 sizeColumnsToFit()，例如 setTimeout(() => {this.gridApi.sizeColumnsToFit();});。

Answer 2

另一种可能的解决方案，刚刚由一位同事介绍给我：

在列定义中，您可以通过计算客户端宽度，然后将其除以列数来设置每列的宽度：

width: (document.documentElement.clientWidth - 40) / (this.numColumns)

在这种情况下，40 是网格两侧的填充之和（20 左 + 20 右）。

Answer 3

我运行进入了same/similar问题。根本问题是我在添加垂直滚动条之前 调整了列的大小。要解决此问题，请在添加行后调整大小。即使这样，如果没有超时也可能无法工作

this.http.get('someEndPoint').subscribe(rows => { this.rowData = rows; setTimeout(()=>{params.api.sizeColumnsToFit()}, 50); });

这可能与 OP 看到的症状不同，但可能对其他人有用。

Answer 4

有点晚了，但对于那些正在寻找完全禁用水平滚动或调整水平滚动高度（甚至将它们设置为 0）的人来说。您还必须设置 scrollbarWidth.

gridOptions: {
   suppressHorizontalScroll: true,
   scrollbarWidth: 0
}

您可以在此处查看 AgGrid 的源代码，了解它们如何处理水平滚动： https://github.com/ag-grid/ag-grid/blob/996ffcdcb828ffa3448d57fa919feb9eb465df15/community-modules/core/src/ts/gridPanel/gridPanel.ts#L889

Answer 5

此问题在 v22 中仍然存在，上述解决方案似乎并不理想。我找到的最佳解决方法是在 onModelUpdated 事件处理程序中调用 sizeColumnsToFit。参见 https://github.com/ag-grid/ag-grid/issues/2310。

Answer 6

对我来说最好的解决方案是在 modelUpdated 事件上调用 api.sizeColumnsToFit()

无需设置超时和设置宽度

示例代码：

<ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (modelUpdated)="onModelUpdated()"
>
</ag-grid-angular>

在 onModelUpdated() 中应该调用 api.sizeColumnsToFit

private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onModelUpdated(): void {
  this.sizeToFit();
}

sizeToFit(): void {
  this.gridApi.sizeColumnsToFit();
}

Answer 7

对于滚动条中出现的大滚动条，我们需要利用grid上的onGridReady事件，它给gridApi作为参数回调函数并使用 sizeColumnsToFit 函数来保持调整大小的工作。

如果滚动长度小，是因为垂直侧边栏引入了宽度（由于网格垂直高度的变化）。

我的解决方案：

找到导致出现垂直滚动条的元素选择器。
它将有 overflow/overflow-y 到“auto/scroll”。将 overflow/overflow-y 设置为“覆盖”将解决您的问题。

这对我来说无处不在。

Answer 8

此方法适用于 Angular 2+，在 firstDataRendered 事件中使用 sizeColumnsToFit() 而不是 gridReady 或 gridSizeChanged 事件，它将删除水平滚动条。

 <ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)">
 </ag-grid-angular>

private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onFirstDataRendered(): void {
  this.gridApi.sizeColumnsToFit();
}

尽管在 ag-grid 中使用了 sizeColumnsToFit，但不必要的水平滚动条出现了

unnecessary horizontal scroll bar coming inspite of using sizeColumnsToFit in ag-grid

javascript

angularjs

ag-grid