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

问题背景

在使用AG Grid进行表格开发时，开发者经常会遇到需要处理复杂数据对象的情况。近期发现AG Grid的NumberCellEditor组件在处理复杂对象时存在一个特殊问题：当单元格开始编辑时，原本的值会被清空而不是保留初始状态。

问题现象

当开发者配置了以下功能组合时：

• 使用valueFormatter进行值格式化
• 使用getter和setter管理复杂对象
• 使用parser进行值解析
• 设置数据类型为number
• 使用agNumberCellEditor作为单元格编辑器

此时如果双击单元格进入编辑状态，会发现单元格内容被清空，而不是像普通文本编辑器那样保留初始值。

技术分析

这个问题源于NumberCellEditor组件的getStartValue方法实现。该方法目前只能处理原生String或Number类型，没有考虑开发者可能通过cellEditorParams传入的parseValue函数。

在AG Grid的源码中，NumberCellEditor的getStartValue方法实现如下：

getStartValue() {
    return this.params.value;
}

这种简单实现无法处理复杂对象的情况，导致编辑开始时值被清空。

解决方案

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

方案一：自定义NumberCellEditor

创建一个自定义的数字单元格编辑器，重写getStartValue方法：

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

然后在列定义中配置parseValue函数：

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

方案二：正确使用cellDataType

如果设置cellDataType为number，AG Grid期望单元格的"值"始终是数字类型。这意味着：

1. valueParser应该返回数字而不是复杂对象
2. valueGetter应该返回数字而不是复杂对象
3. valueSetter和valueFormatter接收的输入值也是数字

这种设计模式下，NumberCellEditor就能正常工作，因为所有值都已经是数字类型。

最佳实践建议

1. 对于简单场景，优先使用cellDataType为number并确保所有相关函数都返回/接收数字类型
2. 对于需要处理复杂对象的场景，建议使用自定义编辑器
3. 注意valueParser和parseValue的区别：
   • valueParser用于将用户输入转换为存储值
   • parseValue用于将存储值转换为编辑器显示值

总结

AG Grid的NumberCellEditor默认设计是针对原生数字类型的，当需要处理复杂对象时，开发者需要额外注意值的转换逻辑。通过理解Grid内部的数据流设计和适当扩展编辑器功能，可以很好地解决这类问题。