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

Posted 2023-03-28

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

【英文标题】：Rendering HTML in AG Grid Column Header (Community v20.0.0 +)

【发布时间】：2019-08-12 22:21:58

【问题描述】：

我之前将我的 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 来说工作量太大了。

【问题讨论】：

你需要写一个头部渲染器。但是，如果您的 HTML 字符串很简单并且主要关注格式，您可以基于 CSS 类和列的 headerClass 字段编写一个更简单的解决方案。

【参考方案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,

【讨论】：

感谢您的回复，多米尼克。以“this.eGui”开头的行抛出错误：[ts] 属性“eGui”是私有的，只能在“组件”类中访问。

代码本身没有问题，但是 Typescript，我对 TS 不熟悉，但是当它阻止我做我知道很好的事情时，我确实觉得很沮丧，所以我放弃了它。尝试为它添加 @ts-ignore 评论

谢谢你，多米尼克！你帮我解决了问题。我已经用我为解决它所采取的步骤更新了我的原始问题，并尝试提供尽可能多的反馈，希望它可以帮助其他人。

非常感谢，因为我也遇到了同样的问题，现在我已经解决了，但我仍然遇到问题...我有一个与 ag-grid 表关联的快照测试现在正在失败...我收到以下错误 Object prototype may only be an Object or null: undefined at setPrototypeOf () for this line import HeaderComp from 'ag-grid-community/dist/lib/ headerRendering/header/headerComp';

【参考方案2】：

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

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

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

【参考方案3】：

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