如何在AG Grid数字单元格输入5M/10k自动转换为完整数值

我们可以直接使用AG Grid原生的valueParser（值解析器）实现需求，完全满足「保留数字单元格类型、不使用value formatter」的约束：valueParser是用户输入值写入行数据前的触发钩子，处理后直接返回标准数值类型，不会影响数字列的原生特性。

• 支持的单位映射（大小写不敏感，可自行扩展量级）：
  • k/K：乘以1000
  • m/M：乘以1000000

以下是列定义的核心代码：

const columnDefs = [
  {
    field: 'yourNumericField',
    type: 'numericColumn', // 保留原生数字列类型
    cellEditor: 'agNumberCellEditor', // 复用原生数字编辑器能力
    valueParser: params => {
      const input = params.newValue?.toString().trim() || '';
      // 正则匹配数字+单位格式，支持整数、小数输入
      const matchRes = input.match(/^(\d+\.?\d*)([kKmM])$/);
      
      if (matchRes) {
        const pureNum = parseFloat(matchRes[1]);
        const unit = matchRes[2].toLowerCase();
        const unitMap = {
          k: 1000,
          m: 1000000
        };
        return pureNum * unitMap[unit];
      }

      // 无单位的输入走常规数值解析，非法输入默认保留旧值，可按需调整为返回0/空
      const parsedNum = parseFloat(input);
      return isNaN(parsedNum) ? params.oldValue : parsedNum;
    }
  }
]

方案优势 #

• 完全保留数字列原生特性：排序、过滤、数值聚合能力不受任何影响
• 输入阶段直接转换，写入行数据的是标准数值，不会出现数据类型不一致的问题
• 支持大小写单位自动识别，输入5m和5M都会统一转为5000000，输入1.5k会转为1500

自定义调整说明 #

• 需要支持更大的量级（如G、T），直接在unitMap中新增对应映射即可
• 要禁止非法输入，可搭配cellValidator钩子增加校验规则，输入不匹配格式时返回错误提示即可

内容的提问来源于stack exchange，提问作者Henders