Ag-grid 禁用特定行中的按钮

Question

在我的工作中，他们有这个角度的 ag-grid，并使用单元格渲染器，他们为每一行创建一个按钮，但在某些条件之后，他们希望我禁用该按钮，但我不知道如何做到这一点

grid.ts

this.frameworkComponents = {
  buttonRenderer: BtnRendererComponent,
  viewButtonRenderer: BtnViewRendererComponent
};
this.submissionCols = [
  {
    headerName: 'Process', field: 'id', filter: true, sortable: true, width: 100, cellClass: 'grid-cell-centered',
    cellRenderer: 'viewButtonRenderer', hide: !this.hide,

    onCellClicked: this.onBtnClick.bind(this),
  },
  {
    headerName: this.hide ? 'Request Status' : 'Review Status', width: 150,
    field: 'reviewStatus',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Review Type',
    field: 'reviewType',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Reviewer',
    field: 'reviewer',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Request Type',
    field: 'reviewRequestItem',
    filter: true,
    sortable: true,
    hide: !this.hide
  },
  {
    headerName: 'In Reference To',
    field: 'reference',
    filter: true,
    sortable: true,
    hide: !this.hide
  },
  {
    headerName: 'Request Item',
    field: 'reviewRequestItem',
    filter: true,
    sortable: true,
    hide: this.hide
  },
  {
    headerName: 'Description',
    field: 'description',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Responded',
    field: 'responded',
    filter: true,
    sortable: true,
    cellRenderer: (data) => {
      if (data.data.responded != null) {
        return moment(data.data.responded).format('MM/DD/YYYY');
      }
    }
  }

];
}

这是我的 viewButtonRenderer 类：

export class BtnViewRendererComponent implements ICellRendererAngularComp {
    params;
    label: string;
    colored: string;
    textColored: string;
    icon: string;

    agInit(params): void {
         this.params = params;
         this.label = this.params.data.id || null;
         this.colored = "red";

         if (params.column.colDef.headerName === "View") {
             this.icon = "details";
         } else {
             this.icon = "note";
         }
    }

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

我是 ag-grid 的新手，我真的可以用手。

Answer 1

不清楚您想要实现什么。您是否要禁用 CellRenderer 中的一个按钮、不同行中的多个按钮、多行或给定行中的几个单元格...

在某种情况下，当您由于网格的某些全局状态或承载该网格的组件的状态而想要禁用特定行中的按钮时，您应该将该条件作为变量传递给您的渲染器（如所示由Sharanya）作为cellRendererParams

gridOptions: GridOptions = {
    ...,
    columnDefs: [
        ...,
        {
            headerName: 'Responded',
            field: 'responded',
            filter: true,
            sortable: true,
            cellRenderer: (data) => myCustomRenderer(data),
            cellRendererParams: { condition: myCondition }
        }
    ]
}

或作为包含父级本身的上下文，可以访问变量/条件并有可能直接与父级通信

gridOptions: GridOptions = {
    ...,
    context: {
        parent: this
    }
}

这在官方doc中有很好的解释。然后在您的渲染器组件中检查禁用按钮的条件，考虑到您的行。在我的示例中，您可以找到 here，我想禁用 OK 按钮，直到验证完成并通过包含一行的表单。

希望对你有帮助。

Answer 2

在您的渲染器中有一个变量，它将检查是否从父级传递了某个值，并在单元格渲染器的 html 中使用 [disabled] 标记禁用您的按钮。

可能的重复：

how-to-conditionally-enable-disable-cell-renderer-in-ag-grid

让我知道它是否有效