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

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-11-1 14:43  /   查看:1926  /  回复:0
本帖最后由 Lynn.Dou 于 2021-11-29 10:45 编辑

在前面的贴子 SpreadJS 自定义右键菜单-在选择行下面插入行  我们有介绍如何在SpreadJS中通过自定义右键菜单实现此需求。
有使用组件版设计器的小伙伴有了疑惑,
如何通过自定义设计器的config如何实现右键菜单-向下插入行呢?

组件版设计器右键菜单添加新项与SpreadJS有所不同,需要在config的基础上进行修改。

代码如下:
1、定义右键菜单结构
  1. config.commandMap = {
  2.                                 Welcome: {
  3.                                         title: "Welcome",
  4.                                         text: "Welcome",
  5.                                         iconClass: "ribbon-button-welcome",
  6.                                         bigButton: "true",
  7.                                         commandName: "Welcome",
  8.                                         execute: async (context, propertyName, fontItalicChecked) => {
  9.                                                 
  10.                                         }
  11.                                 },
  12.                 myCmd:{
  13.                     text: "向下插入行",
  14.                     commandName: "myCmd",
  15.                     visibleContext:"ClickRowHeader",
  16.                     execute: async (context, propertyName, fontItalicChecked) => {
  17.                         var spread = context.getWorkbook();
  18.                         spread.commandManager().execute({cmd:"insertRowsBehind"})
  19.                     }
  20.                 }
  21.                         }
复制代码
2、右键菜单添加新项
  1. config.contextMenu.splice(26,0,"myCmd");
复制代码

3、初始化设计器
  1. var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
  2.             var spread = d.getWorkbook();
复制代码



4、定义和注册insertRowsBehind命令

  1. spread.commandManager().register("insertRowsBehind",
  2.                 {
  3.                     canUndo: true,
  4.                     execute: function (context, options, isUndo) {
  5.                         var Commands = GC.Spread.Sheets.Commands;
  6.                         // 在此加cmd
  7.                         options.cmd = "insertRowsBehind";
  8.                         if (isUndo) {
  9.                             Commands.undoTransaction(context, options);
  10.                             return true;
  11.                         } else {
  12.                             var sheet = spread.getActiveSheet();
  13.                             // 注意:需要在options中定义sheetName,否则撤销行为可能无效。
  14.                             options.sheetName = sheet.name();
  15.                             Commands.startTransaction(context, options);
  16.                             var sels = sheet.getSelections();
  17.                             if (sels && sels.length > 0) {
  18.                                 for (var i = 0; i < sels.length; i++) {
  19.                                     var sel = sels[i];
  20.                                     var row = sel.row;
  21.                                     var rowCount = sel.rowCount;
  22.                                     sheet.addRows(row + 1, rowCount);
  23.                                 }
  24.                             }
  25.                             Commands.endTransaction(context, options);
  26.                             return true;
  27.                         }
  28.                     }
  29.                 });
复制代码



最终效果如下图:
image.png668146972.png
完整代码请查看附件。




自定义右键菜单-向下插入行.html

5.02 KB, 下载次数: 65

0 个回复

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