[17]添加右键菜单不生效

鸳鸯配2024 · 鸳鸯配2024

本帖最后由鸳鸯配2024 于 2024-7-31 13:55 编辑

Wilson.Zhang 发表于 2024-7-31 11:23
您好！提供给您的demo中的“自定义删除列”菜单选项在鼠标右键列头时出现的菜单中。

看到了。但不知道为什么，放到我代码里面去，就会报错。 Cannot read properties of undefined (reading 'visibleContext')

1722397388448.png636000976.png

然后我看到。你的dome版本是16.但我的代码版本是17，不知道是不是版本的问题。

还有一个区别就是我可能用的是表格编辑器。有工具栏这块，你发的dome是没有的。不知道2者语法上有什么不一样

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-7-31 11:44
看到了。但不知道为什么，放到我代码里面去，就会报错。 Cannot read properties of undefined (reading ...

您使用的是在线表格编辑器，我发给您的demo是在SpreadJS中自定义右键菜单，两者存在差异但实现效果类似。在线表格编辑器将工具栏和右键菜单选项全部集成为配置项，由GC.Spread.Sheets.Designer.DefaultConfig管理，通常对DefaultConfig新增配置项以扩展自定义右键菜单选项和自定义工具栏选项。visibleContext是在线表格编辑器中控制菜单选项是否可见的属性名称，相关属性为true是对应的菜单选项可见，反之不可见。
您可以参考官网教程了解详情：
https://demo.grapecity.com.cn/sp ... textMenu/insertrows

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-7-31 15:33
您使用的是在线表格编辑器，我发给您的demo是在SpreadJS中自定义右键菜单，两者存在差异但实现效果类似。 ...

给你看下我的代码，直接拿过来了，还是不生效，不知道哪里问题，我把我的代码贴出来，你帮忙看下。这样我能更好的理解一些，然后有没有表格编辑器相关的视频可以看啊，我看到的好像都是spreadJS 的视频，这样对于初学者来说，很容易搞混。

HTML 相关的

复制代码

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-shapes'
import '@grapecity/spread-sheets-charts'
import '@grapecity/spread-sheets-slicers'
import '@grapecity/spread-sheets-print'
import '@grapecity/spread-sheets-barcode'
import '@grapecity/spread-sheets-tablesheet'
import '@grapecity/spread-sheets-formula-panel'
import '@grapecity/spread-sheets-io'
import '@grapecity/spread-sheets-resources-zh'
import '@grapecity/spread-sheets-designer-resources-cn'
import GCDesigner from '@grapecity/spread-sheets-designer'

复制代码

GC.Spread.Common.CultureManager.culture('zh-cn')
// Designer实例
let designer = GCDesigner.Spread.Sheets.Designer.Designer
let spread = GC.Spread.Sheets.Workbook
onMounted(() => {
let config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {};
config.commandMap.batchInsertRowContextMenu = {
text: '批量插入',
commandName: "batchInsertRowContextMenu",
visibleContext: "ClickRowHeader",
subCommands: [
"batchInsertRows10",
"batchInsertRows50",
"batchInsertRows100"
]
};
config.commandMap.batchInsertRows10 = {
text: '插入 10 行',
commandName: "batchInsertRows10",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:10});
}
};
config.commandMap.batchInsertRows50 = {
text: '插入 50 行',
commandName: "batchInsertRows50",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:50});
}
};
config.commandMap.batchInsertRows100 = {
text: '插入 100 行',
commandName: "batchInsertRows100",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:100});
}
};
config.contextMenu.push("batchInsertRowContextMenu");
config.commandMap["gc.spread.contextMenu.insertRows"] = {
commandName: "myInsertRows",
enableContext: "AllowInsertRows && selectFullRows",
text: "插入",
visibleContext: "ClickRowHeader && !AllowInsertCopiedCutCells",
execute: async (context, propertyName) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:1});
}
};
// designer = new GCDesigner.Spread.Sheets.Designer.Designer('designer-container',config);
designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer-container"), config);
spread = designer.getWorkbook();
var commandManager = spread.commandManager();
let insertRowAndCopyContent = {
canUndo: true,
execute: function (context, options, isUndo) {
let Commands = GC.Spread.Sheets.Commands;
options.cmd = "insertRowAndCopyContent";
console.log(options, '--options---')
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
context.suspendPaint();
context.suspendEvent();
var sheet = context.getSheetFromName(options.sheetName);
var selections = sheet.getSelections();
for(var i = 0; i < selections.length; i++){
var row = selections[i].row;
sheet.addRows(row,options.rowCount);
var fromRange = [new GC.Spread.Sheets.Range(row + options.rowCount, 0, 1, sheet.getColumnCount())];
var toRanges = [new GC.Spread.Sheets.Range(row, 0, options.rowCount, sheet.getColumnCount())];
spread.commandManager().execute({cmd: "clipboardPaste", sheetName: options.sheetName, fromSheet: sheet, fromRanges: fromRange, pastedRanges: toRanges, isCutting: false, clipboardText: "", pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formulasAndFormatting});
}
context.resumeEvent();
context.resumePaint();
Commands.endTransaction(context, options);
return true;
}
}
};
var commandManager = spread.commandManager();
commandManager.register("insertRowAndCopyContent", insertRowAndCopyContent);
})

