Question

我有一个ag-grid表，它根据一些按钮动态地更改其大小。表格中将添加或删除更多或更少的列。但是，随着列数的增加，表最终将溢出到页面外，无法看到。我试图应用水平滚动，但无济于事。

这是我的代码：

#price for one option for the respective arrival and departure
def online_booking_option_price(option, arrival, departure)
[...]
end

#price for one option for the respective arrival and departure incl. quatity
def online_booking_option_price(option, arrival, departure, quantity)
[...]
end
``

基本上，我需要以下两个选项之一：

固定的ag-grid表格的宽度并启用水平滚动
或者，ag-grid表的宽度可以增加，具体取决于列数。但是，它不应溢出到页面之外。

而且，我也希望表也集中在页面中间。谢谢！

Answer 1

您可以尝试：

<ag-grid-angular
      style="font-size: 15px; width: 100%;"
      class="ag-theme-balham"
      [rowData]="data"
      [columnDefs][="columnDefs"
      [defaultColDef]="defaultColumnDefs"
      (gridReady)="onGridReady($event)"
      (gridSizeChanged)="onGridSizeChanged($event)
</ag-grid-angular>

onGridReady(params: GridReadyEvent) {
  params.api.sizeColumnsToFit();
}

onGridSizeChanged(params: GridSizeChangedEvent) {
  params.api.sizeColumnsToFit();
}

我看到您的网格采用100％的宽度，请确保父div的宽度固定。要使网格居中，我看到您已经完成了justify-content: center;的操作，但是请确保该div上有display: flex;。

gridSizeChanged将在每次网格大小更改时被调用，然后我们调用sizeColumnsToFit，这样将缩小所有列以适合固定宽度。

农业网格表溢出屏幕

1 个答案: