9

我有一些专栏有四个词，即交易前跟进、交易后跟进，其中一些有三个词。我尝试了下面的 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'}},

但我想包装标题。

4

3 回答 3

8

请查看以下 stackblitz 示例。

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

在全局样式表中，我应用了以下内容……您可以::ng-deep在组件 css 中使用，这是我可以找到的第一个 stackblitz ag-gridfork 并且不是我的，因此没有组件 css 可以使用。

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

下一块是使用属性headerHeight

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

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

  • 原因是内容区域是top在视图渲染时动态定义样式的；通过调整标题高度::ng-deep不会动态地top向下移动内容区域，因为它是由属性计算的 ...如果未定义，则headerHeight默认为内容区域也是。25pxtop25px
  • 更不用说当你用::ng-deep.. 改变高度时，内容区域的 z-index 会导致它与标题重叠，所以你不知道是否::ng-deep真的有效......在视觉上就是......因为标题在内容区。

很抱歉，但这将尽可能接近......调整所有元素，top通过DOM操作根据动态标题高度向下移动等我担心会变得太难看......如果你需要标题高度动态到这一点，这是一个表演终结者……最好探索其他选项来替代ag-grid.

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

于 2018-11-29T21:23:45.023 回答
1

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

{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
于 2018-11-29T21:28:07.310 回答
0

Angular有封装。

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

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

全局 css 应用于所有 ag-grid 组件。如果您只想设置一个 ag-grid 组件.ag-header-cell-label，.ag-header-cell-text请将 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;
    }
}

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

于 2020-08-21T06:25:22.473 回答