SpreadJS在线表格编辑器自定义功能 -- 添加多级右键菜单（Content Menu）

上一期我们将了如何自定义右键菜单，本期我们在其基础上进行扩展，将讲解如何自定义多级的右键菜单
下面实例将定制一个多级菜单用于设置文字旋转功能，提供三个子菜单-90度，水平，90度
首先我们先定义菜单文字旋转。

1. designerConfig.commandMap["textRotation"]= {
   
2.         text: "文字旋转",
   
3.         commandName: "textRotation",
   
4.         subCommands:[
   
5.             "negativeVertical",
   
6.             "horizontal",
   
7.             "vertical"
   
8.         ],
   
9.         visibleContext:"ClickViewport"
   
10.     }

复制代码

在父级菜单中我们没有定义具体的execute以为改菜单不需要执行任何操作，我们定义了subCommands来扩展三个子菜单

1. subCommands:[
   
2. "negativeVertical",
   
3. "horizontal",
   
4. "vertical"
   
5. ]

复制代码

之后我们同样在commandMap中定义三个子菜单

1. designerConfig.commandMap["negativeVertical"]= {
   
2.         text:"-90度",
   
3.         commandName: "negativeVertical",
   
4.         //enableContext: "allowEditObject",
   
5.         execute: async (context) => {
   
6.             var spread = context.getWorkbook();
   
7.             var commandManager = spread.commandManager();
   
8.             commandManager.execute({cmd: "executeRotation", sheetName: spread.getActiveSheet().name(),degree:-90});
   
9.         }
   
10.     }
    
11. 
    
12.     designerConfig.commandMap["horizontal"]= {
    
13.         text:"水平",
    
14.         commandName: "horizontal",
    
15.         //enableContext: "allowEditObject",
    
16.         execute: async (context) => {
    
17.             var spread = context.getWorkbook();
    
18.             var commandManager = spread.commandManager();
    
19.             commandManager.execute({cmd: "executeRotation", sheetName: spread.getActiveSheet().name(),degree:0});
    
20.         }
    
21.     }
    
22. 
    
23.     designerConfig.commandMap["vertical"]= {
    
24.         text:"90度",
    
25.         commandName: "vertical",
    
26.         //enableContext: "allowEditObject",
    
27.         execute: async (context) => {
    
28.             var spread = context.getWorkbook();
    
29.             var commandManager = spread.commandManager();
    
30.             commandManager.execute({cmd: "executeRotation", sheetName: spread.getActiveSheet().name(),degree:90});
    
31.         }
    
32.     }

复制代码

这里需要定义具体的execute，因为子菜单点击后需要进行操作，操作中我们为了方便undo redo,选择用命令实现具体操作。具体命令定义如下

1. var spread = designer.getWorkbook();
   
2.     var commandManager = spread.commandManager();
   
3.     var _executeRotation = {
   
4.         canUndo: true,
   
5.         execute: function (context, options, isUndo) {
   
6.             var Commands = GC.Spread.Sheets.Commands;
   
7.             if (isUndo) {
   
8.                 Commands.undoTransaction(context, options);
   
9.                 return true;
   
10.             } else {
    
11.                 Commands.startTransaction(context, options);
    
12.                 var sheet = context.getSheetFromName(options.sheetName);
    
13.                 sheet.suspendPaint();
    
14.                 var selections = sheet.getSelections();
    
15.                 for(var i=0;i<selections.length;i++){
    
16.                     sheet.getRange(selections[i].row,
    
17.                         selections[i].col,
    
18.                         selections[i].rowCount,
    
19.                         selections[i].colCount,
    
20.                         GC.Spread.Sheets.SheetArea.viewport).textOrientation(options.degree);
    
21.                 }
    
22.                 sheet.resumePaint();
    
23.                 Commands.endTransaction(context, options);
    
24.                 return true;
    
25.             }
    
26.         }
    
27.     };
    
28.     commandManager.register("executeRotation", _executeRotation);

复制代码

最后我们需要将父级菜单push到contextmenu中，这里注意只需要push父级菜单即可，子菜单不需要因为子菜单是通过父级菜单扩展弹出的。但是子菜单需要定义在commandMap中。

1. designerConfig.contextMenu.push("textRotation");

复制代码

visibleContext  有哪些可选项呢

HDXXH 发表于 2021-2-4 17:35
visibleContext  有哪些可选项呢

您的具体需求是什么?

能不能添加一个示例的演示动图？

这样设置完右键并不会生效 需要重新setConfig吧  
以前的方法设置完再次右键就会生效的

littleknife 发表于 2021-3-25 20:15
这样设置完右键并不会生效 需要重新setConfig吧  
以前的方法设置完再次右键就会生效的

是的，这个是往config里面添加功能所以设置完成后要setConfig，上面的示例演示的仅是添加多级右键菜单。

右键添加二级菜单可以这么做，那么三级要怎么添加呢？按这种方法在二级添加了subCommands，但是不起作用

梅梅梅梅 发表于 2023-1-12 14:08
右键添加二级菜单可以这么做，那么三级要怎么添加呢？按这种方法在二级添加了subCommands，但是不起作用

组件版设计器目前仅支持到二级菜单项，三级菜单项不支持设置。

Lynn.Dou 发表于 2023-1-12 15:25
组件版设计器目前仅支持到二级菜单项，三级菜单项不支持设置。

好吧，那大概什么时候才会支持三级设置呢？

梅梅梅梅 发表于 2023-1-12 15:39
好吧，那大概什么时候才会支持三级设置呢？

在这篇贴中给您做了回复：
https://gcdn.grapecity.com.cn/fo ... 3&fromuid=59119