跨Sheet公式选择

需求：SpreadJS实现像Excel一样的跨sheet公式选择

背景：

SpreadJS目前支持像Excel一样的跨sheet公式选择，并且支持类似Excel的UI操作，可以输入等号后跨sheet选择另一个sheet上的区域，选择区域会实时更新在文本编辑框中。

但在使用过程中会出现一个问题，当想要跨sheet选中同一个位置的单元格时，会发现无法通过鼠标选取，只能够通过键盘输入的形式来完成。例如下图所示，在Sheet1的A1上进行公式编辑，让其跨sheet选取Sheet2的A1时候会发现无法进行选取，会被公式编辑框所遮挡。

在Excel中做同样操作时候，会有下面的效果，所以不会有冲突

两者设计都有着各自的考虑，SpreadJS这样的设计会给用户明确的提示，目前处于编辑状态。但是会造成无法跨sheet选中同样位置的单元格，手动输入的同时带来了不便。孰优孰劣，仁者见仁。

解决方案：

如果用户想要在SpreadJS上实现Excel相同的选取效果，只需要通过代码修改一下设计即可。具体步骤如下：

1.监听EditStarting与EditEnded事件

为什么要监听这两个事件呢，首先我们做如下分析：

编辑框的隐藏只是在跨sheet设置公式时发生，那么在同一个sheet中进行公式编辑则不需要隐藏。所以我们需要在EditStarting事件中记录一下是哪个sheet进入的编辑状态。这个状态以便于后续的判断使用。同理退出编辑状态代表这个操作的完成，退出后需要将之前记录的变量进行清空处理，这样可以避免后续的混淆。相关代码设置如下：

var editSheetName;
spread.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) {
  editSheetName = args.sheetName;
});
spread.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) {
  editSheetName = null;
});

2.监听SheetChanged事件

我们需要通过SheetChanged事件去判断切换sheet的操作。在切换sheet之后，我们需要把编辑框隐藏掉。相关代码如下：

spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (sender, args) {
  console.log(args.propertyName);
  if (args.propertyName == "isSelected") {
    if (editSheetName != null && editSheetName != args.sheetName) {
      setTimeout(() => {
        var element = document.getElementById("across");
        element.setAttribute("hidden", "true");
      }, 0);
    }
  }
});

这里考虑到执行顺序，在隐藏编辑框时候需要设置一个setTimeout，间隔为0毫秒，用于更改代码的执行顺序。

以上就是大致的思路和做法，修改后实际效果如下：

这样的行为跟Excel就一样了。

完整的代码参考附件：

跨sheet选取公式.zip

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