如何有条件地启用/禁用 Ag-Grid 中的单元格渲染器？答案

【问题标题】：How to conditionally enable/disable cell renderer in Ag-Grid?如何有条件地启用/禁用 Ag-Grid 中的单元格渲染器？
【发布时间】：2019-03-01 19:40:12
【问题描述】：

我正在使用 ag-grid 单元格渲染器，并为它创建了一个单独的组件。根据某些条件，我想有条件地使单元格渲染器组件启用或禁用。

{ headerName：'查找值'，字段：'LOOKUP'，可编辑：false，cellRenderer：'lookupRenderer'}

我想根据条件启用/禁用“lookupRenderer”。

【问题讨论】：

禁用是指将其完全从 columnDefs 中删除？还是留空？
实际上lookupRenderer 是一个按钮，点击它我打开一个弹出窗口。因此，当网格中的其他值发生变化时，希望启用/禁用按钮。但是看起来像单元格渲染器最初在加载网格时渲染单元格数据，然后当我更改其他网格列中的某些值时，这不会反映在渲染器组件中。

标签： ag-grid

【解决方案1】：

内联cellRenderer 应该只用于简单的情况。要在自己的cellRenderer 中实现按钮点击处理，您需要为此创建component。

你的组件应该是这样的：

    @Component({
        selector: 'custom-button-cell',
        template: `<button [disabled]="!params.node.data.enableButton" (click)="handleClick()">{{params.value}}</button>`,
        styles: [``]
    })

    export class ConditionalRenderer implements ICellRendererAngularComp {
        private params: any;

        agInit(params: any): void {
            this.params = params;
        }

        refresh(): boolean {
           return true;
        }

       handleClick() {
          alert(`Clicked: ${this.params.value}`);
       }
    }

这里是worked plnkr

不要忘记，您的 component 应该包含在 frameworkComponents 内的 gridOptions 或 [frameworkComponents] html 属性中。

【讨论】：

【解决方案2】：

我也有同样的要求，我通过内联单元格渲染器实现了这一点

代码：

{ headerName: '查找',

    suppressMenu: true,
    width:130,
    suppressSorting: true, 
   cellRenderer: (params) => {

    const element = document.createElement('span');
    let buttonname;
    let template;
    if (params.data.USER_ROLE_END_DATE=='')
    {
      buttonname = 'Disable Role'
      template= `<button type="button" style="height: 25px;line-height: 0.5"data-action-type="Disablerole"  class="btn btn-outline-danger btn-xs btn-block" ;
      >
      ${buttonname} 
     </button>`
    }
    else
    {
      buttonname = 'Enable Role'
      template= `<button type="button" style="height: 25px;line-height: 0.5"data-action-type="Disablerole"  class="btn btn-outline-success btn-xs btn-block" ;
      >
      ${buttonname} 
     </button>`
    }


   element.innerHTML = template;
    return element;
   }

}

【讨论】：

谢谢卡皮尔，这看起来不错。但是我需要在单击按钮时调用一个函数。你知道我可以把它放在上面的代码哪里吗？
在网格中使用下面的事件 html (rowClicked)="onRowClicked($event)" 也在 ts 文件中使用下面的代码 public onRowClicked(e) { if (e.event.target !== undefined) { 让数据 = e.data;让数据节点 = e.node;让 actionType = e.event.target.getAttribute("data-action-type"); switch(actionType) { case "AddRole": return this.onActionAddroleClick(data); case "Disablerole": return this.onActionDisableroleClick(datanode); } } console.log(this.gridColumnApi)}
data-action-type="Disablerole" 将用于标识 rowclick 处的操作。

【解决方案3】：

渲染器模板 -

<button type="button" (click)="placeOrder($event)" >Submit</button>

渲染器组件 -

agInit(params: any) {
    this.params = params;
  }

placeOrder(event: Event): void {
    event.stopPropagation();
    this.params.onClick(..);
  }

定义coldefs的网格组件 -

columnDefs = [
    { headerName: '', field: "Test", cellRenderer: 'rendererName', 
      cellRendererParams: {
      onClick: this.placeOrder.bind(this)
      }
    }
private placeOrder(obj: any): void {
}

【讨论】：

【解决方案4】：

此代码适用于 Angular

我遇到了同样的问题。我的情况是防止在一个单元格上呈现删除按钮。所以，我创建了一个 cellRenderer 组件如下

// 角度

import { Component} from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
   
@Component({
  selector: 'app-icon-button-renderer',
  templateUrl: './Icon-button-renderer.component.html',
  styleUrls: ['./Icon-button-renderer.component.css'],
})
export class IconButtonRendererComponent implements ICellRendererAngularComp {
    
  params: any;
  iconName: string = "";
  hidden: boolean = false;
  agInit(params: any): void {
    this.params = params;
    this.iconName = params.iconName;
    this.hidden = this.params.node.data.name === params.preventionName;
  }
    
  refresh(params?: any): boolean {
    return true;
  }
    
  onClick(event: any) {
    if (this.params.onClick instanceof Function) {
    
      this.params.onClick(this.params);
    }
  }
}
```

IconButtonComponent 的 Angular Html 模板是

<ng-template [ngIf]="hidden===false" [ngIfElse]="Nobutton" #Withbutton>
  <button mat-icon-button color="warn" (click)="onClick($event)">
    <mat-icon class="mat-18">
      {{iconName}}
    </mat-icon>
  </button>
</ng-template>
<ng-template #Nobutton></ng-template>

首先，我在button 标签上使用*ngIf="hidden" 和[ngIf]="hidden"，但它不起作用，但它与ng-template 一起使用

【讨论】：