角度 ag-grid 调整大小问题答案

【问题标题】：Angular ag-grid resize issue角度 ag-grid 调整大小问题
【发布时间】：2018-06-02 21:08:01
【问题描述】：

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

【问题讨论】：

标签： javascript angular ag-grid ag-grid-react ag-grid-ng2

【解决方案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;}

【讨论】：