SpreadJS 【v16.2.6】只保留自定义的右击菜单选项

1.如何只保留自定义的选项，其它的隐藏不显示

1. let designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
   
2. designerConfig.contextMenu = [] ;designerConfig.contextMenu.unshift('setcheck')

复制代码

这样写是只显示了自定义选项，但是sheetTab的右击菜单也没了，sheetTab的右击菜单的选项想要保留，如何处理
2. 如果不想在sheetTab的菜单中显示自定义的选项，只能单元格内右击时才显示自定义的选项，如何处理

您好！对于您提出的两个问题，总结即在worksheet中右键菜单只显示自定义菜单选项，而在sheet页签tab右键菜单只显示SpreadJS原生菜单选项。那么，可以通过重写onOpenMenu方法控制。具体地，通过hitInfo参数判断触发右键菜单的点击区域是viewport还是tab，如果当前被点击的区域是viewport，只显示自定义菜单选项即可，可以通过自定义ContextMenu封装所有自定义菜单选项；如果被点击区域是sheet页签，将SpreadJS原生的contentMenu赋值给Spread实例的contextMenu属性即可。

如下图所示：



可以参考官网文档了解详情：
https://demo.grapecity.com.cn/spreadjs/help/docs/faqs/contextMenu/differentiation-settings#%E9%97%AE%E9%A2%98%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E5%A6%82%E4%BD%95%E5%9C%A8%E6%9F%90%E4%B8%AA%E5%B7%A5%E4%BD%9C%E8%A1%A8%E4%B8%AD%E6%98%BE%E7%A4%BA%E7%89%B9%E5%AE%9A%E7%9A%84%E8%8F%9C%E5%8D%95%E9%A1%B9

Wilson.Zhang 发表于 2024-11-18 17:39
您好！对于您提出的两个问题，总结即在worksheet中右键菜单只显示自定义菜单选项，而在sheet页签tab右键菜 ...

使用的是<gc-spread-sheets-designer  @designerInitialized="designerInitialized"></gc-spread-sheets-designer>。designerInitialized中的这部分代码是

1. let designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
   
2.       // 添加上下文菜单项
   
3.       designerConfig.contextMenu.unshift('setcheck')
   
4.       designerConfig.commandMap = {}
   
5.       Object.assign(designerConfig.commandMap, {
   
6.         setcheck: {
   
7.           title: '设置可编辑',
   
8.           text: '设置可编辑',
   
9.           iconClass: '',
   
10.           bigButton: 'true',
    
11.           commandName: 'setcheck',
    
12.           execute: async () => {
    
13.             this.resetWorksheet()
    
14.             // this.cancel()
    
15.             let spread = value.getWorkbook()
    
16.             let sheet = spread.getActiveSheet()
    
17.             this.worksheetOpen = true
    
18.             this.setWorksheet.colum.name = sheet.name()
    
19.             this.setWorksheet.colum.list = sheet.getSelections()
    
20.           }
    
21.         }
    
22.       })
    
23.       this.designer.setConfig(designerConfig)

复制代码

如何改造呢

想念 发表于 2024-11-18 18:36
使用的是。designerInitialized中的这部分代码是
如何改造呢

您提供的代码片段可以将自定义菜单选项添加至Designer的配置项中，按照您的要求应该是在鼠标右键点击表单区域时弹出的菜单中仅显示该菜单选项吧？您可以参考给您提供的文档中的代码，自定义一个ContextMenu类，在其中判断点击位置是否为viewport或sheet页签，在不同场景下封装相应的菜单选项即可，可参考如下代码：

1. function MyContextMenu() { }
   
2.             MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
   
3.             MyContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
   
4.     if (hitInfo && hitInfo.worksheetHitInfo && hitInfo.worksheetHitInfo.hitTestType === 3) {
   
5.         //  viewport右键触发
   
6.         itemsDataForShown.length = 0;
   
7.         itemsDataForShown.push({
   
8.             text: "新项",
   
9.             name: "newItem",
   
10.             command: "newMenuItem",
    
11.             workArea: "viewportcolHeaderrowHeaderslicercorner"
    
12.         });
    
13.     } else if (hitInfo && hitInfo.tabStripHitInfo) {
    
14.         //  sheet页签右键触发
    
15.         //  参考上个分支中的逻辑封装需要显示的菜单选项
    
16.     }
    
17.             };
    
18.             var contextMenu = new MyContextMenu();
    
19.             spread.contextMenu = contextMenu;

复制代码

上述代码将在鼠标右键点击viewport区域时，右键菜单中仅显示自定义的菜单选项，名为“新项”，如下动图所示：


上述代码基于给您提供的文档中的demo改造而成，您可以参考原文档或如下链接中的文档了解详情：
https://gcdn.grapecity.com.cn/showtopic-146035-1-1.html

Wilson.Zhang 发表于 2024-11-19 13:54
您提供的代码片段可以将自定义菜单选项添加至Designer的配置项中，按照您的要求应该是在鼠标右键点击表单 ...

好的，谢谢

想念 发表于 2024-11-19 14:11
好的，谢谢

不客气！

您好！由于您较长时间未回复，且从跟帖过程中了解到问题已得到有效解答，那就结帖了。如有新问题，欢迎发新帖沟通。