AG Grid中NumberCellEditor处理复杂对象的问题解析

问题背景

在使用AG Grid进行表格开发时，开发者经常会遇到需要处理复杂数据对象的情况。近期发现当使用NumberCellEditor编辑器时，如果单元格数据是复杂对象而非简单数值类型，在开始编辑时会出现内容被清空的问题。

问题现象

当配置了valueFormatter、Getter、Parser和Setter来处理复杂对象时，如果使用agNumberCellEditor作为单元格编辑器，双击单元格开始编辑时，初始值会被清空。而如果使用默认的文本编辑器，则能正常保留初始值。

技术分析

这个问题的根源在于NumberCellEditor的getStartValue方法实现。该方法目前只能处理原生String或Number类型，没有考虑到开发者可能通过cellEditorParams传递parseValue函数的情况。而getValue方法则能够正确处理这种情况。

解决方案

开发者可以通过以下两种方式解决这个问题：

1. 自定义NumberCellEditor：创建一个继承自NumberCellEditor的自定义编辑器，重写getStartValue方法：

getStartValue() {
  if (this.params.value && typeof this.params.value === 'object') {
    return this.params.parseValue(this.params.value);
  }
  return this.params.value;
}

2. 配置parseValue函数：在cellEditorParams中提供parseValue函数来处理复杂对象：

cellEditorParams: {
  precision: 2,
  showStepperButtons: true,
  parseValue: (value) => {
    if (value && typeof value === 'object') {
      return value.value; // 根据实际数据结构调整
    }
    return value;
  }
}

最佳实践建议

1. 当使用cellDataType为number时，确保所有相关函数(valueGetter/valueParser/valueSetter/valueFormatter)都返回或接收数值类型。

2. 如果需要处理复杂对象，建议统一使用自定义编辑器或确保parseValue函数能正确处理各种数据类型。

3. 在开发过程中，应该对编辑器的初始状态进行充分测试，确保编辑体验的一致性。

总结

AG Grid的NumberCellEditor默认设计是处理简单数值类型的，当遇到复杂对象时需要开发者进行额外处理。理解这一限制并采取适当的解决方案，可以确保表格编辑功能的正常运作。这个问题也提醒我们，在使用任何UI组件时，都需要充分了解其设计边界和数据处理预期。