请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Joestar.Xu SpreadJS 开发认证

超级版主

44

主题

7479

帖子

9753

积分

超级版主

Rank: 8Rank: 8

积分
9753

SpreadJS 认证SpreadJS 高级认证

Joestar.Xu SpreadJS 开发认证
超级版主   /  发表于:2024-6-3 14:44  /   查看:96  /  回复:0
本帖最后由 Joestar.Xu 于 2024-6-5 17:40 编辑

在项目开发过程中,经常会碰到需要自己定义一个Command的来满足可以撤回等需求的情况。


细心的朋友可能会发现,我们在自定义Command中调用SpreadJS原生的Command的时候,在撤销栈中会存在两个撤销选项。

这在撤销的时候非常不友好,用户需要撤销两次,但是实际上他可能只是点击了一个按钮。

面对这样的问题我们应该如何解决呢?

以粘贴操作举一个简单的例子:

  1. let mySpecialPaste = Object.assign(
  2.   {},
  3.   GC.Spread.Sheets.Commands.clipboardPaste
  4. );
  5. mySpecialPaste.canUndo = false;
  6. spread.commandManager().register("myClipboardPaste", mySpecialPaste);
复制代码


先创建一个clipboardPaste Command的拷贝,并修改其canUndo属性为false。

然后在自定义的Command中使用这个mySpecialPaste Command:

  1. let test = {
  2.   canUndo: true,
  3.   name: "test",
  4.   execute: function (context, options, isUndo) {
  5.     let Commands = GC.Spread.Sheets.Commands;
  6.     if (isUndo) {
  7.       Commands.undoTransaction(context, options);
  8.       return true;
  9.     } else {
  10.       Commands.startTransaction(context, options);
  11.       let sheet = context.getSheetFromName(options.sheetName);
  12.       sheet.suspendPaint();
  13.       sheet.getCell(0, 0).value("123");
  14.       spread.commandManager().execute({
  15.         cmd: "myClipboardPaste",
  16.         sheetName: "Sheet1",
  17.         fromSheet: sheet,
  18.         fromRanges: fromRange,
  19.         pastedRanges: toRanges,
  20.         isCutting: true,
  21.         clipboardText: "",
  22.         pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all,
  23.       });
  24.       sheet.resumePaint();
  25.       Commands.endTransaction(context, options);
  26.       return true;
  27.     }
  28.   },
  29. };
复制代码


最后我们将这个Command注册并重写oldOpenMenu将这个Command添加到右键菜单中,并修改它的撤销重做栈中的命名:

  1. spread.commandManager().register("test", test);
  2. let oldOpenMenu = spread.contextMenu.onOpenMenu;
  3. spread.contextMenu.onOpenMenu = function (
  4.   menuData,
  5.   itemsDataForShown,
  6.   hitInfo,
  7.   spread
  8. ) {
  9.   oldOpenMenu.apply(this, arguments);
  10.   console.log(itemsDataForShown);
  11.   itemsDataForShown.push({
  12.     text: "test",
  13.     name: "test",
  14.     command: "test",
  15.     workArea: "viewport",
  16.   });
  17. };
复制代码

  1. let undoList = GC.Spread.Sheets.Designer.getCommand(
  2.   GC.Spread.Sheets.Designer.CommandNames.UndoList
  3. );
  4. let redoList = GC.Spread.Sheets.Designer.getCommand(
  5.   GC.Spread.Sheets.Designer.CommandNames.RedoList
  6. );
  7. redoList.commandMap["test"] = "test";
  8. undoList.commandMap["test"] = "test";
  9. designerConfig.commandMap = {};
  10. designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.UndoList] =
  11.   undoList;
  12. designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.RedoList] =
  13.   redoList;

  14. let designer = new GC.Spread.Sheets.Designer.Designer(
  15.   "gc-designer-container",
  16.   designerConfig
  17. );
复制代码


以上就大功告成,此时执行命令就只有一个撤销选项了。

0 个回复

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