时间戳

首页 > 解决方案 > 最大化浏览器时自动调整 ag-grid 中的列

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

问题描述

我在 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 可以正常工作以适合网格的整个宽度的列，但在最大化它时不能。

标签： angularag-gridag-grid-angular

解决方案

您可以通过将您的 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>

您可能已经注意到我们已将overflowCSS 属性设置为hidden. 这是因为 ag-grid文档指出

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

这是一个演示。

推荐阅读