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()时，它会删除水平滚动。

这是我的gridOptions：

        $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}
];

Answer 2

我遇到了相同/相似的问题。根本问题是我在添加垂直滚动条之前调整了列的大小。要解决此问题，请在添加行后调整大小。即使那样，如果没有超时，它可能也无法工作

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

这可能是与OP所见不同的症状，但可能对其他人有用。

Answer 3

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

gridOptions: {
   suppressHorizontalScroll: true,
   scrollbarWidth: 0
}

您可以在这里查看AgGrid的源代码，了解它们如何处理水平滚动： https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/gridPanel/gridPanel.ts#L872

Answer 4

另一种可能的解决方案，是由同事向我提出的：

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

set.seed(1234)
g = erdos.renyi.game(12, 0.3)
g = add_edges(g, c(1,5, 7,10))
fastgreedy.community(g)
Error in .Call("R_igraph_community_fastgreedy", graph, as.logical(merges),  : 
  At fast_community.c:553 : fast-greedy community finding works 
  only on graphs without multiple edges, Invalid value

g = simplify(g)
fastgreedy.community(g)
IGRAPH clustering fast greedy, groups: 2, mod: 0.26
+ groups:
  $`1`
  [1]  1  3  4  5  9 10 11

  $`2`
  [1]  2  6  7  8 12

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

Answer 5

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

Answer 6

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

无需setTimeout和设置宽度

示例代码：

<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();
}

尽管在ag-grid

6 个答案: