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

Question

我在 Angular 上为 ag-grid 提供了以下代码：

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

当浏览器第一次在最大化模式下午餐时，所有的列都可以渲染。

但是，当浏览器在最小化模式下午餐然后单击最大化按钮时，浏览器会获得最大化，但列宽仍与最小化模式相同。

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

顺便说一句，sizeColumnsToFit 可以正常工作以适应网格的整个宽度的列，但在最大化它时不能。

Answer 1

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

<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 声明

默认情况下，网格会运行一个计时器来监视其容器大小和 相应地调整 UI 的大小。这可能会干扰默认设置 显示元素的行为：flex 集。简单的解决方法是 添加溢出：隐藏到网格元素父级。

这是demo。