监听公式单元格值变化

问题：SpreadJS如何监听公式单元格值的变化

背景：

很多小伙伴在使用SpreadJ的公式部分时，会遇到这样的问题：当公式单元格值变动的时候，无法通过CellChanged 事件来监听到值的变化情况，那么想要监控到该公式单元格值的变化情况应该怎么操作呢？

实现方案1：

SpreadJS在V13添加了公式追踪的特性，这个问题就可以通过公式追踪来解决。具体操作如下：首先我们结合示例来学习公式追踪相关的两个方法：getDependents() 和 getPrecedents() 。

示例：

在单元格B1设置公式：’=A1+A2+A3‘，A1、A2、A3的值分别为：1、2、3。

getDependents() ：可以判断这个单元格被哪些公式依赖。

参数为这个单元格的行列索引，返回引用该单元格的公式的信息。如下图所示:

162516kw9fzhhc8788zl2r

在本例中，A1、A2、A3的值发生变化时，我们如何获取到公式单元格B1改变后的值呢？

首先可以通过getPrecedents（）来获取引用的单元格区域的信息，

var getPrecedents = sheet.getPrecedents(0, 0);
var row = [],
  col = [],
  value = [];
for (var i = 0; i < getPrecedents.length; i++) {
  row.push(getPrecedents[i].row);
  col.push(getPrecedents[i].col);
  value.push(sheet.getValue(row, col));
}

绑定ValueChanged事件，监听引用的单元格区域的值，一旦发生变化，使用getValue 获取公式值变化情况。

sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
  var newValue = info.newValue;
  setTimeout(function () {
    for (var i = 0; i < row.length; i++) {
      if (info.row === row[i] && info.col === col[i]) {
        if (newValue !== value[i]) {
          var formulaValue = sheet.getValue(0, 1);
          console.log(formulaValue);
        }
      }
    }
  }, 0);
});

这里要注意：使用setTimeout函数才能获取到变化后的公式值，如果不使用获取到的是旧值。

现在我们来测试下：将A2值改为33，结果如下图所示：

163633l7fesswzwp78vhsm

查看完整代码可以参考附件demo：mydemo.zip

实现方案2：

在学习指南中有详细介绍脏数据的概念，大家可以点击下方链接了解详情

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/cells/edit/dirty-items#

在单元格的值发生变化时，我们可以调用 getDirtyCells 方法来获取脏单元格。

示例：

1）监听ValueChanged事件，当公式引用的单元格值变动时，会触发此事件。

sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
  console.log(
    info.row +
      "," +
      info.col +
      "," +
      "由" +
      info.oldValue +
      "改变为" +
      info.newValue
  );
});

174131a5dz3pdyudf32fd5

2）这个时候我们获取脏单元格，会发现公式值仅在第一次变动时被记录下来，后续变动无法监听到。

所以我们要使用 clearPendingChanges 从当前表单中清除脏数据：

sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
  console.log(
    info.row +
      "," +
      info.col +
      "," +
      "由" +
      info.oldValue +
      "改变为" +
      info.newValue
  );
  var arr = sheet.getDirtyCells(-1, -1, -1, -1);
  console.log(arr);
  sheet.clearPendingChanges({
    clearType: 1,
    row: -1,
    rowCount: -1,
    col: -1,
    colCount: -1,
  });
});

3）再次运行测试，虽然公式值的变动每次都被监听到，但无法获取到变动后的值。（newValue总是延迟了一步，获取到的是上一次的值）

这是因为 ValueChanged 事件还未执行完毕，此时公式值还未更改。

所以需要使用 setTimeout 方法异步执行获取脏数据的代码：

sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
  console.log(
    info.row +
      "," +
      info.col +
      "," +
      "由" +
      info.oldValue +
      "改变为" +
      info.newValue
  );
  setTimeout(() => {
    var arr = sheet.getDirtyCells(-1, -1, -1, -1);
    console.log(arr);
    sheet.clearPendingChanges({
      clearType: 1,
      row: -1,
      rowCount: -1,
      col: -1,
      colCount: -1,
    });
  }, 0);
});

这时再运行就可以成功监听到公式值的变动了。

175047iqrytknnt3qt8vq1

作者: Lynn.Dou | 审核：Lynn.Dou | 更新时间：2023.12.12