整个网格的ag-grid自动高度

Question

我找不到调整网格大小以完美适合所有行的好方法。

文档仅指向按％或px调整大小。

因为我希望它根据行调整大小，所以我想出了以下函数。好像我在重新发明轮子，所以也许有更好的方法？

getHeight(type:EntityType) {
    var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
        ? this.Apis[type].api.rowModel.rowsToDisplay.length
        : -1;
    return c > 0
        ? (40+(c*21))+'px' // not perfect but close formula for grid height
        : '86%';
}

必须有一种不那么混乱的方法..

Answer 1

我遇到了这个解决方案：

• https://github.com/ag-grid/ag-grid/issues/801

这个问题有2个答案。

1）如果您使用的是v10.1.0以下的任何版本，那么您可以使用以下CSS来解决问题：

.ag-scrolls {
    height: auto !important;
}

.ag-body {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

.ag-header { 
    position: relative !important;
}

.ag-floating-top {
    position: relative !important;
    top: auto !important;
}

.ag-floating-bottom {
    position: relative !important;
    top: auto !important;
}

.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
    height: auto !important;
}

2) v10.1.0 以上的任何内容，现在都有一个名为“domLayout”的属性。

• https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight

Answer 2

如果以下是标记

<ag-grid-angular
  #agGrid
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  [domLayout]="domLayout"
  [animateRows]="true"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

注意 [domLayout]="domLayout"

将其设置为 this.domLayout = "autoHeight"; 然后你就完成了..

参考：

https://www.ag-grid.com/javascript-grid-width-and-height/

https://next.plnkr.co/edit/Jb1TD7gbA4w7yclU

希望有帮助。

Answer 3

您现在可以通过设置

domLayout='autoHeight'

属性或调用

api.setDomLayout('autoHeight')

来自动化网格高度

参考网格自动高度

Answer 4

数据加载到网格后调用此方法：

determineHeight() {
    setTimeout(() => {
      console.log(this.gridApi.getDisplayedRowCount());
      if (this.gridApi.getDisplayedRowCount() < 20) {
        this.gridApi.setDomLayout("autoHeight");
      }
      else {
        this.gridApi.setDomLayout("normal");
        document.getElementById('myGrid').style.height = "600px";
      }
    }, 500);
  }

Answer 5

在onGridReady函数上添加以下代码以实现自动宽度和自动高度

onGridReady = params => {
   // Following line to make the currently visible columns fit the screen  
   params.api.sizeColumnsToFit();

   // Following line dymanic set height to row on content
   params.api.resetRowHeights();
};

参考 自动高度 自动宽度

Answer 6

您可以使用配置栏中的

ag-grid

功能

AutoHeight = true

。或者如果你想动态计算高度，你应该使用

getRowHeight()

回调并创建 DOM 元素，如

div

和

span

，并在其中添加文本，然后

div

将为它提供

OffsetHeight

您不会看到任何数据/行的裁剪。

希望这有帮助。