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

收藏

本帖最后由 Richard.Ma 于 2022-10-10 11:56 编辑

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

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

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

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

image.png83748473.png

接下来上代码

隐藏workbook外的其他元素

document.getElementsByClassName("ribbon")[0].style.display='none';
document.getElementsByClassName("top-panels")[0].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，大家可以直接运行查看效果

sjs-vue.zip (639.42 KB, 下载次数: 138)

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

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人