如何使用 angular 在 ag-grid 中换行列 header

Question

我有一些栏目有四个词，即交易前跟进，Post 交易跟进，其中一些栏目有三个词。我尝试了以下 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>

但 header 列保持不变。我想将列 header 文本换行到多行。有办法吗？

注意： 我可以使用 cellStyle: {'white-space': 'normal'}

来包装内容

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

但我想包装 header。

Answer 1

请查看以下 stackblitz 示例。

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

在全局样式 sheet 中，我应用了以下内容...您可以在组件 css 中使用 ::ng-deep，这是我能找到的第一个使用 [=13] 的 stackblitz =] fork 并且不是我的，所以没有组件 css 可以使用。

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

下一块是用属性headerHeight

this.gridOptions = <GridOptions>{
          headerHeight:75,

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

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

抱歉这么说，但这将尽可能接近...调整所有元素，根据动态 header 高度通过 DOM 向下移动 top 等我担心操纵会变得太难看......如果你需要 header 高度动态到这一点，这是一个表演障碍......最好探索其他选项作为 [=13= 的替代品].

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

Answer 2

为了达到预期的结果，请使用以下选项来使用换行符标记 - br 在该特定列 headerName

的列定义中

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

Answer 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 组件。

如何使用 angular 在 ag-grid 中换行列 header

How to wrap column header in ag-grid using angular

javascript

ag-grid

angular

ag-grid-angular