角度 ag-grid 调整大小问题

Posted 2023-02-18

【中文标题】角度 ag-grid 调整大小问题

【英文标题】：Angular ag-grid resize issue

【发布时间】：2018-06-02 21:08:01

【问题描述】：

我想启用列大小调整，但同时我想避免用户将任何列调整到网格左侧的大小，并且在最后一列的右侧出现空白区域。 我在下面附上了一张图片来解释我想要实现的目标。

【参考方案1】：

像this 这样的东西应该适合你。重点是监听columnResized事件，然后检查当前列总大小是否大于网格宽度，如果是则使用sizeColumnsToFit函数。不过要小心这一点； sizeColumnsToFit 函数将尝试保持列的比率，因此您可能希望将所有列的大小调整为 10 像素，然后调整大小以适应。这主要取决于您的用例以及您希望它的行为方式。

【参考方案2】：

这个问题可以通过使用columnResized事件和gridApi的sizeColumnsToFit()方法来解决。

component.ts:

onColumnResized(params) 
  if (params.source === 'uiColumnDragged' && params.finished) 
    this.gridApi.sizeColumnsToFit();
  

component.html:

<ag-grid-angular 
  #agGrid
  style="width: 100%; height: 100%;"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  (columnResized)="onColumnResized($event)">
</ag-grid-angular>

【参考方案3】：

如果您想在调整列大小时填充行内的空间，那么我建议您覆盖 CSS。在撰写本文时，以下工作：

.ag-center-cols-container  width: 100% !important;