整个网格的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

如果以下是标记

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

我遇到了这个解决方案:

• 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