Question

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

Answer 1

添加到特定列的columnDefs，其中单元格包含HTML：

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

这种愚蠢的ag-grid认为你是通过自己的功能（技术上是你）来渲染列。

Answer 2

将cellRenderer用于自定义角度html

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 3

以下过时的解决方案适用于ag-grid＆lt; 4。

在网格选项上将属性 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可以减慢网格速度。如果您有大量数据并使用inifite滚动，则可能需要使用cellRenderer以返回具有本机事件绑定的本机dom元素，并使用$ scope。$ apply（）以角度重新同步。

*对于其他版本：*

可以使用Angular构建单元格渲染器，单元格编辑器和过滤器。每个部分都会解释这些问题。

尽管可以将Angular用于ag-Grid的自定义，但这不是必需的。网格将很好地适用于Angular和非Angular部分（例如Angular或普通JavaScript中的cellRenderer）。来自https://www.ag-grid.com/angular-more-details/

Answer 4

您可能必须使用＆＃34; cellRenderer＆＃34; ag-grid中的属性如下

让我们假设你有一个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 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
    }

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

5 个答案: