Question

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

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

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

Answer 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属性。

Answer 2

我也有相同的要求，我是通过嵌入式单元格渲染器实现的

代码：

{headerName：'lookup'，

    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;
   }

}

Answer 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 {
}

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

3 个答案: