隐藏在线编辑器菜单-通过代码调用菜单功能

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

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

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

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




接下来上代码

隐藏workbook外的其他元素

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

复制代码

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

1.     insertBarcode:function(){
   
2.       var commandName=DesignerGC.Spread.Sheets.Designer.CommandNames.InsertBarCode;
   
3. DesignerGC.Spread.Sheets.Designer.getCommand(commandName) .execute(this.designer,null);
   
4.     },
   
5.     insertTable:function(){
   
6.       var commandName=DesignerGC.Spread.Sheets.Designer.CommandNames.InsertTable;
   
7. DesignerGC.Spread.Sheets.Designer.getCommand(commandName).execute(this.designer,null);
   
8.     },
   
9.     insertPivot:function(){
   
10.       console.log(11);
    
11.       var commandName=DesignerGC.Spread.Sheets.Designer.CommandNames.InsertPivotTable;
    
12. DesignerGC.Spread.Sheets.Designer.getCommand(commandName).execute(this.designer,null);
    
13.     }

复制代码

最后附上demo，大家可以直接运行查看效果
sjs-vue.zip (639.42 KB, 下载次数: 138)

2022-10-10 11:53 上传

点击文件名下载附件