Angular 6 ag-grid 单元格渲染器单击功能

Posted 2023-03-28

【中文标题】Angular 6 ag-grid 单元格渲染器单击功能

【英文标题】：Angular 6 ag-grid cell renderer click function

【发布时间】：2018-12-02 02:25:18

【问题描述】：

所以我正在尝试设置 ag-grid，但我无法让一件事起作用。我想有一列是行动。然后我希望它有一个链接或按钮来触发组件文件中的方法。

对于列 def 我有以下内容。我做错了什么？

 
    headerName: 'Actions',
    cellRenderer: params => 
      return `<a (click)="onEditClick("$params.data.hostname")">Edit</a>`;
    
 

【参考方案1】：

我使用 cellRenderFramework：

    
    headerName: '', width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: 
      icon: 'fa-download',
      action: this.downloadAttachmentAction
    
  

比我有自定义组件

@Component(
  selector: 'cu-download-link-cell-renderer',
  template: `
  <div class="text-center">
    <i class="fa params.icon" (click)="onClick()" aria-hidden="true"></i>
  </div>`
)
export class ActionCellRendererComponent 

    params;

    constructor() 
    

    agInit(params): void 
        this.params = params;
        if (_.isNil(params.action)) 
            throw new Error('Missing action parameter for ActionCellRendererComponent');
       
   

   onClick(): void 
       this.params.action(this.params);
   


export type CellAction = (params) => void;

【讨论】：

很好的例子！但这假设我的 ColDef 是直接在我的组件中定义的。如果我已经将我的 ColDef 抽象到一个单独的类中，你有什么建议我将如何引用可能仍然存在于组件上的 action 函数？

@luker02 在不创建自定义 cellrender 组件的情况下，您是否找到任何解决方案？

@LucasSantos 不，我确实创建了一个 cellrenderer 组件。然后，我没有使用 action 参数直接调用我的组件函数，而是从 cellrenderer 组件发出事件并在我的主组件上监听它们

嗨@Peter1982，agInit()函数有什么用？

@FaiZalDong 的 AgGrid 组件扩展了 AgFrameworkComponent。函数 agInit() 类似于 ngOnInit()。

【参考方案2】：

使用 cellRendererFramework 添加操作按钮。

App.component.ts

columnDefs = [
   headerName: 'First Name', field: 'firstName', sortable: true, filter: true ,
   headerName: 'Last Name', field: 'lastName', sortable: true, filter: true ,
   headerName: 'Email', field: 'email', sortable: true, filter: true ,
   headerName: 'User Name', field: 'userIdName', sortable: true, filter: true ,
   headerName: 'Role', field: 'role', sortable: true, filter: true ,
   headerName: 'Actions', field: 'action', cellRendererFramework: CellCustomComponent ];

rowData: any;

ngOnInit() 
  const empDatas = localStorage.getItem('user');
  const finalData = JSON.parse(this.empDatas);
  this.rowData = this.finalData;

在上面的代码中，我们可以看到CellCustomComponent。创建该组件并添加按钮。

cell-custom.component.html

<button type="button" class="btn-success" (click)="editRow()">Edit</button>
<button type="button" class="btn-success" (click)="viewRow()">View</button>

现在在 cell-custom.component.ts 中添加函数

cell-custom.component.ts

export class CellCustomComponent implements OnInit 
  data: any;
  params: any;
  constructor(private http: HttpClient, private router: Router) 

  agInit(params) 
    this.params = params;
    this.data = params.value;
  

  ngOnInit() 

  editRow() 
    let rowData = this.params;
    let i = rowData.rowIndex;
    console.log(rowData);
  

  viewRow() 
    let rowData = this.params;
    console.log(rowData);
  

之后我们需要在App.module.ts

中添加这个组件

app.Module.ts

@NgModule(
  declarations: [AppComponent, CellCustomComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([AppComponent])
  ],
  providers: [],
  entryComponents: [CellCustomComponent],
  bootstrap: [AppComponent]
)
export class AppModule 

现在我们可以使用 Button 触发组件文件中的方法。

【讨论】：

你能告诉我先生如何在悬停任何单元格渲染按钮后打开工具提示吗？

【参考方案3】：

是的，使用 cellRendererFramework 来处理渲染。

在您的 columnDefs 中：

this.columnDefs = [
  
    headerName: 'Header Name', field: 'field',
    cellRendererFramework: ColRenderer,
    cellRendererParams:  context: this ,
    sortable: true, filter: true
  ,
  ...
 ];

然后在你的 ColRenderer 中：

@Component(
  template: `<a (click)="clickHandler(rowData)">rowData.Member</a>`
)
export class ColRenderer implements ICellRenderer 
  public rowData: any;
  private params: any;

  public agInit(params:  data: any, context: any ) 
    this.rowData= params.data;
    this.params = params;
  ;

  public clickHandler(data: any) 
    this.params.context.onEditClick(data);
  
  ...

显然根据需要更改上面的名称。只知道 上下文 是关键。您将组件的上下文传递给渲染器，然后使用该上下文在渲染​​器中调用您想要单击的函数。

【参考方案4】：

已经很完美了！ 谢谢

prebilling-view.component.ts (cellRendererParams: context: this )

 
field: 'adjustmentUnit',
  tooltipField: 'adjustmentUnit',
  cellRendererParams:  context: this ,
  cellRendererSelector: (params: any) => 
    const component = 
      component: 'textAreaVueRenderer',
      params:  values: true, textAlign: 'right', typeValue:false
    
    return component;
  ,
  cellStyle:  textAlign: 'right' ,
  headerClass: 'textRight',
,

prebilling-view.component.ts 中的函数

onEditChange(val:string, index:any)
console.log("valor: "+ val)
console.log("index: "+ index)

输入 cellRenderSelector textAreaVueRender

  <input *ngIf="editEnabled"
            type="number"
            (input)="inputNegativeChangeHandler($event)"/>

cellRenderSelector textAreaVueRender 组件中的函数

 inputNegativeChangeHandler($event: any) 

this.params.context.onEditChange($event.target.value,this.params.rowIndex);

【讨论】：

请不要添加“谢谢”作为答案。一旦你有足够的reputation，你将能够vote up questions and answers，你觉得有帮助。 - From Review