javascript - 角度 ag-grid 调整大小问题

Question

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

Answer 1

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

Answer 2

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

组件.ts：

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

组件.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>

Answer 3

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

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