找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

201

主题

9919

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
15578

讲师达人悬赏达人微信认证勋章SpreadJS 认证SpreadJS 高级认证元老葡萄

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-6-1 11:21  /   查看:1049  /  回复:0
SpreadJS目前支持像Excel一样的跨sheet公式选择,并且支持类似Excel的UI操作,可以输入等号后跨sheet选择另一个sheet上的区域,选择区域会实时更新在文本编辑框中。
但在使用过程中会出现一个问题,当想要跨sheet选中同一个位置的单元格时,会发现无法通过鼠标选取,只能够通过键盘输入的形式来完成。例如下图所示,在Sheet1的A1上进行公式编辑,让其跨sheet选取Sheet2的A1时候会发现无法进行选取,会被公式编辑框所遮挡。
1.gif
在Excel中做同样操作时候,会有下面的效果,所以不会有冲突
2.gif


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

如果用户想要在SpreadJS上实现Excel相同的选取效果,只需要通过代码修改一下设计即可。具体步骤如下:
1.监听EditStarting与EditEnded事件
为什么要监听这两个事件呢,首先我们做如下分析:
编辑框的隐藏只是在跨sheet设置公式时发生,那么在同一个sheet中进行公式编辑则不需要隐藏。所以我们需要在EditStarting事件中记录一下是哪个sheet进入的编辑状态。这个状态以便于后续的判断使用。同理退出编辑状态代表这个操作的完成,退出后需要将之前记录的变量进行清空处理,这样可以避免后续的混淆。相关代码设置如下:
  1. var editSheetName;
  2.                         spread.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) {
  3.   editSheetName = args.sheetName ;
  4.                         });
  5.                         spread.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) {
  6.   editSheetName = null;
  7.                         });
复制代码
2.监听SheetChanged事件
我们需要通过SheetChanged事件去判断切换sheet的操作。在切换sheet之后,我们需要把编辑框隐藏掉。相关代码如下:
  1. spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (sender, args) {
  2.   console.log(args.propertyName);
  3.   if(args.propertyName == "isSelected"){
  4.     if(editSheetName != null && editSheetName != args.sheetName){
  5.       setTimeout(() => {
  6.         var element = document.getElementById("across");
  7.         element.setAttribute('hidden', 'true');       
  8.       }, 0);                       
  9.     }               
  10.   }
  11.                         });
复制代码
这里考虑到执行顺序,在隐藏编辑框时候需要设置一个setTimeout,间隔为0毫秒,用于更改代码的执行顺序。
以上就是大致的思路和做法,修改后实际效果如下:
3.gif
这样的行为跟Excel就一样了。
完整的代码参考附件:

跨sheet选取公式.zip

2.51 MB, 下载次数: 52

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部