SpreadJS在线表格编辑器自定义功能 -- 添加多级右键菜单（Content Menu）
本帖最后由 dexteryao 于 2021-2-3 13:55 编辑上一期我们将了如何自定义右键菜单，本期我们在其基础上进行扩展，将讲解如何自定义多级的右键菜单
下面实例将定制一个多级菜单用于设置文字旋转功能，提供三个子菜单-90度，水平，90度
首先我们先定义菜单文字旋转。
designerConfig.commandMap["textRotation"]= {
text: "文字旋转",
commandName: "textRotation",
subCommands:[
"negativeVertical",
"horizontal",
"vertical"
],
visibleContext:"ClickViewport"
}在父级菜单中我们没有定义具体的execute以为改菜单不需要执行任何操作，我们定义了subCommands来扩展三个子菜单
subCommands:[
"negativeVertical",
"horizontal",
"vertical"
]之后我们同样在commandMap中定义三个子菜单
designerConfig.commandMap["negativeVertical"]= {
text:"-90度",
commandName: "negativeVertical",
//enableContext: "allowEditObject",
execute: async (context) => {
var spread = context.getWorkbook();
var commandManager = spread.commandManager();
commandManager.execute({cmd: "executeRotation", sheetName: spread.getActiveSheet().name(),degree:-90});
}
}
designerConfig.commandMap["horizontal"]= {
text:"水平",
commandName: "horizontal",
//enableContext: "allowEditObject",
execute: async (context) => {
var spread = context.getWorkbook();
var commandManager = spread.commandManager();
commandManager.execute({cmd: "executeRotation", sheetName: spread.getActiveSheet().name(),degree:0});
}
}
designerConfig.commandMap["vertical"]= {
text:"90度",
commandName: "vertical",
//enableContext: "allowEditObject",
execute: async (context) => {
var spread = context.getWorkbook();
var commandManager = spread.commandManager();
commandManager.execute({cmd: "executeRotation", sheetName: spread.getActiveSheet().name(),degree:90});
}
}这里需要定义具体的execute，因为子菜单点击后需要进行操作，操作中我们为了方便undo redo,选择用命令实现具体操作。具体命令定义如下
var spread = designer.getWorkbook();
var commandManager = spread.commandManager();
var _executeRotation = {
canUndo: true,
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();
var selections = sheet.getSelections();
for(var i=0;i<selections.length;i++){
sheet.getRange(selections.row,
selections.col,
selections.rowCount,
selections.colCount,
GC.Spread.Sheets.SheetArea.viewport).textOrientation(options.degree);
}
sheet.resumePaint();
Commands.endTransaction(context, options);
return true;
}
}
};
commandManager.register("executeRotation", _executeRotation);最后我们需要将父级菜单push到contextmenu中，这里注意只需要push父级菜单即可，子菜单不需要因为子菜单是通过父级菜单扩展弹出的。但是子菜单需要定义在commandMap中。
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/forum.php?mod=viewthread&tid=160173&fromuid=59119
页:
[1]