[英]How to wrap column header in ag-grid using angular
我有一些栏目有四个词,即交易前跟进、交易后跟进,其中一些栏目有三个词。 我尝试使用下面的 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'}},
但我想包装标题。
请查看以下 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
。::ng-deep
更改高度时,内容区域的 z-index 会导致它与标题重叠...所以您不知道::ng-deep
真的有效...在视觉上是...因为标题在内容区域下延伸。 很抱歉,但这将尽可能接近您......调整所有元素,通过DOM操作根据动态标题高度向下移动top
等我担心会变得太丑陋......如果你需要标题高度动态到这一点,这是一个表演障碍......最好探索其他选项作为ag-grid
的替代品。
https://www.ag-grid.com/javascript-grid-column-header/#headerHeight
为了达到预期的结果,请使用以下选项,在该特定列 headerName 的列定义中使用换行标记 - br
{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
Angular 有封装。
但是 ag-grid 并不关心封装。 所以我们需要.ag-header-cell-label
设置.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 组件,请在gridOptions
设置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 组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.