时间戳

首页 > 解决方案 > Angular-Ag-Grid：如何在数据完全加载后和另一个事件发生后禁用特定行单元格中的复选框或单选输入？

javascript - Angular-Ag-Grid：如何在数据完全加载后和另一个事件发生后禁用特定行单元格中的复选框或单选输入？

问题描述

我无法禁用在操作时动态加载的复选框。

我正在使用带有自定义组件的 CellRendererFramework 来加载基本网格数据，下面是我的 columnDef。当我选中将动态行数据插入网格的复选框时，我在 ag-grid 之外有一个事件。这样做时，如果该行数据的状态列值为 false，那么我必须禁用该特定行的复选框和单选按钮。

在这里，我可以找到新行的 rowNodeId，但无法禁用复选框和无线电：

{ headerName: 'abc', field: 'abc'},
{ headerName: 'State', field: 'state'},
{
  headerName: 'check Case',
  field: 'checkCase',
  cellRendererFramework: GridCheckboxRendererComponent,
  onCellValueChanged: (event: CellValueChangedEvent) => {
    this.updateCaseCheck(event);
  },
  cellRendererParams: {
    disableCaseCheckbox: this.disableWhenCaseisArchived
  }
 },
 {
   headerName: 'Make Default',
   field: 'makeDefault',
   cellRendererFramework: GridRadioButtonRendererComponent,
   onCellValueChanged: (event: CellValueChangedEvent) => {
     this.setDefault(event);
   },
   cellRendererParams: {
     disableDefaultRadio: this.disableWhenCaseisArchived
   }
  }

我尝试使用自定义单元格渲染器参数，但它仅在网格实例化时设置。

我正在使用 gridApi 设置数据，如下所示，caseRowData 将具有先前和后期事件的新数据：

this.gridApi.setRowData(this.caseRowData);

在我的自定义网格复选框和 agOninit 中的无线电组件中，我正在映射这个自定义渲染器值，并且分别映射到复选框和无线电输入上的禁用属性。

非常感谢任何帮助。

标签： javascriptangulartypescriptag-gridag-grid-angular

解决方案

在您的 cellRendererFramework 组件中，即，GridCheckboxRendererComponent或者GridRadioButtonRendererComponent您可以使用 params 中的 data 属性

class CellRenderer implements ICellRendererParams {

   public disableCheckbox: boolean;
   
   agInit(params: ICellRendererParams): void {
     this.disableCheckbox= params.data.state;
   }
}

现在您可以使用此disableCheckbox变量来禁用 html 上的属性映射。

推荐阅读