Ag-grid 单元格使用 function() 渲染 html 或模板

Posted 2023-03-28

【中文标题】Ag-grid 单元格使用 function() 渲染 html 或模板

【英文标题】：Ag-grid cell Render html or template with function()

【发布时间】：2021-08-31 02:45:48

【问题描述】：

单击时我正在渲染单元格模板，它应该执行一些功能。我的波纹管代码不起作用。提前致谢

             
                field: "expiry_date",
                headerName: "End date"
              ,
                field:"Reserved Date",
               // template: `<p (click)='open()'>Reserve Date</p>`,
               cellRenderer: function (params) 
                var html = `<p (click)=$this.open(params.data)'>Reserve Date</p>`;
        
                return html;
            

【问题讨论】：

请同时包含您遇到的错误。

我没有收到错误。但由于实施错误，它对我不起作用

【参考方案1】：

我们可以在ag-grid库的cellRendererParams的帮助下绑定方法和它的标签。

你可以像下面这样，

        
            field: "expiry_date",
            headerName: "End date"
        ,
        
            field:"Reserved Date",
            cellRendererParams: 
                    onClick: this.open.bind(this),
                    label: 'Reserve Date'
            
        

您可以在此处阅读有关 cellRenderParams 的更多信息：component-cell-renderer

【讨论】：

请在附件中探索更多可能的方法来解决您的问题。

【参考方案2】：

您需要创建一个新的 cellRendererComponent。 像这样的：

import  Component  from '@angular/core';
import  ICellRendererAngularComp  from 'ag-grid-angular';
import  ICellRendererParams, IAfterGuiAttachedParams  from 'ag-grid-community';


@Component(
  selector: 'cpl-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">label</button>
    `,
    styles: []
)

export class ButtonRendererComponent implements ICellRendererAngularComp 

  params;
  label: string;

  agInit(params): void 
    this.params = params;
    this.label = this.params.label || null;
  

  refresh(params?: any): boolean 
    return true;
  

  onClick($event) 
    if (this.params.onClick instanceof Function) 
      // put anything into params u want pass into parents component
      const params = 
        event: $event,
        rowData: this.params.node.data
        // ...something
      
      this.params.onClick(params);

    
  

从父组件，需要添加到aggrid的framework对象中，并在columnDefs中提供：

ngOnInit() 
        this.frameworkComponents = 
            buttonRenderer: ButtonRendererComponent,
        
    

列定义：

       
            headerName: 'Button Demo',
            cellRenderer: 'buttonRenderer',
            cellRendererParams: 
                onClick: this.open.bind(this),
                label: 'Reserve Date'
            
        ,

像这样添加打开函数：

private open(params) 
    // do whatever you want.
    // Params will contain the oject that you passed in .onclick method of renderer component     

HTML 文件：

<ag-grid-angular style="height: 450px;" class="ag-theme-alpine" [rowData]="rowData"
            [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" (gridReady)="onGridReady($event)"
            [frameworkComponents]="frameworkComponents">
</ag-grid-angular>