网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2020-09-27 17:54 作者:小飞侠 阅读:

[导读] 告别硬编码让你的前端表格自动计算的实例代码...

今天带来告别硬编码让你的前端表格自动计算的实例代码教程详解

序言

当我的团队进行税务系统模块开发的时候,我发现他们需要花费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,负责解析公式。以下开始介绍如何书写公式。

单元格

假设有这样的场景,单元格①=单元格②+单元格③,对应的公式是:

[Month1,1] = [Month1,2] + [Month1,3]

先来看看[Month1,1]代表什么,首先,中括号[ ]代表一个单元格,Month1即“1月”对应的列名,紧接着是一个逗号,,后面的1代表RowNo = 1,以此类推,

[Month1,2]代表列为“1月”且RowNo = 2的单元格

[Month1,3]代表列为“1月”且RowNo = 3的单元格

所以我们可以用[y,x]来代表一个单元格,y即列名,也称作纵坐标, x即RowNo的值,也称作横坐标

如果表格没有RowNo列怎么办?如想寻找答案,请继续往下阅读

让公式生效

//首先引入AutoCalculate.js
import AutoCalculate from '../components/AutoCalculate';
...

//定义一个AutoCalculate实例,formulas为公式数组
let autoCal = new AutoCalculate(formulas);

/* 调用cal方法
 * gridDatas(必填):表格数据
 * refField(必填):参考字段,即单元格[y,x]中x是哪个字段的值
 */
autoCal.cal(gridDatas, refField);

区域公式

实际上,除了1月,2月,3月……10月也存在类似的公式,即:

[Month1,1] = [Month1,2] + [Month1,3]

[Month2,1] = [Month2,2] + [Month2,3]

[Month3,1] = [Month3,2] + [Month3,3]

……
……
……

[Month10,1] = [Month10,2] + [Month10,3]

也就是说我们需要写10条这样的公式,对于简单的场景来说,这不成问题,但是对于某些包含大量公式的表格,这种写法存在一些弊端,比如容易写错,还有,公式长的时候也需要花费较多时间才能写完。所以,便有了区域公式。

观察上面的公式可以发现,其实每条公式都可以用一条公式来代替,例如以下公式:

[@,1] = [@,2] + [@,3]

这里没有明确的列名,只是用了一个占位符@,但它足以代表以上10条公式。这个时候,我们只需要在适当的位置补上列名就可以了,所以,最终的公式就是:

{Month1, Month2, Month3, Month4, Month5, Month6, Month7, Month8, Month9, Month10}[@,1] = [@,2] + [@,3]

你需要将列名用,隔开,并放置在大括号{ }内,如此,1条公式便相当于10条公式。

占位符不仅仅可以用于纵坐标,还可用于横坐标,如以下公式:

//公式1:
[YearTotal,3] = [Month1,3] + [Month2,3] + [Month3,3] + [Month4,3] + [Month5,3] + [Month6,3] + [Month7,3] + [Month8,3] + [Month9,3] + [Month10,3]

//公式2:
[YearTotal,4] = [Month1,4] + [Month2,4] + [Month3,4] + [Month4,4] + [Month5,4] + [Month6,4] + [Month7,4] + [Month8,4] + [Month9,4] + [Month10,4]

//公式3:
[YearTotal,5] = [Month1,5] + [Month2,5] + [Month3,5] + [Month4,5] + [Month5,5] + [Month6,5] + [Month7,5] + [Month8,5] + [Month9,5] + [Month10,5]

//公式4:
[YearTotal,6] = [Month1,6] + [Month2,6] + [Month3,6] + [Month4,6] + [Month5,6] + [Month6,6] + [Month7,6] + [Month8,6] + [Month9,6] + [Month10,6]

//公式5:
[YearTotal,2] = [Month1,2] + [Month2,2] + [Month3,2] + [Month4,2] + [Month5,2] + [Month6,2] + [Month7,2] + [Month8,2] + [Month9,2] + [Month10,2]

//公式6:
[YearTotal,7] = [Month1,7] + [Month2,7] + [Month3,7] + [Month4,7] + [Month5,7] + [Month6,7] + [Month7,7] + [Month8,7] + [Month9,7] + [Month10,7]

//公式7:
[YearTotal,9] = [Month1,9] + [Month2,9] + [Month3,9] + [Month4,9] + [Month5,9] + [Month6,9] + [Month7,9] + [Month8,9] + [Month9,9] + [Month10,9]

//公式8:
[YearTotal,12] = [Month1,12] + [Month2,12] + [Month3,12] + [Month4,12] + [Month5,12] + [Month6,12] + [Month7,12] + [Month8,12] + [Month9,12] + [Month10,12]

//公式9:
[YearTotal,13] = [Month1,13] + [Month2,13] + [Month3,13] + [Month4,13] + [Month5,13] + [Month6,13] + [Month7,13] + [Month8,13] + [Month9,13] + [Month10,13]

使用区域公式,可以写成:

{2, 3, 4, 5, 6, 7, 9, 12, 13}[YearTotal,@] = [Month1,@] + [Month2,@] + [Month3,@] + [Month4,@] + [Month5,@] + [Month6,@] + [Month7,@] + [Month8,@] + [Month9,@] + [Month10,@]

由此可见,区域公式为公式的书写带来了极大的便利。

支持js语法

在实际场景中,我们经常会碰到一些复杂的公式,如下图,单元格公式使用了Excel自带的Max函数,对于这样的公式,我们可以这样写:

[Month1,9] = ([Month1,6] - [Month1,7] - [Month1,8] > 0 ? [Month1,6] - [Month1,7] - [Month1,8] : 0) + [Month1,5]

JS实现放大镜效果
下一篇:js的Openlayers实现距离面积测量

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论