代码之家 › 专栏 › 技术社区 › UI_Dev

如何使用角度在AG网格中包装列标题

ag-grid-angular ag-grid angular javascript

UI_Dev · 技术社区 · 7 年前

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

但我想把头条包起来。

2 回复 | 直到 7 年前

Marshal 7 年前

请查看以下StackBlitz示例。

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

在全局样式表中,我应用了以下内容…你可以用 ::ng-deep 在你的组件css中,这是我能找到的第一个stackblitz ag-grid 因为fork不是我的,所以没有要使用的组件css。

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

下一步是使用属性 headerHeight

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

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

为什么内容区域是用 top 在呈现视图时动态设置样式;通过 NG深 不会动态移位 顶部 内容区域向下的,因为它由 头部高度 财产…如果未定义,默认值为 25px 所以 顶部 内容区也是 25PX .
不到提到内容区域的z索引导致它与更改高度时的标题 NG深 …所以你不知道 :ng深 真的工作了…视觉上就是…当标题在内容区域下延伸时。

不好意思这么说,但这将是你能得到的最接近的…调整所有元件,向下移动 顶部 基于动态头部高度通过DOM操作,我担心会变得太难看…如果你需要头部高度动态到这个点,这是一个显示阻止…最好是探索其他的选择来替代 银栅 .

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

Naga Sai A 7 年前

要达到预期的结果,请使用下面使用换行标记的选项- 溴在该特定列headername的列定义中

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

推荐文章

Aessandro · Ag Grid React默认取消选择过滤器选项

2 年前

Z.Mg · 如何在AG网格Angular中显示父行及其展开的子行周围的边界?

2 年前

SEED · 使用订阅时更新AG网格中的行

2 年前

Pravin · Angular Ag Grid客户端分页与服务器端分页

2 年前

sheep14 · 在ag网格中是否有getcolumnsNOT display方法?

3 年前

anoach · Dash AGGrid使用转置的pandas数据帧添加删除列

3 年前

April Papajohn · 为什么从rowData ref中删除一行后,ag-grid并不总是更新?

3 年前

Kelley127 · AG Grid从上下文菜单以大文本打开

3 年前

Oam Psy · AgGrid无法恢复原始网格数据

3 年前

Sebastian Damon B · 将数据从烧瓶路由传递到AG网格表

3 年前