SpreadJS 自定义右键菜单-在选择行下面插入行

使用SpreadJS产品的小伙伴可能会注意到，sheet插入行时会在选中行的上面新增一行，这个行为也是与Excel保持一致的。
不过对于一些行业的小伙伴来说，在下方插入行更满足他们的需求。SpreadJS虽然没有直接提供在下方插入行的API，不过可以通过重写右键菜单插入行选项来实现这个需求。
接下来我们结合附件的demo来带领大家共同来实现这个功能。

1、自定义右键菜单大家可以参考这两篇技术博客，这里就不重复介绍了。
https://www.grapecity.com.cn/blo ... ht-click-menu-part1
https://www.grapecity.com.cn/blo ... ht-click-menu-part2

2、首先来定义向下插入行的命令，在execute 添加我们想执行的方法，在本例就是 在选中行下方插入行的方法。
我们已经知道，SpreadJS默认就是在选中行的上一行插入的，所以实现思路就是从选中行的下一行 开始插入指定行数。
听着有点绕，参考下方代码就容易理解了。

1. var insertRowsBelow = {
   
2.                 canUndo: true,
   
3.                 name: "insertRowsBelow",
   
4.                 execute: function (context, options, isUndo) {
   
5.                     var Commands = GC.Spread.Sheets.Commands;
   
6.                     if (isUndo) {
   
7.                         Commands.undoTransaction(context, options);
   
8.                         return true;
   
9.                     } else {
   
10.                         Commands.startTransaction(context, options);
    
11.                         var sheet = context.getSheetFromName(options.sheetName);
    
12.                         sheet.suspendPaint();
    
13.                         console.log(options.selections)
    
14.                         //向下插入行
    
15.                         if (options.selections && options.selections.length) {
    
16.                             var row = options.selections[0].row + 1;
    
17.                             var rowCount = options.selections[0].rowCount;
    
18.                             sheet.addRows(row, rowCount);
    
19.                         }
    
20.                         sheet.resumePaint();
    
21. 
    
22.                         Commands.endTransaction(context, options);
    
23.                         return true;
    
24.                     }
    
25.                 }
    
26.             };

复制代码

3、注册该命令

1. spread.commandManager().register("insertRowsBelow", insertRowsBelow);

复制代码

4、替换原有的插入命令

1. function MyContextMenu() {}
   
2.             MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
   
3.             MyContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
   
4.                 itemsDataForShown.forEach(function (item, index) {
   
5.                     if (item && item.name === "gc.spread.insertRows") {
   
6.                         item.command = "insertRowsBelow"
   
7.                     }
   
8.                 });
   
9. 
   
10.             };
    
11.             var contextMenu = new MyContextMenu();
    
12.             spread.contextMenu = contextMenu;

复制代码

现在就实现了向下插入行的需求了，如下图：

完整代码可参考附件demo。

关联贴：SpreadJS 解决右键向下插入行时汇总公式无效的问题

请问下这个向下插入怎么不覆盖原来的插入，纯新增

可以添加一个右键菜单选项即可，添加菜单可以参考

https://demo.grapecity.com.cn/sp ... context-menu/purejs

我想请问下如何向这个方法里面传递参数execute

李樱 发表于 2023-2-10 16:42
我想请问下如何向这个方法里面传递参数execute

在此帖中已进行回复。请尽量避免重复发帖，您发的问题这边都会处理的。https://gcdn.grapecity.com.cn/fo ... hread&tid=54576