Ag-grid 禁用特定行的按钮

Question

在我的工作中，他们在 angular 中有这个 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');
      }
    }
  }

];
}

这是我的 class for 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

在您的渲染器中有一个变量，它将检查是否从父级传递了某个值，并在单元格渲染器的 html.

中使用 [disabled] 标签禁用您的按钮

可能与此重复：

如果有效请告诉我

Answer 2

不清楚你想达到什么目的。您要禁用 CellRenderer 中的一个按钮、不同行中的多个按钮、几行中的多个按钮，还是给定行中的几个单元格...

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

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

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

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

这在官方中有很好的解释doc. Then in your renderer component you check the condition for disabling the button taking into account you row. In my example, which you can find here，我想禁用确定按钮，直到验证完成并通过由一行组成的表单。

希望对您有所帮助。

Ag-grid 禁用特定行的按钮

Ag-grid disable a button from a specific row

angular

ag-grid-angular