同步公式变化

问题：如何同步公式变化？

背景：

数据填报是SpreadJS常见的使用场景，在数据填报场景中，经常存在着数据的前后端交互。例如，将页面填报的数据与后端交互，后端将其存储至数据库。

一般在这种情况下，我们不会选择存储所有的数据，而是选择增量存储，即每次将有修改的数据获取到，并且更新至数据库中。这样可以有效减少每次交互的数据量。基于SpreadJS类Excel电子表格的特性，往往在数据填报时不单单局限于纯数据的填报，可能还会包含公式计算的元素，所以在交互时就需要将公式的情况也考虑进去。

以此需求为例：用户需要将填写的数据和公式存储在数据库中。

实现方案：

实现需求的核心是利用SpreadJS的脏数据功能获取所有修改的内容，之后再按要求进行处理。

首先通过脏数据获取所有的修改痕迹：

var dirtyCells = sheet.getDirtyCells();

结果是一个对象数组，对象中只有值的属性没有公式的属性。这里用户需要将公式保存至数据库，所以需要遍历后进行判断再结合getFormula来获得公式。

for (var i = 0; i < dirtyCells.length; i++) {
  var changeData = {};
  if (sheet.getFormula(dirtyCells[i].row, dirtyCells[i].col) != null) {
    var formula = sheet.getFormula(dirtyCells[i].row, dirtyCells[i].col);
    changeData.type = "formula";
    changeData.row = dirtyCells[i].row;
    changeData.col = dirtyCells[i].col;
    changeData.value = formula;
  } else {
    changeData.type = "value";
    changeData.row = dirtyCells[i].row;
    changeData.col = dirtyCells[i].col;
    changeData.value = dirtyCells[i].newValue;
  }
  changeDataArray.push(changeData);
}

这里在循环中判断单元格是否存在公式，如果存在公式就通过getFormula获取公式并存入changeDataArray中，如果不存在直接获取值存入changeDataArray中。

最终，我们可以将changeDataArray传入后端，后端解析后保存至数据库。

另外，通过sheet.clearPendingChanges();我们可以在每次传入之后清空脏数据池，以免再下次获取的时候重复拿到多余的数据。

完整demo请参考该链接附件。

作者: Clark.Pan | 审核：Lynn.Dou | 更新时间：2023.12.3