[英]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.