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

如果不能，请问有人提供一个有效的示例，说明如何将标头组件用于我要做什么？我看到了可以在其中定义模板的位置，但是考虑到我只需要上面描述的内容，这似乎有点过头了。我到处搜寻，似乎找不到范例。

更新

由于下面的多米尼克（Dominic）的回应，我得以提出一种不需要过多（和不必要）努力的解决方案。同样，对于我的特定用例，我对从服务器返回的列数据的控制有限，但需要一种格式化它的方式-除了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：无法访问的代码错误注释。这是必需的。否则，如果您使用的是打字稿，它将引发错误并且无法编译。

最后，在实例化 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',
        ...
    };

如果您需要更复杂的功能，那么没有渲染组件就无法做到。

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

2 个答案: