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

Posted 2023-03-28

【中文标题】使用 AG-Grid，在更改值时禁用/启用同一行中的字段

【英文标题】：Using AG-Grid, disable/enable fields in the same row when a value is changed

【发布时间】：2020-08-12 11:47:29

【问题描述】：

我有一个 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 类型从Type W 更改为Type X，则需要清除col_b 和col_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",],

...我怀疑我可以通过为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
        // ???

      
    )
  
 

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

我有什么遗漏吗？

【参考方案1】：

根据文档 -

一列中可能只有几个单元格可编辑；去做 因此，您可以指定一个回调，而不是 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

【讨论】：

我不确定这如何触发连续其他单元格的变化？数据是非常动态的，将某种触发器附加到发生变化的单元格上似乎更明智，而不是在单元格发生变化时重新计算整个工作表？

这不会触发其他单元格中的更改，但这可以让您更好地控制处理可编辑逻辑。要更改其他单元格中的值，您必须使用 onCellValueChanged 回调。所以建议的解决方案是 editable + onCellValueChanged 的​​组合

我已经给了你答案，但老实说，我已经放弃了 AG Grid 库 - 并使用了 JExcel。他们的方法更接近您的预期，禁用单元格几乎只是table.records[y][x].element.classList.toggle('readonly')，其中 x 和 y 是网格中单元格的坐标。非常非常干净的 API。