告别硬编码让你的前端表格自动计算的实例代码
|
这样写本身没有错，但是我得提醒你，这里的行是不固定的，也就是说表格有多少行完全取决于当时的数据库情况，有可能今天只有3行数据，明天会有5行，后天会有50行。我们不可能随着行数增多而增加公式，所以对于这种行数不确定的表格，我们有一种新的写法，我将它称为[y]公式，因为跟普通公式相比，它没有横坐标： [column3] = [column2] - [column1] 只需要一行公式，AutoCalculate便会将公式应用于指定列名下的所有行。 合计列与小数位数 有时候，我们需要求某一列的和，虽然求某一列的和可能不是我们的最终目的，但却是我们完成计算的必要步骤，如存在以下关系： 单元格③ = 单元格① / 单元格② 单元格②是GroupApprovedTotal列的合计值，我们用<列名>来表示，即：<GroupApprovedTotal>。加上这里的行不固定，需要用到[y]公式，所以公式应该写成： [GroupApprovedTotalPercent] = [GroupApprovedTotal] / <GroupApprovedTotal> 我们知道，在除法中，除数是不可以为0的，所以正确的写法应该是： [GroupApprovedTotalPercent] = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal> 当你将这条公式放你的代码，并启动程序后，聪明的你应该很快发现，你得到的值不够精确，如上面单元格③显示的数值是66.91%，如果你的单元格①和单元格②跟上图的数值相同，你的单元格③很可能是67%，这是为什么呢？ 默认的，AutoCalculate会将计算结果保留2位小数，67%，即0.67，如果想得到66.91%，即0.6691，那就是需要保留4位小数，这时，你需要告诉AutoCalculate，你需要保留4位小数，所以，完整的写法应该是： [GroupApprovedTotalPercent]#4 = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal> 在公式的等号左边，被赋值单元格的右边，加“#”号，紧跟着写上小数位数，注意，“#”和小数位数之间不能有空格，前后可以有空格。 没有RowNo的表格 终于到了回答这个问题的时候，我想问问大家，我们是如何在一个平面找到一个点的？答案就是需要这个点的横坐标和纵坐标，同样的，在一个表中，如何找到一个单元格？首先我们可以确定纵坐标，因为所有的列名都是已知的，关键就在于横坐标的确定。采用RowNo来定位，大家一定会觉得似曾相识，因为它跟Excel左侧的序号很像，但不代表只有数字才能作为横坐标。只要值具有唯一性，即不重复，就可以作为横坐标。 举个例子，假设以下的表格是固定两行，没有RowNo，但是可以看出公司编号（BuCode）具有唯一性，那么BuCode就可以作为参考字段，BuCode的值就是横坐标，那么公式就可以写成： [SumDiffMonth1,F1136] = [GroupApprovalMonth1,F1136] - [Month1,F1136] [SumDiffMonth1,F2056] = [GroupApprovalMonth1,F2056] - [Month1,F2056] 如果有RowNo，用RowNo做参考字段时这样写： [SumDiffMonth1,2] = [GroupApprovalMonth1,2] - [Month1,2] [SumDiffMonth1,3] = [GroupApprovalMonth1,3] - [Month1,3] 跨数据源计算 何为跨数据源计算？用过Excel公式的朋友应该能看懂下面这个单元格的公式代表的意思。很明显这个单元格的值是其他Sheet的数据经过运算后的值，跨数据源计算就是专门处理这样的场景。 我们很少甚至不会在前台做跨数据源计算，这里是想告诉大家如何书写公式及调用AutoCalculate的方法，以便在“后台用法”这一章节真正使用到它。 首先，为了取得其他数据源单元格的数据，我们需要拓展一下单元格，之前，我们的单元格是这样的：[y,x]，暂且称为二元单元格吧，还有这样的单元格：[y]，成为一元单元格，现在，你会看到这样的单元格：[外部数据源,y,x]，即三元单元格，三元单元格的出现令到AutoCalculate定位单元格的能力从二维拓展到三维，即不管你有多少表，AutoCalculate都能找到你要的数据。 这是一条使用了三元单元格的公式： [Month1,4] = [OutputTax,Month1,7] 其中OutputTax是某个数据源的名称，你可以任意取名，越简洁越好，否则复杂的公式会被写得很长，难以阅读。 下面这条公式会从两个数据源OutputTax和TaxRate取值： [Month1,5] = [OutputTax,Month1,10] * (1 + [TaxRate,Month1,1] / 100) 我相信通过阅读前面章节的内容，你已经能够看懂下面公式的意思，其中前三行公式使用了外部数据源，并结合了区域公式的写法。 是时候调用我们的计算方法了，为了演示效果，我添加了一个按钮，并将方法写在按钮事件中 看看我们做了什么： ① 取得某个外部数据源outputTaxDatas ② 取得当前表格的数据源payableTaxDatas ③ 从数据库获取另一个外部数据源taxRateDatas ④ 这里是重点，先来看看AutoCalculate 的构造函数，这里有两个参数： formulas：公式，一个数组 options：可选参数，一个object对象 options有个属性externalDatas，表示外部数据源，是一个数组，因为数据可能有多个，每个数组元素都是一个对象，有3个属性： name：外部数据源名称，这里取什么名称，对应公式中的外部数据源名称 refField：参考字段 datas：数据源 实例化AutoCalculate后，这里调用了一个新的方法calculate，它有2个参数： gridDatas：需要重新计算的表格数据，是一个数组 refField：参考字段 AutoCalculate之所有支持所有的js表格控件以及能被后台调用，就是借助于这个方法，因为不论是哪种js表格控件，都能够提取出表格数据（纯数据），数据通常是数组形式，只要将这个数组传进来就可以了。 ⑤ 调用calculate后，payableTaxDatas的值已经是运算过的最新值，现在将它绑定到当前的表格即可。 运行程序后的界面： 点击获取数据后： 后台用法 后台调用AutoCalculate，我们需要用到V8引擎，还有一点很重要，后台调用AutoCalculate也需要用到公式，我们之前的做法是将所有公式放在Extjs的Controller文件中，如下图： 为了方便后台调用，我们将公式提取出来作为一个单独的文件 项目中对AutoCalculate后台调用进行了封装，使用非常简单。 调用方法如图： 还是分步解析： ① 保存当前表格的数据 ② 获取公式所在js文件的目录 ③ 获取两个外部数据源 ④ 调用封装后的后台方法，使用了第②步和第③步获取的数据，其中FormulaExpression是公式表达式，即通过这个表达是来找到你提供的js文件中的公式 ⑤ 上一步返回的newDatas已经是经过运算的最新数据，现在将这些数据保存到数据库 注意事项 书写公式时有两点需要注意： 单元格中不允许出现空格 /正确写法： [Month12,1] = [Month11,1] * 10 //错误写法： [Month12,1 ] = [ Month11, 1] * 10 小数位数标记与小数位数之前不能有空格 //正确写法： [Month12,1] #3 = [Month11,1] * 10 //错误写法： [Month12,1] # 3 = [Month11,1] * 10 到此这篇关于告别硬编码让你的前端表格自动计算的文章就介绍到这了,更多相关前端表格自动计算内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |