ag-grid 表格溢出屏幕

Posted 2023-03-28

【中文标题】ag-grid 表格溢出屏幕

【英文标题】：ag-grid table spilling out of screen

【发布时间】：2020-06-22 04:50:23

【问题描述】：

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

这是我的代码：

<div class="row text-center" style="justify-content: center;">
  <div>
    <ag-grid-angular
      style="font-size: 15px; width: 100%;"
      class="ag-theme-balham"
      [rowData]="data"
      [columnDefs][="columnDefs"
      [defaultColDef]="defaultColumnDefs"
      (gridready)="onGridReady($event)"
    </ag-grid-angular>
  </div>
</div>

基本上，我想要以下两个：

要固定并启用水平滚动的 ag-grid 表格的宽度 或者 ag-grid 表的宽度可以根据列数增加。但是，它不应溢出页面。

另外，我希望表格也集中在页面中间。 谢谢！

【问题讨论】：

你能在 plunk 上重现你的情况吗？提供解决方案会更容易，因为这里的问题对于您应用的 CSS 非常主观。

我根本没有应用任何 CSS。

【参考方案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，这样会缩小所有列以适应固定宽度。

【讨论】：

我尝试应用您建议的更改 - onGridReady() 和 onGridSizeChanged()，包括 display: flex;并将 width: 100% 添加到父 div。但我也取出了父 div 中的 class="row text-center" 。有非常细微的变化，但表格溢出页面的行为仍然存在。不知何故，我无法让滚动条出现或工作。

我不认为将 width: 100% 添加到父 div 会解决它，尝试设置一个硬值，如 width: 1000px;