组件版设计器自定义右键菜单之-向下插入行

在前面的贴子 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.                 });

复制代码

最终效果如下图：

完整代码请查看附件。