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

【问题标题】：ag-grid auto height for entire grid整个网格的 ag-grid 自动高度
【发布时间】：2017-06-12 08:19:45
【问题描述】：

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

documentation 仅指向按 % 或 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%';
}

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

【问题讨论】：

这似乎是正确的方法，虽然我不明白你为什么要对api是否存在进行各种检查......过滤后是否需要更改网格高度？还是您只是将其用于初始网格创建？
因为 api 在加载期间会使用网格进行初始化。不能确定 getHeight 在正确初始化后会被调用。
如果你使用onGridReady事件，那么你就不需要检查api是否存在，因为它只有在它存在之后才会触发。
我正在使用 [style.height]="getHeight()" 将此属性绑定到 UI 元素。由 UI 元素在需要时调用此属性。不确定 onGridReady 与它有什么关系
您是否在应用过滤器时随时更改网格的高度？

标签： ag-grid

【解决方案1】：

我遇到了这个解决方案：

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

这个问题有两个答案。

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

【讨论】：

谢谢，这帮助我解决了 autoHeight 在使用固定列时在所有浏览器中的行为不一样的问题

【解决方案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

希望对你有帮助。

【讨论】：

domLayout 不适用于大量行。我有超过 4000 行。关于如何解决这个问题的任何想法？
嗨！嘿，在那里的 plunker，如果您通过单击标题查看过滤器，您会看到过滤器弹出窗口的溢出被隐藏。你知道如何让它们可见吗？
@user8750012 网格文档建议大量行不是网格限制而是浏览器限制：ag-grid.com/angular-data-grid/grid-size

【解决方案3】：

在 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();
};

参考 Auto Height Auto width

【讨论】：

【解决方案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);
  }

【讨论】：

数据加载到网格后调用该方法
该评论作为答案的一部分会更好。

【解决方案5】：

您可以在配置列中使用ag-grid 功能AutoHeight = true。或者如果你想动态计算高度，你应该使用getRowHeight()回调并创建像div和span这样的DOM元素，并在其中添加你的文本，然后div将给它OffsetHeight您不会看到任何数据/行的裁剪。

希望这会有所帮助。

【讨论】：

【解决方案6】：

您现在可以通过设置domLayout='autoHeight' 属性或调用api.setDomLayout('autoHeight') 来自动化网格高度

参考Grid Auto Height

【讨论】：