使用AG-Grid,更改值时禁用/启用同一行中的字段

时间:2020-04-28 15:30:07

标签: ag-grid ag-grid-react

我有一个AG网格,其中包含多个单元,这些单元需要根据在特定列中选择的值来启用/禁用和清除。

|  col_a   |  col_b   |  col_c   | ... | col_t  | ... |
|----------|----------|----------|-----|--------|-----|
| editable | editable | editable | ... | Type W | ... |
| editable | X        | X        | ... | Type X | ... |
| editable | X        | editable | ... | Type Y | ... |
| X        | X        | editable | ... | Type Z | ... |

如果用户将col_t类型从说Type W更改为Type X,则需要清除(或设置)col_bcol_c中的值(“ N / A”或其他内容),并且该单元格无法进行编辑。如果他们随后将其从Type X更改为Type Y,则需要重新启用col_c进行编辑(并将值保留在“ N / A”)。

我已经看过有关creating a new cell-renderer的建议,但这似乎只能处理启用/禁用,是基于列而不是基于行,并且似乎无法解决重置值的问题。

我将“规则”压缩到一个键控对象数组中:

{
  "Type W":["col_a","col_b","col_c",],
  "Type X":["col_a",],
  "Type Y":["col_a","col_c",],
  "Type Z":["col_c",],
}

...,我怀疑可以通过为onCellValueChanged设置col_t处理程序来更改行中其他单元格的值,如下所示:

onCellValueChanged: (params) => {
  params.newValue
  const rules = {
    "Type W":["col_a","col_b","col_c",],
    "Type X":["col_a",],
    "Type Y":["col_a","col_c",],
    "Type Z":["col_c",],
  }
  if ( params.oldValue !== params.newValue) {
    theRule.forEach( (columnName) => {
    if( theRule.indexOf(columnName) === -1 ) {
        // reset value
        params.data[columnName] = 'n/a'

        // disable cell
        // ???
      } else {
        //enable row
        // ???

      }
    })
  }
} 

但是,从注释中您可以看到我不确定如何仅在我所在的行中禁用/启用单元格。我通过api和getRowNode(id)猜测了它,但是我可以看不到。

有什么我想念的吗?

1 个答案:

答案 0 :(得分:0)

根据文档-

一列中可能只有几个单元格是可编辑的;去做 因此,您可以指定一个回调来代替colDef.editable = true, 将为该列显示的每个单元格调用。如果你回来 true,该单元格将是可编辑的。

您是否考虑过为所有列的editable属性定义一个回调。您可以根据自己的规则自定义回调,并将其添加到每个colDef中。这应该处理编辑启用/禁用部分。

editable: this.customEditFn.bind(this)
...
customEditFn(params){
    //params.node - for row identity
    //params.column - for column identity

   // add your rules here
   // return boolean based  on rules
}  

您应该继续使用onCellValueChanged回调来重置值。

更多详细信息here