最大化浏览器时自动调整 ag-grid 中的列

Question

我在 Angular 上有以下用于农业网格的代码：

.ts 文件：

constructor(private myService: MyService) {
    this.defaultColDef = { resizable: true };
    this.getRowNodeId = data => data.id;
   }

  columnDefs = [
    {headerName: 'Edit', width: 55, resizable: false, cellRendererFramework: EditButtonComponent, cellRendererParams: { inRouterLink: 'editProject/' } },
    {headerName: 'Column 1', field: 'field_1', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 2', field: 'field_2', sortable: true, filter: true, unSortIcon: true  },
    {headerName: 'Column 3', field: 'field_3', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 4', field: 'field_4', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 5', field: 'field_5', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 6', field: 'field_6', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 7', field: 'field_7', sortable: true, filter: true, unSortIcon: true },
  ];


onGridReady(params) {
    params.api.sizeColumnsToFit();
  }

.Html 文件:

 <ag-grid-angular
          id="gridProject"
          style="width: 90%;"
          class="ag-theme-blue"
          domLayout='autoHeight'
          [rowData]="rowData" 
          [columnDefs]="columnDefs"
          [suppressMenuHide]="true"
          [defaultColDef]="defaultColDef"
          [getRowNodeId]="getRowNodeId" 
          (gridReady)="onGridReady($event)"
          alwaysShowVerticalScroll="false"
          suppressHorizontalScroll="false"
          rowSelection='single'>
      </ag-grid-angular>

当浏览器在 Maximaze 模式下第一次午餐时，所有列都呈现正常。

但是，当浏览器处于最小化模式并单击最大化按钮时，浏览器将变为最大化，但列宽仍与最小化模式相同。

如何在最大化浏览器时让列自动调整大小？

顺便说一句，sizeColumnsToFit 可以很好地适应网格的整个宽度的列，但在最大化它时却不行。

Answer 1

您可以通过将 ag-grid 组件放入 Flexbox 容器中来实现上述目的。这将允许您的网格根据浏览器或 window 以及随后网格的父容器的任何更改相应地调整大小。

<div style="display: flex; flex-direction: row">
  <div style=" overflow: hidden; flex-grow: 1">
    <ag-grid-angular
      id="gridProject"
      style="width: 90%;"
      class="ag-theme-blue"
      domLayout='autoHeight'
      [rowData]="rowData" 
      [columnDefs]="columnDefs"
      [suppressMenuHide]="true"
      [defaultColDef]="defaultColDef"
      [getRowNodeId]="getRowNodeId" 
      (gridReady)="onGridReady($event)"
      alwaysShowVerticalScroll="false"
      suppressHorizontalScroll="false"
      rowSelection='single'>
    </ag-grid-angular>  
  </div>
</div>

您可能已经注意到我们已将 overflow CSS 属性设置为 hidden。这是因为 ag-grid documentation 指出

By default, the grid runs a timer that watches its container size and resizes the UI accordingly. This might interfere with the default behavior of elements with display: flex set. The simple workaround is to add overflow: hidden to the grid element parent.

这里是demo.

最大化浏览器时自动调整 ag-grid 中的列

autosize columns in ag-grid when Maximizing browser

ag-grid

angular

ag-grid-angular