找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-7-4 18:14  /   查看:802  /  回复:2
本帖最后由 Richard.Ma 于 2024-7-5 09:10 编辑

Spread提供了Command机制来实现对一个操作的执行,撤销和重做。用户在UI上做的大部分操作实际上都是通过执行内置的Command来完成的。

在示例中,也提供了创建一个新的自定义Command的方法
https://demo.grapecity.com.cn/sp ... ustom-action/purejs

但是对于一些用户来说,希望能修改或者说重写控件已有的一些Command,在执行原因逻辑的基础上,在之前或之后加入自定义的一些逻辑。在并且仍然保持能被撤销和重做

这篇教程,以控件已有的命令GC.Spread.Sheets.Commands.editCell 为例介绍如何重写这个命令,

editCell 命令,会在用户对单元格编辑结束后触发,我们尝试重写这个命令,除去原有逻辑外,给被编辑的单元格的右侧单元格也设置一个自定义的值作为标识,

关键代码
  1. //取到原有的editCell的excute方法
  2.       var oldExcute= GC.Spread.Sheets.Commands.editCell.execute;

  3.       //重写editCell的excute方法,仅改变返回结果为false,以阻止这个方法本身会被添加到undoList中
  4.       var newExcute=function (context, options, isUndo) {
  5.             oldExcute (context, options, isUndo) ;
  6.             return false;
  7.       }

  8.       //新的editCell命令定义,
  9.       let NewEditCell = {
  10.             canUndo: true,
  11.             name: "editCell",
  12.             execute: function (context, options, isUndo) {
  13.                   console.log(options);
  14.                   let Commands = GC.Spread.Sheets.Commands;
  15.                   if (isUndo) {
  16.                         Commands.undoTransaction(context, options);
  17.                         return true;
  18.                   } else {
  19.                         Commands.startTransaction(context, options);
  20.                         let sheet = context.getSheetFromName(options.sheetName);

  21.                         sheet.suspendPaint();

  22.                         //在前面先调用自定义的逻辑代码
  23.                         sheet.getCell(options.row, options.col+1).value("["+options.row+","+options.col+"]已修改");
  24.                         console.log(options.cmd);

  25.                         //调用已经重写的editCell的excute方法,执行原有的逻辑
  26.                         newExcute(context, options, isUndo);

  27.                         //在后面执行自定义的逻辑代码
  28.                         sheet.resumePaint();
  29.                         Commands.endTransaction(context, options);
  30.                         return true;
  31.                   }
  32.             },
  33.       };
  34.       //将新的editCell命令注册到spread的commandManager中,替代原有的editCell命令
  35.       spread.commandManager().register("editCell", NewEditCell);
复制代码


上述代码设置后,在编辑单元格时的效果动态图如下:

可以看到在原有的单元格值被设置时,自定义的代码也在事务中被执行了,且同时可以被撤销和重做。

cmd.gif901386718.png




2 个回复

倒序浏览
Dtttax
银牌会员   /  发表于:2024-7-8 17:14:28
沙发
如果涉及到多个sheet的撤回呢,也就是NewEditCell 方法里面动态的可能有多个sheet设置值。.我看了下这个是在外面重新注册editCell。所以sheetName参数不好传。
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-7-9 10:26:44
板凳
NewEditCell是去重写了editCell命令,spreadjs原本的代码在调用这个命令得到时候,传入的就只有当前的sheetName,这是源码里面写死的。你没法更改。

原有的editCell命令本身就是用来只设置单元格值的。你如果要做一些不相关的操作,就不应该想着去重写这个command,而是通过其他的方式,比如自己新定义一个command,通过添加ribbon或者右键菜单按钮来触发
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部