您好,
参考下方代码:
- const operateRibbon = {
- id: "operate",
- text: "操作",
- buttonGroups: []
- };
- //定义点击 规划求解 按钮时对应的命令
- const operateCommands = {
- solver: {
- title: "规划求解",
- text: "很长很长的文字",
- commandName: "solver",
- execute: async (context) => {
- console.log("aaa");
- excelSolver(context);
- },
- iconClass: "ribbon-button-upload"
- }
- }
- //新增 规划求解 按钮
- const operateConfig = {
- label: "规划求解",
- thumbnailClass: "ribbon-thumbnail-spreadsettings",
- commandGroup: {
- children: [
- {
- direction: "vertical",
- children: [
- {commands: ["solver"]},
- {commands: ["solver"]},
- {commands: ["solver"]}
- ]
-
- }
- ]
- }
- }
- //在designer的config中加入自定义的命令和按钮
- operateRibbon.buttonGroups.push(operateConfig);
- 1
- const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
- //将命令注册到config的commandMap属性上
- designerConfig.commandMap = {};
- Object.assign(designerConfig.commandMap, operateCommands);
- //将新增选项卡添加到designerConfig中
- designerConfig.ribbon.push(operateRibbon);
- var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig);
- 17
复制代码 最终效果如下图(图标需自己设置):
|