使用ag-grid的cellRenderer渲染单元格

使用ag-grid的cellRenderer渲染单元格

这里只是一个简单的例子，具体如何使用，还得看官方文档

https://www.ag-grid.com/javascript-grid-cell-rendering/?framework=angular

---

1.在需要渲染的单元格基本信息中添加一个组件

{

headerName: "Square",

field: "value",

cellRendererFramework: SquareComponent,

editable:true,

colId: "square",

width: 100

}

2.创建该组件的实现类

//导入信息

import {Component,OnDestroy} from '@angular/core';

import {ICellRendererAngularComp} from 'ag-grid-angular/main';

//导入信息

@Component({

selector: 'square-cell', //这里是个组件要添加到哪里的选择器，当你在第一步中添加组件的时候，那个地方就自动创建了这个选择器让你添加数据

template: `<span style="color: red">{{valueSquared()}}:{{valueSquared2}}</span>` //这里是要显示的数据模板

})

export class SquareComponent implements ICellRendererAngularComp, OnDestroy {

private params:any;

//不用管它，好像是初始化的时候，会将原本要显示的数据的一个node插入

agInit(params:any):void {

this.params = params;

}

//这里很重要，显然返回一个数字类型，

public valueSquared():number {

return this.params.value * this.params.value;

}

//这里很重要，显然返回一个字符串，

public valueSquared2():string {

return 'this is a iphone';

}

ngOnDestroy() {

console.log(`Destroying SquareComponent`);

}

}/**

* Created by leopride on 2017/4/6.

*/

3.组件创好了，还需要在Module中添加组件，在你的 *****.module.ts文件中

需要添加的部分为绿色背景的部分，其它的不用管

imports: [

AgGridModule.withComponents([

RedComponentComponent,

SquareComponent

]),

OmsSharedModule,

RouterModule.forRoot(ENTITY_STATES, { useHash: true })

],

declarations: [

GridSampleComponent,

GridSampleDetailComponent,

GridSampleDialogComponent,

GridSampleDeleteDialogComponent,

GridSamplePopupComponent,

GridSampleDeletePopupComponent,

RedComponentComponent,

SquareComponent

],