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

Question

我之前将我的 AG Grid 包从 18x 升级到 20.0.0(社区版)。在以前的版本中，我只需将 HTML 字符串传递给 colDefs.headerName 属性，它就会在 header 中呈现 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>

我显然想使用最简单的解决方案，它似乎是使用 Cell Renderer(或类似于 https://www.ag-grid.com/javascript-grid-cell-rendering-components/ 中描述的东西)来简单地返回 HTML。使用 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;
}

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

更新

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

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

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

...并像这样在适用的 typescript 组件中实例化:

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

听从 Dominic 的建议，我简单地创建了一个名为 HTMLRenderer 的新类(从 HeaderComp 扩展而来)。我还向名为“headerComponent”的导出类 colDefs 添加了一个新属性，并将 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 类的 typescript 组件中，我传递了适用的值。但是对于 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 中的提供程序，并在您要在其中使用它的每个 typescript 文件中……更不用说您还必须导出该类并使其成为 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,
}}