使用 AG-Grid，更改值时同一行中的 disable/enable 个字段

Question

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

|  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_b 和 col_c 中的值（或设置为 "N/A" 或其他）并且单元格被禁用以进行编辑。如果他们随后将其从 Type X 更改为 Type Y，则需要重新启用 col_c 以进行编辑（并且值保留在 "N/A"）。

我查看了的建议，但它似乎只处理 enabling/disabling，是基于列而不是行，并且似乎没有解决值重置问题.

我将 "rules" 压缩到一个键控对象数组中：

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

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

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
        // ???

      }
    })
  }
}

但是，从评论中您可以看到，我不确定如何在我所在的行中 disable/enable 单元格。我猜测它是通过 api 和 getRowNode(id)，但是我看不到。

有没有我遗漏的东西？

Answer 1

根据文档 -

It is possible to have only a few cells in a column editable; to do so, instead of colDef.editable=true, you can specify a callback that will get called for each cell displayed for that column. If you return true the cell will be editable.

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

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

使用 AG-Grid，更改值时同一行中的 disable/enable 个字段

Using AG-Grid, disable/enable fields in the same row when a value is changed

ag-grid

ag-grid-react