如何让agNumberCellEditor支持单元格表达式输入？

问题详情 #

已开启enableCellExpressions配置，但数字列使用agNumberCellEditor时无法支持单元格表达式：

• 文本列用agTextCellEditor，输入=9+1会被自动解析为10
• 数字列用agNumberCellEditor，既不能输入=，直接输入9+1还会让单元格进入错误状态

当前使用的AG Grid版本：

• ag-grid-community: "33.2.2"
• ag-grid-enterprise: "33.2.2"
• ag-grid-react: "33.2.2"

相关配置代码：

const gridOptions= {
    // 其他表格配置
    enableCellExpressions: true,
} 

const columnDefs = [
        {
            field: "text",
            headerName: "Editor with Text Field",
            editable: true,
            cellEditor: 'agTextCellEditor' // 表达式=9+1会解析为10
        },
        {
            field: "number",
            headerName: "Editor with Number Field",
            editable: true,
            cellEditor: 'agNumberCellEditor' // 无法输入单元格表达式
        }
       
   ]

问题原因 #

agNumberCellEditor基于原生<input type="number">实现，这类输入框会限制输入内容只能是数字相关字符（0-9、小数点、正负号等），根本没法输入=和+这类表达式符号，自然触发不了AG Grid的表达式解析逻辑。而agTextCellEditor是普通文本输入框，允许输入任意字符，所以能正常识别表达式前缀=并完成解析。

解决办法 #

要让数字列支持单元格表达式，有两种实用方案：

方案1：自定义支持表达式的数字编辑器 #

自己实现一个基于文本输入框的编辑器，既保留数字校验，又允许输入表达式。示例代码：

const CustomNumberExprEditor = {
    init(params) {
        this.input = document.createElement('input');
        this.input.type = 'text';
        this.input.value = params.value || '';

        // 失去焦点时校验数字格式（非表达式场景）
        this.input.addEventListener('blur', () => {
            const val = this.input.value;
            if (!val.startsWith('=') && val !== '' && isNaN(Number(val))) {
                this.input.classList.add('ag-invalid-input');
            } else {
                this.input.classList.remove('ag-invalid-input');
            }
        });
    },
    getGui() {
        return this.input;
    },
    getValue() {
        return this.input.value;
    },
    afterGuiAttached() {
        this.input.focus();
        this.input.select();
    }
};

// 列定义中替换原编辑器
const columnDefs = [
    // ...其他列
    {
        field: "number",
        headerName: "Editor with Number Field",
        editable: true,
        cellEditor: CustomNumberExprEditor,
        // 可选：把解析后的结果格式化为数字显示
        valueFormatter: params => {
            const val = params.value;
            return typeof val === 'number' ? val : (Number(val) || val);
        }
    }
];

方案2：用agTextCellEditor加数字校验逻辑 #

直接使用文本编辑器，通过valueParser区分表达式和普通数字输入，同时做校验：

const columnDefs = [
    // ...其他列
    {
        field: "number",
        headerName: "Editor with Number Field",
        editable: true,
        cellEditor: 'agTextCellEditor',
        valueParser: params => {
            const inputVal = params.newValue;
            // 是表达式就交给AG Grid处理
            if (inputVal.startsWith('=')) {
                return inputVal;
            }
            // 非表达式就转成数字，无效输入保留原内容
            const numVal = Number(inputVal);
            return isNaN(numVal) ? inputVal : numVal;
        },
        // 可选：给无效数字加样式提示
        cellClass: params => {
            const val = params.value;
            if (typeof val !== 'number' && !val?.startsWith('=')) {
                return 'ag-cell-invalid';
            }
            return '';
        }
    }
];

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