SpreadJS 自定义“右键插入”功能

Spread JS V11开始已有了原生右键菜单，右键菜单中的项可以灵活的自定义（参考扩展上下文菜单）。当现有的菜单不满足我们需求时候，我们可以通过自定义Command的方式拓展功能。

在Excel中我们常用的一个操作是插入行，并希望在插入行后自动复制上一行的样式，合并单元格，那么以这个需求为例，讲解如何重定义现有插入菜单

1. 定义插入复制样式insertRowsCopyStyle命令。

   Command中使用Transaction实现Undo和Redo，exectue时先调用原有“gc.spread.contextMenu.insertRows”命令插入行，然后复制插入行前样式。

   var insertRowsCopyStyle = {
       canUndo: true,
       name: "insertRowsCopyStyle",
       execute: function (context, options, isUndo) {
           var Commands = GC.Spread.Sheets.Commands;
           if (isUndo) {
               Commands.undoTransaction(context, options);
               return true;
           } else {
               Commands.startTransaction(context, options);
               var sheet = context.getSheetFromName(options.sheetName);
               sheet.suspendPaint();
               options.cmd = "gc.spread.contextMenu.insertRows"
               context.commandManager().execute(options);
               options.cmd = "insertRowsCopyStyle";
   
               var beforeRowCount = 0;
               if (options.selections && options.selections.length) {
                   var selections = getSortedRowSelections(options.selections)
                   for (var i = 0; i < selections.length; i++) {
                       var selection = selections[i];
                       if (selection.row > 0) {
                           for (var row = selection.row + beforeRowCount; row < selection.row + beforeRowCount + selection.rowCount; row++) {
                               sheet.copyTo(selection.row + beforeRowCount - 1, -1, row, -1, 1, -1, GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.span);
                           }
                       }
                       beforeRowCount += selection.rowCount;
                   }
               }
               sheet.resumePaint();
   
               Commands.endTransaction(context, options);
               return true;
           }
       }
   };
   

   getSortedRowSelections为对selections按照row Index排序的方法。

   function getSortedRowSelections(selections) {
       var sortedRanges = selections;
       for (var i = 0; i < sortedRanges.length - 1; i++) {
           for (var j = i + 1; j < sortedRanges.length; j++) {
               if (sortedRanges[i].row > sortedRanges[j].row) {
                   var temp = sortedRanges[i];
                   sortedRanges[i] = sortedRanges[j];
                   sortedRanges[j] = temp;
               }
           }
       }
       return sortedRanges;
   }
   

2. 注册insertRowsCopyStyle命令

   spread.commandManager().register("insertRowsCopyStyle", insertRowsCopyStyle);
   

3. 替换原有插入命令

   function MyContextMenu() {}
       MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
       MyContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
           itemsDataForShown.forEach(function (item, index) {
               if (item && item.name === "gc.spread.insertRows") {
                   item.command = "insertRowsCopyStyle"
               }
           });
   
       };
       var contextMenu = new MyContextMenu();
       spread.contextMenu = contextMenu;
   

在onOpenMenu 方法中，可以拿到当前点击区域可操作的所有右键菜单内容，对itemsDataForShown进行修改，可以更改最终呈现出来右键菜单的内容。比如删除某一项，或者设置disable=true来禁止。

在线测试地址：https://runjs.cn/detail/yebbozwj