SpreadJS在线表格编辑器自定义功能 -- 自定义右键菜单（Content Menu）
本帖最后由 dexteryao 于 2021-2-3 14:01 编辑组件版设计器推出也有一段时间了，也有许多朋友在问如何定制组件设计器的右键菜单。这篇教程就教大家通过简单的demo实现右键菜单。通过自定义一个新的上下文菜单项，可以为用户提供更方便的方式快速到达一些自定义的常用操作。
例如，如果用户想在所有区域右键快捷菜单中添加一个“弹窗菜单”项，选中该项后，将进行自定义操作（本次demo实现一个弹窗操作）。
要实现右键菜单，关键在于右键菜单的显示与点击后触发的命令。
首先，我们先获取到设计器的DefaultConfig
var designerConfig = JSON.parse(
JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
);
然后我们将需要点击后执行的命令push到DefaultConfig的commandMap下
designerConfig.commandMap = {
"myCmd":{
text: "弹窗菜单",
commandName: "myCmd",
execute: () =>{
alert("我是重写的右键菜单");
}
}
}
我们可以看到，上面的代码将一个命令名为“myCmd”的命令添加到命令树中。光是添加命令还不够，我们还需将该命令添加到contextMenu中，这样我们的右键菜单才会显示对应的项目。最后再初始化设计器实例。
designerConfig.contextMenu.push("myCmd");
var designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById("designer") /**designer host */,
designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */
);
完成了上面的步骤，我们会发现，在右键单元格、列头行头等都会有这个右键菜单选项。那么如何控制这个右键菜单只在某一个区域显示呢？我们可以在定义命令的时候，可以添加一个visibleContext属性。若只需在点击单元格时出现，则可以用下面的代码。
visibleContext:"ClickViewport",若仅需在行头列头右键时出现，则可以用下面的代码
visibleContext:"ClickRowHeader || ClickColHeader",
下载附件即可查看完整的demo
元老您好，我有类似的需求
问题一：按照您写的帖子，并未实现功能，主要原因在于，添加 new GC.Spread.Sheets.Designer.Designer 这一步代码时，控制台报错，个人怀疑可能与 document.getElementById("designer") 有关，但找不出解决办法。
期望实现右键点击添加按钮功能。附上demo
你是通过标签添加的编辑器，所以并没有id为designer的元素，自然找不到了
但是你在初始化的时候，已经将this.designer做了赋值，这个就是现在的设计器对象
继续用这个做相关设置操作即可
Richard.Ma 发表于 2023-5-29 11:43
你是通过标签添加的编辑器，所以并没有id为designer的元素，自然找不到了
但是你在初始化的时候，已经将th ...
let designerInitialized = (wb) => {
designer = wb;
let spread = designer.getWorkbook();
console.log(spread, "spread");
console.log(designer, "designer");
var designerConfig = JSON.parse(
JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
);
designerConfig.commandMap = {
myCmd: {
text: "弹窗菜单",
commandName: "myCmd",
visibleContext: "ClickRowHeader",
execute: () => {
alert("我是重写的右键菜单");
},
},
};
designerConfig.contextMenu.push("myCmd");
designer._config = designerConfig;
console.log(designer, "designer1");
var sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [
,
,
,
,
,
]);
};
直接操作设计器对象，菜单也没有出来，麻烦看一下什么问题
阿仁 发表于 2023-7-18 10:36
let designerInitialized = (wb) => {
designer = wb;
let spread = designer.getWorkbook ...
您好，您在初始化后再修改config，需要使用setConfig接口来将config重新应用，designer._config = designerConfig是不会生效的。
如：designer.setConfig(designerConfig); visibleContext 接受的是字符串，如何控制右键不同的单元格上，对自定义菜单的显示隐藏控制？
场景：在模版字段上右键需要显示 新增的自定义菜单，在其他格子上是不需要的 表格6666 发表于 2023-9-24 13:34
visibleContext 接受的是字符串，如何控制右键不同的单元格上，对自定义菜单的显示隐藏控制？
场景：在模 ...
一个比较可行的实现方案是：
1、将指定的右键菜单command的visibleContext设置为"test1"（举例说明）。
2、监听EnterCell事件，此事件会在单元格上右键时触发，当在指定单元格上右键时，调用designer.setData("test1", true)接口，此时test1的值为true，相应的，在其他的单元格上右键时，设置test1为false即可。
页:
[1]