v15 创建右键三级菜单

Joestar.Xu

需要创建三级菜单，了解到通过组件版设计器不支持三级菜单（通过该帖子了解： https://gcdn.grapecity.com.cn/showtopic-160173-1-1.html），所以通过spreadjs的方式创建右键三级菜单，如下截图：

1692322841665_5BA7D782-7DCD-4071-B0AD-F6DCA83CDC2A.png605214538.png

1692322841665_5BA7D782-7DCD-4071-B0AD-F6DCA83CDC2A.png605214538.png

但是组件版的右键菜单有定义名称和标签功能按钮。现在需要既能实现右键三级菜单，又能使用定义名称和标签功能，该如何实现
image.png212543944.png

<template>
<div id="app">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:config="config"
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"
>
</gc-spread-sheets-designer>
</div>
</template>
<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-resources-zh";
GC.Spread.Common.CultureManager.culture("zh-cn");
import "@grapecity/spread-sheets-designer-resources-cn";
import "./custom.css";
import * as ExcelIO from "@grapecity/spread-excelio";
//Apply License
//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
//ExcelIO.LicenseKey = 'sjs-distribution-key';
//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';
import { Designer } from "@grapecity/spread-sheets-designer-vue";
export default {
name: "App",
data: function() {
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert("Welcome to new designer.");
}
}
};
config.ribbon[0].buttonGroups.unshift({
label: "NewDesigner",
thumbnailClass: "welcome",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["Welcome"]
}
// This is custom button ----------------end-------------
]
}
});
return {
styleInfo: { height: "98vh", width: "100%" },
config: config,
spreadOptions: {
sheetCount: 2
},
designer: null,
spread: null
};
},
methods: {
designerInitialized(value) {
this.designer = value;
this.spread = this.designer.getWorkbook();
this.registerCommand();
this.customContextMenu();
},
registerCommand() {
const myCmd = {
canUndo: true,
name: "myCmd",
execute: (context, options, isUndo) => {
alert("add_table_command");
const activeSheet = this.spread.getActiveSheet();
const table = activeSheet.tables.add(
"table1",
2,
2,
6,
6,
GC.Spread.Sheets.Tables.TableThemes.medium2
);
const cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.isThreeState(false);
const tableColumn0 = new GC.Spread.Sheets.Tables.TableColumn(
0,
"check",
"check",
null,
cellType
);
const tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(
1,
"orderDate",
"Order Date",
"yyyy-mm-dd"
);
const tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(
2,
"item",
"Item"
);
const tableColumn3 = new GC.Spread.Sheets.Tables.TableColumn(
3,
"unit",
"units"
);
const tableColumn4 = new GC.Spread.Sheets.Tables.TableColumn(
4,
"cost",
"Cost"
);
const tableColumn5 = new GC.Spread.Sheets.Tables.TableColumn(
5,
"pkid",
"Pkid"
);
table.autoGenerateColumns(false);
table.bind(
[
tableColumn0,
tableColumn1,
tableColumn2,
tableColumn3,
tableColumn4,
tableColumn5
],
"null"
);
table.expandBoundRows(true);
table.filterButtonsVisible(
GC.Spread.Sheets.Filter.RowFilterBase,
false
);
}
};
this.spread.commandManager().register("myCmd", myCmd);
},
customContextMenu() {
function MyContextMenu() {}
MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu();
MyContextMenu.prototype.onOpenMenu = function(
menuData,
itemsDataForShown,
hitInfo
) {
itemsDataForShown.push(
{
text: "添加表格",
name: "myCmd",
command: "myCmd",
workArea: "viewport"
},
{
text: "添加按钮",
name: "addBtnCmd",
workArea: "viewport",
subMenu: [
{
text: "新建",
name: "add",
command: "addCmd"
},
{
text: "删除",
name: "delete",
command: "deleteCmd"
},
{
text: "导入",
name: "import",
subMenu: [
{
text: "导入Excel",
name: "importExcel",
command: "importExcelCmd"
},
{
text: "导入CSV",
name: "importCSV",
command: "importCSV"
}
]
}
]
}
);
};
const contextMenu = new MyContextMenu();
this.spread.contextMenu = contextMenu;
}
}
};
</script>
<style></style>

复制代码

Joestar.Xu · Joestar.Xu

您好，试试如下代码：

let oldOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (
  menuData,
  itemsDataForShown,
  hitInfo,
  spread
) {
  oldOpenMenu.apply(this, arguments);
  console.log(itemsDataForShown);

  itemsDataForShown.push(
{
   text: "添加表格",
   name: "myCmd",
   command: "myCmd",
   workArea: "viewport",
},
{
   text: "添加按钮",
   name: "addBtnCmd",
   workArea: "viewport",
   subMenu: [
      {
      text: "新建",
      name: "add",
      command: "addCmd",
      },
      {
      text: "删除",
      name: "delete",
      command: "deleteCmd",
      },
      {
      text: "导入",
      name: "import",
      subMenu: [
         {
            text: "导入Excel",
            name: "importExcel",
            command: "importExcelCmd",
         },
         {
            text: "导入CSV",
            name: "importCSV",
            command: "importCSV",
         },
      ],
      },
   ],
}
  );
};

snowflakes7 · snowflakes7

Joestar.Xu 发表于 2023-8-18 11:14
您好，试试如下代码：

let oldOpenMenu = spread.contextMenu.onOpenMenu;

问题已解决，感谢

Joestar.Xu · Joestar.Xu

不客气哈，后续有其他问题的话随时开贴提问。

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

[已处理] v15 创建右键三级菜单

最佳答案

3 个回复

SpreadJS 认证

SpreadJS 高级认证