在 AG 网格列 Header 中呈现 HTML（社区 v20.0.0 +）

Question

我之前将我的 AG Grid 包从 18x 升级到 20.0.0（社区版）。在以前的版本中，我可以简单地将 HTML 字符串传递给 colDefs.headerName 属性并且它会在中呈现 HTML header.

此新版本默认将 header 和单元格数据呈现为字符串。所以现在 header 列呈现如下：

<span ref="eText" class="ag-header-cell-text" role="columnheader">
   "<span id="header-span-1" style="visibility: visible; position: static; display: inline-block; padding-bottom: 5px;">Some Text</span>"
</span>

我显然想使用最简单的解决方案，它似乎是使用 Cell Renderer（或类似 https://www.ag-grid.com/javascript-grid-cell-rendering-components/ 中描述的东西），它只是 returns HTML。使用 header 名称属性如何实现以下目标？

colDef.cellRenderer = function(params) {
    var html = '<span id="header-span-1" style="visibility: visible; position: static; display: inline-block; padding-bottom: 5px;">Some Text</span>';
    return html;
}

如果不能，请有人提供一个工作示例，说明如何使用 header 组件来满足我的具体需求？我看到了我可以在哪里定义模板，但考虑到我只需要上面描述的内容，这似乎有点过分了。我四处搜索，似乎找不到示例。

更新

多亏了 Dominic 在下面的回复，我才能够想出一个不需要过多（和不必要的）努力的解决方案。同样，对于我的特定用例，我对从服务器返回的列数据的控制有限，但需要有一种格式化它的方法——超出 AG Grid 的 formatter 提供的功能和 getter 属性。

在我的项目中，列定义是通过 class...

提供的

export class colDefs {
    constructor(
        public headerName: any,
        public field: any,
        ...
    ) { } 
}

...并在适用的打字稿组件中实例化如下：

for (var i = 0; i < arr.length; i++) {
  ... // Do stuff
  this.columnDefs[i] = new colDefs(headerName, field, ...);
  ... // Do stuff
 }

采纳 Dominic 的建议，我简单地创建了一个名为 HTMLRenderer 的新 class（从 HeaderComp 扩展而来).我还向导出的 class colDefs 添加了一个名为 "headerComponent" 的新属性，并将 HTMLRenderer 作为其值传递。

import { HeaderComp } from 'ag-grid-community/dist/lib/headerRendering/header/headerComp';
class HTMLRenderer extends HeaderComp {
    init(params) { 
    super.init(params);
    // @ts-ignore: Unreachable code error
    this.eGui.querySelector('[ref="eText"]').innerHTML = params.displayName; 
  }
}

export class colDefs {
    constructor(
        public headerName: any,
        public headerComponent: any = HTMLRenderer,
        public field: any,
        ...
    ) { } 
}

请注意 // @ts-ignore: Unreachable code error 注释。这是需要的。否则，如果您使用的是 typescript，它会抛出错误并无法编译。

最后，在实例化 colDefs class 的打字稿组件中，我传递了适用的值。但是对于 headerComponent 属性，您必须传递 undefined，这基本上表示我们要使用导出的 class:

中定义的默认值

for (var i = 0; i < arr.length; i++) {
  ... // Do stuff
  this.columnDefs[i] = new colDefs(headerName, undefined, field, ...);
  ... // Do stuff
 }

这为我做到了，没有为 header 中的一小串 HTML 创建完整的 header 组件所涉及的矫枉过正。我的 AG 网格列 header 中的 HTML 现在正在渲染！

请注意，实际上还有另一种方法可以实现此目的，即在其自己的 class 文件中隔离 HTML 渲染器。您最终必须在 app.module 中将其注册为提供程序，并且在您要在其中使用它的每个打字稿文件中……更不用说您还必须导出 class 并使其成为可注射剂。

对我来说，对于我在 headers.

专栏中的一点点 HTML 来说，这种方法似乎工作量太大了

Answer 1

如果您不想创建渲染组件，最简单的方法就是应用 css class:

gridOptions.columnDefs = [
    {
        headerName: 'MyCol',
        headerClass: 'col-css-class',
        ...
    };

如果您需要更复杂的东西，没有渲染组件将无法完成。

Answer 2

可悲的是，他们决定 HTML 在 header 中没有用，或者不小心破坏了它，所以你甚至不能使用 ° 或 Δ 之类的单位。更糟糕的是 header 渲染器周围的架构很糟糕——为了自定义它，他们希望你也接管排序、过滤、菜单等的处理。奇怪的是，这将是他们的第一个假设，但无论如何...... . 至少他们应该像处理细胞一样提供 innerRenderer。

他们唯一导出的东西是 headerRootComp，这似乎完全没用。为了不接管提到的排序等所有责任，您必须获得他们用来呈现默认值 header 的组件。请注意，这不是正式导出的，可能会更改：

import { HeaderComp } from 'ag-grid-community/dist/lib/headerRendering/header/headerComp';

class HeaderHTMLRenderer extends HeaderComp {
  init(params) {
    super.init(params);
    this.eGui.querySelector('[ref="eText"]').innerHTML = params.displayName;
  }
}

将其作为默认渲染器传入：

defaultColDef={{
  headerComponent: HeaderHTMLRenderer,
}}

Answer 3

此功能在 AG Grid 27 中已更改，现在您必须使用渲染组件来显示 HTML。（不幸的是）

在 AG 网格列 Header 中呈现 HTML（社区 v20.0.0 +）

Rendering HTML in AG Grid Column Header (Community v20.0.0 +)

javascript

ag-grid

angular5