ag-grid：根據同一行其他單元格中的內容禁用單元格

Question

我正在尋找有關我將使用 ag-grid 實現的功能的幫助。 這是一個plunker。

我有一個包含 X 項和 3 列的表格。 在第一列中，我有一些只讀文本，在第二列和第三列中我有自定義cellEditor （單擊時會顯示下拉菜單）。

目標：我希望默認情況下禁用第三列中的單元格（單擊時，不顯示下拉列表）並且僅當第二列上的單元格相同時才顯示下拉列表（在第三列中的單元格中）行有值（從下拉列表中選擇一個項目）。

enter code here (must have code in order to put plunker links :/)

示例：在第一行：第 1 列有值（默認情況下），用戶從第 2 列的下拉列表中選擇一個項目。然后他才能從第三列的下拉列表中選擇一個項目。 用戶無法從其他行的第三列中選擇項目，因為他們的第二列是空的。

Answer 1

您可以動態處理editable模式

headerName: 'C',
field: 'c',
cellEditor: 'searchEditor',
editable: (params:IsColumnFuncParams)=>{ return params.data.b },
cellEditorParams: {
    values: this.c
}

如果此列可編輯，則設置為 true，否則為 false。 也可以是具有可編輯不同行的函數。

editable?: boolean | IsColumnFunc;

ag-grid-community\\src\\ts\\entities\\colDef.ts

export interface IsColumnFuncParams {
    node: RowNode;
    data: any;
    column: Column;
    colDef: ColDef;
    context: any;
    api: GridApi;
    columnApi: ColumnApi;
}

Answer 2

只是為了擴展AlexRebula的優秀提示，這是您可以使用editable ：

header: 'username',
editable: (params:IsColumnFuncParams)=> { return this.canCellBeEdited(params) },
cellRenderer: 'searchEditor',

. . . 

    canCellBeEdited(params) {
        //  Don't let the user edit the "First Name" cell, if the current value is "mike".
        if (params.colDef.field == 'firstName' && params.data[params.colDef.field] == 'mike') {
            return false;
        }
        return true;
    }