欢迎访问艾立兹站 Aliz- 专注建站教程与技术分享
您当前的位置:首页 > 建站教程 > WordPress 建站

告别硬编码让你的前端表格自动计算的实例代码

时间:2023-12-25 11:25:45  来源:未知  作者:admin  阅读:

序言

当我的团队进行税务系统模块开发的时候,我发现他们需要花费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下载

发表评论 共有0条评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
公众号二维码

扫码关注公众号
获取全套技术教程