告别硬编码让你的前端表格自动计算的实例代码
序言
当我的团队进行税务系统模块开发的时候,我发现他们需要花费80%的时间去解决计算问题,尤其体现在表格(Grid)中的计算,这些时间花在:
- 写前台js代码(因为用户在表格中的输入会影响其他单元格,所以需要即时将运算后的新值呈现给用户看)
- 写后台代码(因为用户对表格数据的更改会影响其他表格,所以要在用户点击保存时更新受影响表格的数据)
- 实施修改计算方法,导致开发者需要修改代码
于是我调研了税务其他模块的功能,发现税务系统大量使用表格控件,而其中或多或少都会涉及到计算问题。而处理计算的方法,都是采用硬编码。
计算,这个习以为常的编码动作,其实很容易让人联想到Excel中的公式,更何况需求文档本身就是以Excel的形式提供的。当我们在使用Excel的时候,可以在单元格中设置公式,通过改变源头单元格的值,Excel将自动计算单元格公式,将结果值赋予目标单元格。那么,我们是否可以参考这种模式,开发者不再需要写复杂难懂的计算逻辑,只需要根据实施提供的公式,将它们转成某种格式的语句,再调用某种计算引擎产出结果,将结果呈现给用户看或者持久化到数据库?答案是肯定的,而这一切的核心就是自动计算引擎——AutoCalculate。
作用
AutoCalculate是表格复杂运算的解决方案,可以让你省掉成百上千行的计算逻辑代码,从此写代码就像写Excel公式一般简单。
适用范围
前台:
适用于ElementUI表格、EasyUI Grid控件、ParamQuery Grid等所有js表格控件中带有公式的复杂运算
后台:
适用,需要V8引擎
前台用法
AutoCalculate由两部分组成,分别是公式和计算引擎,公式是就是根据特定语法编写的字符串,如:[Month12,1]#3 = [Month11,1] * 10,计算引擎即是AutoCalculate.js,负责解析公式。以下开始介绍如何书写公式。
单元格
假设有这样的场景,单元格①=单元格②+单元格③,对应的公式是:
本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载