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

收藏

本帖最后由想念于 2024-11-18 17:03 编辑

1.如何只保留自定义的选项，其它的隐藏不显示企业微信截图_17319193581455.png

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

复制代码

这样写是只显示了自定义选项，但是sheetTab的右击菜单也没了，sheetTab的右击菜单的选项想要保留，如何处理
2. image.png852291564.png

如果不想在sheetTab的菜单中显示自定义的选项，只能单元格内右击时才显示自定义的选项，如何处理

Wilson.Zhang · Wilson.Zhang

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

如下图所示：
image.png709809875.png

可以参考官网文档了解详情：
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

想念 · 想念

本帖最后由想念于 2024-11-18 18:54 编辑

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

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

let designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
// 添加上下文菜单项
designerConfig.contextMenu.unshift('setcheck')
designerConfig.commandMap = {}
Object.assign(designerConfig.commandMap, {
setcheck: {
title: '设置可编辑',
text: '设置可编辑',
iconClass: '',
bigButton: 'true',
commandName: 'setcheck',
execute: async () => {
this.resetWorksheet()
// this.cancel()
let spread = value.getWorkbook()
let sheet = spread.getActiveSheet()
this.worksheetOpen = true
this.setWorksheet.colum.name = sheet.name()
this.setWorksheet.colum.list = sheet.getSelections()
}
}
})
this.designer.setConfig(designerConfig)

复制代码

如何改造呢

Wilson.Zhang · Wilson.Zhang

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

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

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

复制代码

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

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

想念 · 想念

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

好的，谢谢

Wilson.Zhang · Wilson.Zhang

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

不客气！

		自动登录	找回密码
密码			立即注册

[处理中] SpreadJS 【v16.2.6】只保留自定义的右击菜单选项

5 个回复