SpreadJS在线表格编辑器自定义功能 -- 新建工具栏按钮（Ribbon Button）

收藏

本帖最后由 dexteryao 于 2021-2-3 14:06 编辑

SpreadJS 新的组件版设计器采用了全新可配置设计，任何区域都采取json config 的配置方式。
通过修改默认的GC.Spread.Sheets.Designer.DefaultConfig，可以达到自定制功能
首先看一下如何自定义工具栏（Ribbon）并添加新的ribbon tab和按钮

1. 增加新Ribbon 选项卡
在浏览器Console中输入GC.Spread.Sheets.Designer.DefaultConfig即可查看默认ribbon选项卡配置

参考默认配置，自定义操作选项卡

var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
var customerRibbon = {
"id": "operate",
"text": "操作",
"buttonGroups": [
]
};designerConfig.ribbon.push(customerRibbon);var designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById('ssDesigner'), /**designer host */
designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */ ,
undefined /**If you want to use the spread you already created instead of generating a new spread, pass in */
);
2. 自定义button
在定义按钮之前，需要先定义按钮点击时的命令Commands，并将命令注册到config的commandMap属性上
var ribbonFileCommands = {
"getTemplates": {
      iconClass: "ribbon-button-download",
      text: "加载",
      commandName: "getTemplates",
      execute: getTemplates,
},
"uploadFile":
{
      iconClass: "ribbon-button-upload",
      text: "上传",
      commandName: "uploadFile",
      execute: uploadFile,
},}

上面代码注册了getTemplates和uploadFile两个命令，
其中execute对应的时具体执行内容的function
iconClass为按钮样式，可以制定按钮图片
text为显示文字
commandName为命令名称，需要全局唯一
iconClass示例：
.ribbon-button-download {
background-image: url(图片地址，可以是base64 svg)}

async function getTemplates(designer) {
var spread = designer.getWorkbook();//使用getWorkbook获取Spread对象并操作}async function uploadFile(designer) {
var spread = designer.getWorkbook();//使用getWorkbook获取Spread对象并操作}

有了命令就可以添加对应button 的config了
var ribbonFileConfig =
{
"label": "文件操作",
"thumbnailClass": "ribbon-thumbnail-spreadsettings",
"commandGroup": {
      "children": [
         {
            "direction": "vertical",
            "commands": ["getTemplates", "uploadFile"]
         },
         {
            "type": "separator"
         }       ]
}
};

在designer的config中加入自定义的命令和按钮

designerConfig.commandMap = {}
Object.assign(designerConfig.commandMap, ribbonFileCommands)
customerRibbon.buttonGroups.push(ribbonFileConfig);designerConfig.ribbon.push(customerRibbon);
var designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById('ssDesigner'), /**designer host */
designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */ ,
undefined /**If you want to use the spread you already created instead of generating a new spread, pass in */
);

这样我们新建的按钮就可以正常工作了。

image.png756971435.png