时间戳

首页 > 解决方案 > 使用 AG-Grid，在更改值时禁用/启用同一行中的字段

ag-grid - 使用 AG-Grid，在更改值时禁用/启用同一行中的字段

问题描述

我有一个 AG-Grid，包含几个需要根据特定列中选择的值启用/禁用和清除的单元格。

|  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类型从 say更改Type W为Type X，则需要清除col_b和中的值（或设置为“N/A”或其他内容）并禁用单元格以进行编辑。col_c如果他们随后将其从 更改Type X为Type Y，则col_c需要重新启用以进行编辑（并将值保留为“N/A”）。

我已经查看了创建新 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)，但我看不到它。

有什么我想念的吗？

标签： ag-gridag-grid-react

解决方案

根据文档 -

一列中可能只有几个单元格可编辑；为此，您可以指定一个回调，而不是 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回调来重置值。

更多细节在这里

推荐阅读