[{"id":"ff052704-1389-4029-bcdd-73c6cbe9f807","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8e72e33e-b4ab-4fb3-98fc-a0b148134aed","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c90d5fdf-420f-4978-8bf5-c9a2bb4334b3","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"900e6cab-065d-4f1c-844d-efa3c074e270","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"760b37c7-c713-4b24-b9ba-4bfe7d8437a6","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"89c707ed-9841-4e53-96fb-940cc3214804","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"64e2f4a3-2303-4bfa-8a93-6c23ef01de58","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"aa71a884-c5bc-4842-8d6a-873dfd645167","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2605431b-dc80-491d-886e-28981595d277","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"69e79655-e015-4f9a-a230-2a25c988c926","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a570c8e7-07a2-47da-965b-da44fd1fa5cf","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86662220-9b9e-4940-9ced-d22642ea49a8","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24769ecd-2b08-4a85-b318-4f533bbf8393","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a244ead7-a2c6-47a3-ac17-c5dbfa337362","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"04e73782-aa78-4dfe-a4f9-e72ed4c78a11","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4f41e22e-eb51-49e5-aeae-a42dd6bf352c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"790bc77a-9216-48fd-b8f9-fbc374ebb155","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"21c6131f-0f2d-41d1-9284-6ad9ee803c1f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ded3a22-15eb-49b8-a488-e83c2cd872eb","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"33638a1c-7196-42c1-a96d-38b2d9ba8ac4","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a0842a3-20b1-40c3-8e00-cd5941ffdf53","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6e6ac5b1-1501-4e28-89cc-525139488537","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b0576ca2-cb84-4390-9f95-9354ec20eda5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"55fd3bb8-18d4-4edb-9640-ca3a365b798f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dacc7931-6785-4675-be31-80930403cf7b","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"63c577e6-6cf9-497e-94e1-2307f7d3f498","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1b88a165-2563-437e-99bb-ae30bd4b56db","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"adf3817f-7667-4a4c-8a5f-767b0b7e1e3e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"3a083583-1d5f-492b-b450-34b2b5c775b8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5d37413b-3600-4da9-9700-feea54355f59","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a5a73576-16ea-4cbc-925c-ef547389eaa5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1126cfab-6210-4e28-bee0-02c113fb7a0c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"09a66339-64c0-415c-b142-0691587a8e4a","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"0baaf91d-84f6-404c-a487-735226b6d5b6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5b7aeac5-c755-426a-95c7-1ae8e547179a","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"57c94653-8893-403b-a5b1-0d1e33a0bd0f","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]}]
产品首页 在线 Demo 产品文档 API 参考 技术社区
立即试用
(Showing Draft Content)

通过代码调用菜单功能

问题：如何通过代码调用菜单功能

背景：

SpreadJS 的在线表格编辑器提供了很多和 Excel 基本一致的功能，我们不需要在调用 SpreadJS 的接口去实现这些功能，即可直接在浏览器中实现这些功能，免去了二次开发的工作。

但是有的客户出于界面定制的考虑，不希望使用 Designer 的 Ribbon 样式菜单，只想给用户展示SpreadJS 表格界面，同时又想要使用 Designer 编辑器中上方菜单提供的功能。

解决思路：

对于这种需求一个可行的方案是，将在线表格编辑器中除 SpreadJS 表格外的部分全部隐藏，此时编辑器看起来就是一个单纯的 SpreadJS 表格，然后再通过命令的方式去调用即可，客户可以自己定义菜单，按钮或者通过在 SpreadJS 中定义右键菜单来调用这些命令。

一个典型的应用场景，通过一个按钮调用在线表格编辑器中本身提供的新建透视表的功能，这样自己不用再去额外开发这个新增透视表的弹窗，对于编辑器中提供的其他的一些复杂操作，同样如此。

1、隐藏workbook外的其他元素。

document.getElementsByClassName("ribbon")[0].style.display='none';
document.getElementsByClassName("top-panels")[0].style.display='none';

2、实现上面三个按钮调用在线编辑器功能，核心是获取到按钮后对应的命令，然后执行命令。

insertBarcode: function() {
    var commandName = DesignerGC.Spread.Sheets.Designer.CommandNames.InsertBarCode;
    DesignerGC.Spread.Sheets.Designer.getCommand(commandName) .execute(this.designer, null);
},
insertTable: function() {
    var commandName = DesignerGC.Spread.Sheets.Designer.CommandNames.InsertTable;
    DesignerGC.Spread.Sheets.Designer.getCommand(commandName).execute(this.designer, null);
},
insertPivot: function() {
    var commandName = DesignerGC.Spread.Sheets.Designer.CommandNames.InsertPivotTable;
    DesignerGC.Spread.Sheets.Designer.getCommand(commandName).execute(this.designer, null);
}

Demo请参考附件：sjs-vue.zip

作者: GrapeCity China | 审核：Lynn.Dou | 更新时间：2023.12.22