复制代码

我是把这个dome下载下来后，把里面的代码，copy进去，还是没有生效。

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-7-31 16:09
给你看下我的代码，直接拿过来了，还是不生效，不知道哪里问题，我把我的代码贴出来，你帮忙看下。这样我 ...

好的，容我研究一下！

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-7-31 16:09
给你看下我的代码，直接拿过来了，还是不生效，不知道哪里问题，我把我的代码贴出来，你帮忙看下。这样我 ...

您好！您复制的官网教程中的代码新增的自定义菜单选项仅在右键点击行头时出现的菜单中，如下图所示：

1722475266661.png913894653.png

根据您提供的是代码片段，稍作调整，请参考如下代码：

GC.Spread.Common.CultureManager.culture('zh-cn')
// Designer实例
let designer;
let spread;
let config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {};
config.commandMap.batchInsertRowContextMenu = {
text: '批量插入',
commandName: "batchInsertRowContextMenu",
visibleContext: "ClickRowHeader",
subCommands: [
"batchInsertRows10",
"batchInsertRows50",
"batchInsertRows100"
]
};
config.commandMap.batchInsertRows10 = {
text: '插入 10 行',
commandName: "batchInsertRows10",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:10});
}
};
config.commandMap.batchInsertRows50 = {
text: '插入 50 行',
commandName: "batchInsertRows50",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:50});
}
};
config.commandMap.batchInsertRows100 = {
text: '插入 100 行',
commandName: "batchInsertRows100",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:100});
}
};
config.contextMenu.push("batchInsertRowContextMenu");
config.commandMap["gc.spread.contextMenu.insertRows"] = {
commandName: "myInsertRows",
enableContext: "AllowInsertRows && selectFullRows",
text: "插入",
visibleContext: "ClickRowHeader && !AllowInsertCopiedCutCells",
execute: async (context, propertyName) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:1});
}
};
designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
spread = designer.getWorkbook();
var commandManager = spread.commandManager();
let insertRowAndCopyContent = {
canUndo: true,
execute: function (context, options, isUndo) {
let Commands = GC.Spread.Sheets.Commands;
options.cmd = "insertRowAndCopyContent";
console.log(options, '--options---')
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
context.suspendPaint();
context.suspendEvent();
var sheet = context.getSheetFromName(options.sheetName);
var selections = sheet.getSelections();
for(var i = 0; i < selections.length; i++){
var row = selections[i].row;
sheet.addRows(row,options.rowCount);
var fromRange = [new GC.Spread.Sheets.Range(row + options.rowCount, 0, 1, sheet.getColumnCount())];
var toRanges = [new GC.Spread.Sheets.Range(row, 0, options.rowCount, sheet.getColumnCount())];
spread.commandManager().execute({cmd: "clipboardPaste", sheetName: options.sheetName, fromSheet: sheet, fromRanges: fromRange, pastedRanges: toRanges, isCutting: false, clipboardText: "", pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formulasAndFormatting});
}
context.resumeEvent();
context.resumePaint();
Commands.endTransaction(context, options);
return true;
}
}
};
var commandManager = spread.commandManager();
commandManager.register("insertRowAndCopyContent", insertRowAndCopyContent);

复制代码

另外，在开头的designer和spread的声明代码的正确方式应该如下代码所示：

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

复制代码

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-1 09:31
您好！您复制的官网教程中的代码新增的自定义菜单选项仅在右键点击行头时出现的菜单中，如下图所示：

...

看了下，功能确实没问题。但是会有个新的问题。
其它方法里面会获取不到全局 spread 的方法.。获取到的designer 和 spread 都是 undefined
在其它方法里面，用 spread 的时候，是这样写的

let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer-container"));
let spread = designer.getWorkbook();

复制代码

但里面的很多方法都不执行。

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-8-1 10:35
看了下，功能确实没问题。但是会有个新的问题。
其它方法里面会获取不到全局 spread 的方法.。获取到 ...

您已经使用<div>创建了Designer，那在其他地方使用Designer时可以通过GC.Spread.Sheets.Designer.findControl('div元素ID')获取已经创建好的Designer实例，再通过Designer获取Workbook实例。所以，不用重新创建。
还有一个方式，在其他方法的参数列表中增加designer和spread分别代表Designer实例和Workbook实例。

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-1 11:33
您已经使用创建了Designer，那在其他地方使用Designer时可以通过GC.Spread.Sheets.Designer.findControl( ...

试过了，好奇怪。没有报错，但新加右键功能，就没有了。

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-8-1 17:55
试过了，好奇怪。没有报错，但新加右键功能，就没有了。

您的意思是说现在又没有自定义新增的右键菜单选项了吗？

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-1 17:57
您的意思是说现在又没有自定义新增的右键菜单选项了吗？

是的，就是这样子，所以觉得很奇怪。

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

[已处理] [17]添加右键菜单不生效