Javascript 如何在 ag-grid 的一行内呈现 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35883762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render the HTML inside a row in ag-grid?
提问by Sumit Khanduri
Is there any api or something using which I can render HTML inside a row. I'am able to bind simple html but my HTML is dynamic and contains some angular directives so, how can I render that HTML in ag-grid.
是否有任何可以在一行中呈现 HTML 的 api 或其他东西。我能够绑定简单的 html，但我的 HTML 是动态的并且包含一些角度指令，因此，我如何在 ag-grid 中呈现该 HTML。
回答by Tanel J?e??r
Add to the columnDefs of specific column which cells contain HTML:
将包含 HTML 的单元格添加到特定列的 columnDefs：
cellRenderer: function(params) {
return params.value ? params.value : '';
}
This fools ag-grid to think you are rendering column by your own function (which you technically are).
这让 ag-grid 认为您正在通过自己的函数（技术上是这样）渲染列。
回答by koolhuman
use cellRenderer for your custom angular html
将 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",
...
....
}
回答by Walfrat
The following outdated solution works for ag-grid < 4.
以下过时的解决方案适用于 ag-grid < 4。
Set the property angularCompileRowsto true on grid options.
在网格选项上将属性angularCompileRows设置为 true。
This will enable angular compilation on the rows.
这将在行上启用角度编译。
Grid Options properties : https://www.ag-grid.com/javascript-grid-properties/index.php
网格选项属性：https: //www.ag-grid.com/javascript-grid-properties/index.php
Sample of using angularCompileRows can be found here : https://www.ag-grid.com/angular-grid-cell-template/index.php
可以在此处找到使用 angularCompileRows 的示例：https://www.ag-grid.com/angular-grid-cell-template/index.php
However be warry that enabling angularCompileRows slow down the grid. If you have a huge amount of data and use the inifite scroll youi may want to use a cellRenderer in order to return a native dom element with native event binding and use $scope.$apply() to resync with angular.
但是请注意启用 angularCompileRows 会减慢网格速度。如果您有大量数据并使用 inifite 滚动，您可能想要使用 cellRenderer 以返回具有本机事件绑定的本机 dom 元素，并使用 $scope.$apply() 与 angular 重新同步。
*For the others version : *
*对于其他版本：*
It is possible to build cell renderers, cell editors and filters using Angular. Doing each of these is explained in the section on each.
Although it is possible to use Angular for your customisations of ag-Grid, it is not necessary. The grid will happily work with both Angular and non-Angular portions (eg cellRenderers in Angular or normal JavaScript). From https://www.ag-grid.com/angular-more-details/
可以使用 Angular 构建单元渲染器、单元编辑器和过滤器。在每个部分中解释了如何执行这些操作。
虽然可以使用 Angular 来定制 ag-Grid，但这不是必需的。网格将愉快地与 Angular 和非 Angular 部分（例如 Angular 中的 cellRenderers 或普通 JavaScript）一起使用。来自https://www.ag-grid.com/angular-more-details/
回答by kathikeyan A
You may have to use "cellRenderer" property in ag-grid as follows
您可能必须在 ag-grid 中使用“cellRenderer”属性，如下所示
Lets assume you have a ag-grid html markup defined as follows
假设您有一个定义如下的 ag-grid html 标记
<ag-grid-angular style="width: 900px; height: 115px;" class="ag-theme-fresh" [rowData]="rowData" [columnDefs]="columnDefs"></ag-grid-angular>
Lets assume that you are trying to render images in one of the columns basesd on the input text data. Say that your rowData and columnDef definition in the component.ts file are as follows
让我们假设您正在尝试根据输入文本数据在其中一列中呈现图像。说你在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' }
]
Lets try to display a file icon based on the file type. So my customCellRendererFunc shall be as follows
让我们尝试根据文件类型显示文件图标。所以我的 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> ');
}
} catch (exception) {
console.error(exception);
}
return cellContent
}
Make sure to add your image icons in the assets folder.
确保在资产文件夹中添加您的图像图标。
回答by prasad rao
We can use a CellRenderer function to Create a custom HTML template for each cell as given below. I had a link under my tooltip and I did not want to show the href of the anchor tag for which I have used innerHTML.
我们可以使用 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
}
