SpreadJS在线表格编辑器自定义功能 -- 新建工具栏下拉按钮（Ribbion DropDown）

收藏

本帖最后由 dexteryao 于 2021-2-3 17:09 编辑

前言：
前面我们介绍了如何在组件版设计器中自定义 CheckBox 、自定义ComboBox
本节课我们继续来学习如何在组件版设计器中自定义DropDown下拉菜单。

1. 介绍 DropDown下拉菜单

在组件版设计器中，我们在工具栏中会看到如下图所示的下拉菜单。点击下拉菜单列表项即触发相应的命令。
在控制台我们可以打印出 DropDown“单元格类型”的默认配置信息，可供我们参考自定义DropDown

image.png524094237.png

---------  为方便演示，我们首先新建一个Ribbon 选项卡来放置自定义的DropDown。----------

2.增加新Ribbon 选项卡

在前面我们已经介绍了如何增加新Ribbon 选项卡，这里不再赘述。

3.自定义DropDown

整体思路与自定义 Checkbox 、ComboBox一致，我们以具体的代码来演示下。
实现功能：点击 “导出图片”下拉列表，可选择不同的导出图片方式

（1）在定义DropDown之前，我们先定义点击DropDown下拉列表的命令Commands。

var ribbonFileCommands= {
.......
"exportImage_List": {
      title: "exportImage_List",
      bigButton: true,
      iconClass: "ribbon-button-namemanager",
      text:"导出图片",
      type: "dropdown",
      commandName: "exportImage_List",
      subCommands: [
         "exportSheetPDFImage",
         "exportRangePDFImage",
         "exportSheetImage",
         "exportRangeImage"
      ]
},
......
}
text 为显示文本。
type 为按钮类型，本例中为dropdown。
iconClass 设置dropdown下拉列表图片。
commandName 为命令名称，需要全局唯一。
在subCommands 中设置下拉菜单各项的命令。

所以接下来我们就需要定义下拉列表各项的命令了。

var ribbonFileCommands= {
.......
"exportImage_List": {
      title: "exportImage_List",
      bigButton: true,
      iconClass: "ribbon-button-namemanager",
      text:"导出图片",
      type: "dropdown",
      commandName: "exportImage_List",
      subCommands: [
         "exportSheetPDFImage",
         "exportRangePDFImage",
         "exportSheetImage",
         "exportRangeImage"
      ]
},
"exportSheetPDFImage": {
      iconClass: "ribbon-button-namemanager",
      text: "Sheet导出PDF图片",
      commandName: "exportSheetPDFImage",
      execute: async function (context) {
         exportImage(context, false, true)
      }
},
"exportRangePDFImage": {
      iconClass: "ribbon-button-namemanager",
      text: "选择区域导出PDF图片",
      commandName: "exportRangePDFImage",
      execute: async function (context) {
         exportImage(context, true, true)
      }
},
"exportSheetImage": {
      iconClass: "ribbon-button-namemanager",
      text: "Sheet导出图片",
      commandName: "exportSheetImage",
      execute: async function (context) {
         exportImage(context, false, false)
      }
},
"exportRangeImage": {
      iconClass: "ribbon-button-namemanager",
      text: "选择区域导出图片",
      commandName: "exportRangeImage",
      execute: async function (context) {
         exportImage(context, true, false)
      }
},
......
}

在 execute 中定义下拉列表各项具体执行内容的function。

（2）将命令 exportImage_List 添加至对应的 config 中。

var ribbonFileConfig =
{
"label": "文件操作",
"thumbnailClass": "ribbon-thumbnail-spreadsettings",
"commandGroup": {
      "children": [
            .......
            {
               "direction": "vertical",
               "commands": [
                  "exportImage_List"
               ]
            },
            ......
      ]

}
}

（3）将命令注册到config的commandMap属性上。

designerConfig.commandMap = {}；
Object.assign(designerConfig.commandMap, ribbonFileCommands)；

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

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 */
);

这样我们自定义的DropDown可以正常工作了。
image.png363968505.png