如何使用角度将列标题包装在 ag-grid 中

Posted 2023-03-28

【中文标题】如何使用角度将列标题包装在 ag-grid 中

【英文标题】：How to wrap column header in ag-grid using angular

【发布时间】：2019-04-27 21:10:03

【问题描述】：

我有一些专栏有四个词，即交易前跟进、交易后跟进，其中一些有三个词。我尝试使用下面的 css 将文本换成多行。

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text
  white-space: normal;
  overflow-wrap: break-word;

html

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

但列标题保持不变。我想将列标题文本包装成多行。有没有办法做到这一点？

注意：我可以使用cellStyle: 'white-space': 'normal' 包装内容

headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: 'white-space': 'normal',

但我想包装标题。

【参考方案1】：

请查看以下 stackblitz 示例。

https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css

在全局样式表中，我应用了以下内容...您可以在组件 css 中使用 ::ng-deep，这是我可以找到的第一个使用 ag-grid fork 的 stackblitz，它不是我的，所以没有组件 css使用。

.ag-header-cell-label .ag-header-cell-text 
  white-space: normal !important;

接下来就是使用属性headerHeight

this.gridOptions = <GridOptions>
          headerHeight:75,

不幸的是，这部分是不可避免的......它也不允许您根据自动换行要求使标题高度动态化。

原因是在渲染视图时，内容区域是动态定义为top样式的；通过::ng-deep 调整标题高度不会动态 将内容区域的top 向下移动，因为它是由 headerHeight 属性...如果未定义，则默认为 25px，因此内容区域的 top 也是 25px。 不要 提到内容区域的 z-index 导致它与 当您使用 ::ng-deep.. 更改高度时的标题。所以您不知道 ::ng-deep 是否真的有效...从视觉上看就是...因为标题在内容区域下方延伸。

很抱歉，但这将尽可能接近...调整所有元素，根据动态标题高度通过 DOM 操作向下移动 top 等，我担心会变得太丑陋...如果您需要动态的标题高度，这是一个显示停止器......最好探索其他选项作为ag-grid的替代品。

https://www.ag-grid.com/javascript-grid-column-header/#headerHeight

【参考方案2】：

要达到预期结果，请使用以下选项，即在该特定列 headerName 的列定义中使用换行标记 - br

headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: 'white-space': 'normal'

【讨论】：

headerName 中的 HTML 不适用于最新版本的 ag-grid

【参考方案3】：

Angular 有封装。

但是 ag-grid 不关心封装。所以我们需要全局设置.ag-header-cell-label和.ag-header-cell-text。

我们在Component属性中设置ViewEncapsulation.None并写css或者scss，这样可以全局设置css。

全局 css 应用于所有 ag-grid 组件。如果只想设置.ag-header-cell-label和.ag-header-cell-text一个ag-grid组件，设置headerClass为gridOptions

this.gridOptions = 
  defaultColDef: 
    headerClass: 'myfunc-default-header'
  ,
  headerHeight:75
;

然后像这样写scss文件。

.myfunc-default-header 
    .ag-header-cell-label .ag-header-cell-text 
      white-space: normal !important;
    

这只能在my-func-deafult-header 中应用.ag-header-cell-label 和.ag-header-cell-text。 所以我们只能应用一个 ag-grid 组件。