在 AG Grid 列标题中呈现 HTML (Community v20.0.0 +)

Question

我之前将我的 AG Grid 软件包从 18x 升级到了 20.0.0（社区版）。在之前的版本中，我只需将 HTML 字符串传递给 colDefs.headerName 属性，它就会在标题中呈现 HTML。

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

<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>

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

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;
}

如果不能，请有人提供一个工作示例，说明如何将标头组件用于我的具体目标？我看到了可以定义模板的地方，但考虑到我只需要上面描述的内容，这似乎有点过头了。我四处搜索，似乎找不到示例。

更新

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

在我的项目中，列定义是通过类提供的...

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 的新类（扩展自 HeaderComp）。我还向导出的类 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 类的打字稿组件中，我传递了适用的值。但是对于 headerComponent 属性，您必须传递 undefined，这基本上表示我们要使用导出类中定义的默认值：

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

这为我做了这件事，没有为标题中的一小段 HTML 创建完整的标题组件所涉及的过度杀伤力。我的 AG Grid 列标题中的 HTML 现在正在呈现！

请注意，实际上还有另一种方法可以实现这一点，即在其自己的类文件中隔离 HTMLRenderer。您最终必须在 app.module 中将其注册为提供程序，并在您要在其中使用它的每个打字稿文件中...更不用说您还必须导出该类并使其成为 Injectable。

对我来说，这种方法对于我在列标题中的一点点 HTML 来说工作量太大了。

Answer 1

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

他们唯一导出的是headerRootComp，这似乎完全没用。为了不承担提到的排序等的所有责任，您必须获取他们用来呈现默认标题的组件。请注意，这不是正式导出的，可能会发生变化：

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 2

如果你不想创建渲染组件，最简单的方法是应用一个 css 类：

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

如果你需要更复杂的东西，没有渲染组件你将无法做到。

Answer 3

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