设置公式

问题：表格数据绑定如何设置公式？

背景

SpreadJS 目前不支持在表格数据绑定时设置公式。

这里我们可以用代码来实现绑定公式的效果，我们先来看一下实现后的效果是怎样的。

数据源：

填报页面（加载数据源、添加行）：

实现思路：

首先在设计模板时，表格中需要输入公式，这里要注意，尽量使用列公式，即[@Column]的形式，避免使用“C5”这种引用，否则如果此表格上方还有一个表格， 在上方表格纵向扩展后，就会出现公式错位的现象。

数据源方面，这里可以看到，我将数据源按照表名进行了封装，这是考虑到设计模板可能会有多张表都进行了数据绑定，这样封装后更具通用性。

最后的填报页面就是代码逻辑的重点了，我们一步一步来看：

1. 导入模板文件

在demo中我没有写相关逻辑，是手动使用设计器的导入ssjson功能进行导入的，在实际业务中，需要将json文件通过http请求拿到，再使用spread.fromJSON方法导入，效果是一样的。

2. 维护公式

导入json后，我们需要遍历所有的table，获取其中的公式：

最终，我们将所有公式以这样的形式保存在一个变量中：

这个变量会在第5步用到，其中，蓝色箭头的gcTable0代表table的名字；而红色箭头的4代表是第四列，由于下标从0开始，第4列是E列。

特别说明一点，为什么前文说按照sheet来保存数据，而这里表名的保存却没有按照sheet区分？这是由于table在spread全局是唯一的，表名即使在不同的sheet页也不会重复，所以不存在这个问题。

3. 监听表格新增行

在表格新增行后，我们希望新增的行也能够保留上方的公式，于是我们需要监听新增行事件，并复制上一行的formula

4. 设置数据源

这一步很好理解，就是把我们的数据源按照sheet页依次进行设置

5. 还原公式（重点）

这是最关键的一步，细心的朋友可以发现，上一步我们设置数据源后，公式都消失了。从我们第2步维护公式的变量中，我们其实已经保存了所有表格的所有公式，现在我们要做的，就是先在表格的第一行对应的位置设置公式，然后把这个公式扩展到表格所有列，这里用到了sheet.fillAuto方法，具体可以查看此文档

Tips:

到这里就结束了，最后需要说明一点，由于业务的不同，table的标题行、汇总行状态都不同，我给出的demo是有标题行，没有汇总行的，大家如果要应用到实际业务中，需要根据自己的业务做出一些修改，具体需要修改的地方参考下图：

详细代码请参考附件：

表格数据绑定-设置公式.zip

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.24