如何增加 ag-grid 中列标题的高度？答案

【问题标题】：How to increase the height of column header in ag-grid?如何增加 ag-grid 中列标题的高度？
【发布时间】：2016-06-22 05:32:32
【问题描述】：

有没有办法像我们增加宽度一样增加列标题的高度。我需要这个，因为我在标题中嵌入了一个饼图，并且它是绑定的，但列太短而无法完全显示。有没有办法增加列标题的大小。

【问题讨论】：

标签： javascript jquery angularjs ag-grid

【解决方案1】：

你在 gridOptions 中有一个属性 headerHeight

查看https://www.ag-grid.com/javascript-grid-properties/index.php

【讨论】：

我有，对我没有影响：/
那是第 3 版的 ag-grid，我不知道它现在应该如何工作。

【解决方案2】：

您也可以使用grid api根据标题内容添加运行时：

onGridReady(params) {
    this.gridApi = params.api;
    this.gridApi.setHeaderHeight(<set your header height in pixel>);
}

将onGridReady()函数绑定到gridReady事件如下：

<ag-grid-angular(gridReady)="onGridReady($event)"> </ag-grid-angular>

【讨论】：

【解决方案3】：

Header Height 属性也可以直接在网格组件上以像素为单位设置，如下所示：

<ag-grid-vue style="width: 100%;height: 47vh;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
    headerHeight="50">
</ag-grid-vue>

【讨论】：

【解决方案4】：

检查列标题文档https://www.ag-grid.com/javascript-grid-column-header/

两个选项

1- 可用于改变不同高度的属性

<ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [headerHeight]="headerHeight"
    [groupHeaderHeight]="groupHeaderHeight"
    [floatingFiltersHeight]="floatingFiltersHeight"
    [pivotGroupHeaderHeight]="pivotGroupHeaderHeight"
    [pivotHeaderHeight]="pivotHeaderHeight"
></ag-grid-angular>

可以从 API 调用的 2-setter 方法

<ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
 ></ag-grid-angular>

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

setHeaderHeight(value) {
    this.gridApi.setHeaderHeight(value);
    setIdText('headerHeight', value);
}

setGroupHeaderHeight(value) {
    this.gridApi.setGroupHeaderHeight(value);
    setIdText('groupHeaderHeight', value);
}

setFloatingFiltersHeight(value) {
    this.gridApi.setFloatingFiltersHeight(value);
    setIdText('floatingFiltersHeight', value);
}

setPivotGroupHeaderHeight(value) {
    this.gridApi.setPivotGroupHeaderHeight(value);
    setIdText('pivotGroupHeaderHeight', value);
}

setPivotHeaderHeight(value) {
    this.gridApi.setPivotHeaderHeight(value);
    setIdText('pivotHeaderHeight', value);
}

【讨论】：