基于 Ag-Grid 中行的动态高度与垂直滚动？答案

【问题标题】：Dynamic Height based on the rows in Ag-Grid with vertical scroll?基于 Ag-Grid 中行的动态高度与垂直滚动？
【发布时间】：2022-08-20 03:18:25
【问题描述】：

我正在使用Ag-Grid，我想根据行数获得动态高度，但是当它超过网格容器的max-height 时，它应该显示垂直滚动.

当我有几行时，它会缩小以适应行的高度：

但是当我有更多行超过网格容器的max-height 时，它必须显示垂直滚动：像这样

我试图通过使用domLayout=\'autoHeight\' 来实现上述功能，但我注意到在这种情况下，不会发生垂直滚动。

这是我在stackblitz 中的代码

任何想法？

共享代码（stackblitz）
@NarenMurali 我在 stackblitz 中分享我的代码（更新了我的问题）

标签： angular ag-grid

【解决方案1】：

使用 domLayout = 'normal' 或删除 domLayout='autoHeight'。这将自动为您提供您正在寻找的垂直条。

【讨论】：

谢谢您的回答。当我们使用domLayout = 'normal' 时，我们必须设置固定高度。但我需要动态高度

【解决方案2】：

我提出了基于行数计算网格高度的解决方案，然后将其与max-height 进行比较。如果网格的高度超过max-height，那么我将dom布局设置为normal，否则我将dom布局设置为autoHeight

private setDynamicDomLayout(): void {
    // get the rendered rows
    const renderedRowCount: number = this.gridApi.getDisplayedRowCount();
    const maxHeight: number = this.getMaxHeight();

    const size: {
      rowHeight: number;
      headerHeight: number;
    } = {rowHeight: 47, headerHeight:51} 
    // we can use this one in newer version 
    //this.gridApi.getSizesForCurrentTheme();

    const calculatedGridHeight: number = ((renderedRowCount * size.rowHeight)
      + size.headerHeight);

    if (calculatedGridHeight > maxHeight
      && renderedRowCount > 0
      && maxHeight !== 0) {
      this.gridApi.setDomLayout('normal');
      this.dynamicGridHeight = maxHeight;
      this.isNormalDomLayout = true;
      this.gridApi.resetRowHeights();
    }
    else {
      this.gridApi.setDomLayout('autoHeight');
      this.gridApi.resetRowHeights();
      this.isNormalDomLayout = false;
    }

    this.gridApi.sizeColumnsToFit();
  }

  private getMaxHeight(): number {
    const maxHeightStyle: string = document.defaultView
      .getComputedStyle(this.hostElement.nativeElement, '')
      .getPropertyValue('max-height');

    if (maxHeightStyle) {
      const maxHeightnumberAndunit: string[] = maxHeightStyle.split('px');
      if (maxHeightnumberAndunit && maxHeightnumberAndunit.length > 0) {
        return +(maxHeightnumberAndunit[0]);
      }
    }
    return 0;
  }

在我们的 html 中，我们必须像这样设置height：

<ag-grid-angular
  class="ag-theme-balham grid" 
  [style.height]="(isNormalDomLayout) ? dynamicGridHeight + 'px': 'calc(100% - 46px)'"
  [rowData]="rowData" 
  [columnDefs]="columnDefs" 
  [modules]="modules"
  [overlayNoRowsTemplate]="overlayNoRowsTemplate"
  (gridReady)="gridReady($event)"  >
</ag-grid-angular>

这是一个工作示例：Stackblitz

【讨论】：