请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-10-10 11:54  /   查看:1609  /  回复:0
本帖最后由 Richard.Ma 于 2022-10-10 11:56 编辑

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

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

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

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


image.png83748473.png

接下来上代码

隐藏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, 下载次数: 67)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部