Angular ag-grid 调整大小问题

Question

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

Answer 1

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

Answer 2

这个问题可以通过使用columnResized事件和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;}