如何在 ag-grid 的一行中呈现 HTML？

Question

是否有任何 api 或其他东西可以让我在一行中呈现 HTML。我能够绑定简单的 html，但我的 HTML 是动态的并且包含一些角度指令，所以，我如何在 ag-grid 中呈现该 HTML。

Answer 1

将包含 HTML 的单元格添加到特定列的 columnDefs：

cellRenderer: function(params) {
                            return params.value ? params.value : '';
                        }

这让 ag-grid 误以为您是通过自己的函数（从技术上讲就是这样）呈现列。

Answer 2

您可能必须在 ag-grid 中使用“cellRenderer”属性，如下所示

假设您有一个如下定义的 ag-grid html 标记

<ag-grid-angular style="width: 900px; height: 115px;" class="ag-theme-fresh" [rowData]="rowData" [columnDefs]="columnDefs"></ag-grid-angular>

假设您正在尝试根据输入文本数据在其中一列中呈现图像。假设你在component.ts文件中的rowData和columnDef定义如下

public columnDefs = [
    { headerName: 'File Type', field: 'fileType', width: 283 },
    { headerName: 'File Icon', field: 'fileIcon', width: 283, cellRenderer: this.customCellRendererFunc }
];

public rowData = [
    { 'fileType': 'ADOBE', 'fileIcon': 'pdf' },
    { 'fileType': 'WORD', 'fileIcon': 'doc' },
    { 'fileType': 'EXCEL', 'fileIcon': 'xls' }
]

让我们尝试根据文件类型显示文件图标。所以我的 customCellRendererFunc 应该如下

public customCellRendererFunc(params): string {
    let cellContent: string = '';
    try {
        for (let attItr: number = 0; attItr < params.value.length; attItr++) {
            let fileName: string = params.value[attItr].fileIcon;

            fileType = fileIcon;
            if (fileType === 'pdf') {
                imagePath = 'assets/pdf-icon.png';
            } else if (fileType === 'doc' || fileType === 'docx') {
                imagePath = 'assets/doc-icon.png';
            } else if (fileType === 'xls' || fileType === 'xlsx') {
                imagePath = 'assets/xls-icon.png';
            } else {
                imagePath = '';
            }


            cellContent += '<image src="' +
                imagePath + '" title="' + filetype, '"></a> &nbsp;');
        }
    } catch (exception) {

        console.error(exception);
    }

    return cellContent
}

确保在资产文件夹中添加您的图像图标。

Answer 3

为您的自定义 Angular html 使用 cellRenderer

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";

@Component({
    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                    </div>
                </ng-template>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })

export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}

var colDef1 = {
    headerName: "Model Level",
    field: "ModelLevelTimeSeries.Id.Value",
    editable: false,
    cellRenderer: "tooltipRenderer",
    ...
    ....
}

Answer 4

以下过时的解决方案适用于 ag-grid

在网格选项上将属性 angularCompileRows 设置为 true。

这将在行上启用角度编译。

网格选项属性：https://www.ag-grid.com/javascript-grid-properties/index.php

可以在这里找到使用 angularCompileRows 的示例：https://www.ag-grid.com/angular-grid-cell-template/index.php

但请注意，启用 angularCompileRows 会减慢网格速度。如果您有大量数据并使用无限滚动，您可能希望使用 cellRenderer 以返回具有原生事件绑定的原生 dom 元素，并使用 $scope.$apply() 与 angular 重新同步。

*其他版本：*

可以使用 Angular 构建单元格渲染器、单元格编辑器和过滤器。每个部分都解释了如何执行这些操作。

虽然您可以使用 Angular 自定义 ag-Grid，但这不是必需的。网格将愉快地与 Angular 和非 Angular 部分（例如 Angular 中的 cellRenderers 或普通 JavaScript）一起工作。来自https://www.ag-grid.com/angular-more-details/

Answer 5

我们可以使用 CellRenderer 函数为每个单元格创建自定义 HTML 模板，如下所示。我的工具提示下有一个链接，我不想显示我使用了 innerHTML 的锚标记的 href。

{
      //field: 'TOOL_TIP',
      headerName: 'Tooltip',
      filter: 'agTextColumnFilter',
      cellRenderer: params => {
        var a = document.createElement('div');
        a.innerHTML = params.data.TOOL_TIP;
        return a;
      },
      tooltip: (params) => '' + params.value
    }