隐藏在线编辑器菜单-通过代码调用菜单功能
本帖最后由 Richard.Ma 于 2022-10-10 11:56 编辑SpreadJS的在线表格编辑器提供了很多和excel基本一致的功能，我们不需要在调用spreadjs的接口去实现这些功能，即可直接在浏览器中实现这些功能，免去了二次开发的工作
但是对于有的客户来说，出于界面定制的考虑，不希望使用designer的ribbon样式菜单，只想给用户展示spreadjs表格界面。又想要使用designer编辑器中上方菜单提供的功能。
对于这种需求，一个可行的方案是，将在线表格编辑器中除spreadjs表格外的部分全部隐藏，此时编辑器看起来就是一个淡出的spreadjs表格，然后再通过命令的方式去调用即可，客户可以自己定义菜单，按钮，或者通过在spreadjs中定义右键菜单来调用这些命令
一个典型的应用场景，通过一个按钮调用在线表格编辑器中本身提供的新建透视表的功能，这样自己不用再去额外开发这个新增透视表的弹窗，对于编辑器中提供的其他的一些复杂操作，同样如此
接下来上代码
隐藏workbook外的其他元素
document.getElementsByClassName("ribbon").style.display='none';
document.getElementsByClassName("top-panels").style.display='none';
实现上面三个按钮调用在线编辑器功能，核心是获取到按钮后对应的命令，然后执行命令
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(){
console.log(11);
var commandName=DesignerGC.Spread.Sheets.Designer.CommandNames.InsertPivotTable;
DesignerGC.Spread.Sheets.Designer.getCommand(commandName).execute(this.designer,null);
}
最后附上demo，大家可以直接运行查看效果
页:
[1]