我正在寻求有关将要使用ag-grid实现的功能的帮助。 Here是个傻瓜。
我有一个包含X个项目和3列的表格。在第一列中,我有一些只读文本,在第二列和第三列中,我有自定义cellEditor
(单击后会显示一个下拉菜单)。
目标:我希望默认情况下禁用第三列中的单元格(单击时不显示下拉菜单),并且仅当第二列中的单元格显示下拉列表(在第三列中的单元格中)同一行上有值(从下拉列表中选择一项)。
enter code here (must have code in order to put plunker links :/)
示例:在第一行:第1列具有值(默认情况下),并且用户从第2列的下拉列表中选择一个项目。然后,只有这样,他才能从第三列的下拉列表中选择一个项目。用户无法从其他行的第三列中选择一项,因为他们的第二列为空。
答案 0 :(得分:1)
您可以动态处理editable
模式
headerName: 'C',
field: 'c',
cellEditor: 'searchEditor',
editable: (params:IsColumnFuncParams)=>{ return params.data.b },
cellEditorParams: {
values: this.c
}
如果此col可编辑,则设置为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;
}
答案 1 :(得分:0)
只是为了扩展 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;
}