Angular 农业网格调整大小问题

Question

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

Answer 1

类似 this 的内容应该适合您。要点是监听 columnResized 事件，然后检查当前列大小总计是否大于网格宽度，如果是则使用 sizeColumnsToFit 函数。不过要小心这一点； sizeColumnsToFit 函数将尝试保持列的比例，因此您可能更愿意将所有列的大小设置为 10px，然后再调整大小以适合。这主要取决于您的用例以及您希望它的行为方式。

Answer 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>

Answer 3

如果要在行内填充 space，在调整列大小时，我建议覆盖 CSS。在撰写本文时，以下内容有效：

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

Angular 农业网格调整大小问题

Angular ag-grid resize issue

javascript

ag-grid

ag-grid-react

ag-grid-ng2

angular