组件版设计器自定义右键菜单之-向下插入行

收藏 · 2021-11-29 10:45 上传

本帖最后由 Lynn.Dou 于 2021-11-29 10:45 编辑

在前面的贴子 SpreadJS 自定义右键菜单-在选择行下面插入行我们有介绍如何在SpreadJS中通过自定义右键菜单实现此需求。
有使用组件版设计器的小伙伴有了疑惑，
如何通过自定义设计器的config如何实现右键菜单-向下插入行呢？

组件版设计器右键菜单添加新项与SpreadJS有所不同，需要在config的基础上进行修改。

代码如下：
1、定义右键菜单结构

config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
}
},
myCmd:{
text: "向下插入行",
commandName: "myCmd",
visibleContext:"ClickRowHeader",
execute: async (context, propertyName, fontItalicChecked) => {
var spread = context.getWorkbook();
spread.commandManager().execute({cmd:"insertRowsBehind"})
}
}
}

复制代码

2、右键菜单添加新项

config.contextMenu.splice(26,0,"myCmd");

复制代码

3、初始化设计器

var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
var spread = d.getWorkbook();

复制代码

4、定义和注册insertRowsBehind命令

spread.commandManager().register("insertRowsBehind",
{
canUndo: true,
execute: function (context, options, isUndo) {
var Commands = GC.Spread.Sheets.Commands;
// 在此加cmd
options.cmd = "insertRowsBehind";
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
var sheet = spread.getActiveSheet();
// 注意：需要在options中定义sheetName，否则撤销行为可能无效。
options.sheetName = sheet.name();
Commands.startTransaction(context, options);
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
for (var i = 0; i < sels.length; i++) {
var sel = sels[i];
var row = sel.row;
var rowCount = sel.rowCount;
sheet.addRows(row + 1, rowCount);
}
}
Commands.endTransaction(context, options);
return true;
}
}
});

复制代码

最终效果如下图：

完整代码请查看附件。

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

组件版设计器自定义右键菜单之-向下插入行

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人