如何在Angular项目的AG-Grid表格单元格中实现Excel式公式计算

要在AG-Grid单元格中实现类似Excel的公式计算（输入以=开头的表达式，回车后显示计算结果），可以通过自定义单元格编辑器来实现，核心是监听输入事件、解析公式并计算结果。

实现步骤 #

1. 自定义单元格编辑器

创建一个自定义编辑器组件，负责处理用户输入、监听回车键触发计算逻辑：

class FormulaCellEditor {
    init(params) {
        // 创建输入框元素
        this.eInput = document.createElement('input');
        this.eInput.value = params.value || '';
        this.params = params;

        // 监听回车键，触发计算并结束编辑
        this.eInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.stopPropagation();
                this.calculateFormula();
                params.api.stopEditing();
            }
        });
    }

    calculateFormula() {
        const inputVal = this.eInput.value.trim();
        // 判断是否为公式（以=开头）
        if (inputVal.startsWith('=')) {
            const expression = inputVal.slice(1);
            try {
                // 注意：直接使用eval存在安全风险，生产环境建议用math.js等库替代
                const result = eval(expression);
                // 将计算结果设置为输入框值，最终会同步到单元格
                this.eInput.value = result;
            } catch (err) {
                // 处理无效表达式，保留原输入或提示错误
                console.error('公式计算失败:', err);
            }
        }
    }

    // AG-Grid编辑器必填方法：返回当前输入值
    getValue() {
        return this.eInput.value;
    }

    // AG-Grid编辑器必填方法：返回编辑器DOM元素
    getGui() {
        return this.eInput;
    }

    // 编辑器挂载后自动聚焦输入框
    afterGuiAttached() {
        this.eInput.focus();
    }

    // 销毁编辑器时的清理操作（可选）
    destroy() {}
}

2. 配置AG-Grid列

在列定义中指定使用自定义编辑器，开启单元格可编辑：

const columnDefs = [
    {
        headerName: '计算单元格',
        field: 'calcValue',
        editable: true,
        // 指定自定义编辑器
        cellEditor: FormulaCellEditor,
        // 可选：值变更后同步到数据源
        onCellValueChanged: (params) => {
            params.data.calcValue = params.newValue;
        }
    }
];

// 初始化AG-Grid
const gridOptions = {
    columnDefs,
    rowData: [{ calcValue: '' }],
    defaultColDef: { flex: 1 }
};

document.addEventListener('DOMContentLoaded', () => {
    const gridContainer = document.getElementById('myGrid');
    new agGrid.Grid(gridContainer, gridOptions);
});

扩展与优化 #

安全替代eval

直接使用eval存在XSS风险，生产环境建议使用专门的数学表达式解析库（如math.js）：

// 先引入math.js
const result = math.evaluate(expression);

支持Excel风格函数

如果需要支持Sum、Avg等函数，可以扩展计算逻辑：

// 定义常用函数
const customFunctions = {
    Sum: (...nums) => nums.reduce((total, num) => total + Number(num), 0),
    Avg: (...nums) => nums.length ? customFunctions.Sum(...nums) / nums.length : 0,
    Max: (...nums) => Math.max(...nums)
};

// 使用new Function替代eval，注入自定义函数
const result = new Function(...Object.keys(customFunctions), `return ${expression}`)
    (...Object.values(customFunctions));

这样用户就可以输入=Sum(10, 20, 30)得到60，和Excel逻辑一致。

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