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

前言：在上节中我们介绍了如何在组件版设计器中自定义CheckBox，本节课我们继续来学习 如何自定义ComboBox下拉组合框。


1. 介绍 ComboBox

在组件版设计器中，我们在工具栏中会看到如下图所示的组合框。选择下拉列表项 即可设置相应的值。
在控制台我们可以打印出 ComboBox“字号”的默认配置信息，可供我们参考自定义ComboBox


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

2.增加新Ribbon 选项卡

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

3.自定义ComboBox

整体思路与自定义 Checkbox 一致，我们以具体的代码来演示下。
实现功能：收缩打印输出的宽度，使之适合特定的页数。
通过 点击Checkbox 下拉项，来设置这一特定的页数。

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

var ribbonPrintCommands = {
   "setFitPagesWide": {
        text: "自动",
        comboWidth: 60,
        type: "comboBox",
        commandName: "setFitPagesWide",
        dropdownList: [
            {
                text: "自动",
                value: "-1"
            },
            {
                text: "1",
                value: "1"
            },
            {
                text: "2",
                value: "2"
            }
        ],
        execute: async (context, selectValue) => {
            if (selectValue != null && selectValue != undefined) {
                setTimeout(() => {
                    let sheet = context.Spread.getActiveSheet();
                    var printInfo = sheet.printInfo();
                    printInfo.fitPagesWide(parseInt(selectValue));
                    sheet.printInfo(printInfo)
                }, 0);
            }
        },
        getState: (context) => {
            let sheet = context.Spread.getActiveSheet();
            var printInfo = sheet.printInfo()
            var value = printInfo.fitPagesWide();
            return value.toString();
        }
    },

    "setFitPagesTall": {
        text: "自动",
        comboWidth: 60,
        type: "comboBox",
        commandName: "setFitPagesTall",
        dropdownList: [
            {
                text: "自动",
                value: "-1"
            },
            {
                text: "1",
                value: "1"
            },
            {
                text: "2",
                value: "2"
            }
        ],
        execute: async (context, selectValue) => {
            if (selectValue != null && selectValue != undefined) {
                setTimeout(() => {
                    let sheet = context.Spread.getActiveSheet();
                    var printInfo = sheet.printInfo();
                    printInfo.fitPagesTall(parseInt(selectValue));
                    sheet.printInfo(printInfo)
                }, 0);
            }
        },
        getState: (context) => {
            let sheet = context.Spread.getActiveSheet();
            var printInfo = sheet.printInfo()
            var value = printInfo.fitPagesTall();
            return value.toString();
        }
    },

}
上面代码注册了 setFitPagesWide、setFitPagesTall命令。接下来我们来具体分析代码各部分的作用。
text 为显示文本。
type 为命令类型，本例中为comboBox。
iconClass 为comboBox样式，可以制定comboBox图片。
commandName 为命令名称，需要全局唯一。
dropdownList 中设置下拉项的text值和value值。
comboWidth 为组合框的UI宽度。
在 execute 中定义具体执行内容的function，本例中使用 fitPagesTall方法 来设置打印时的水平页数 。
在 getState 中控制组合框的显示文本。

（2）将命令 setFitPagesWide、setFitPagesTall 添加至对应的 config 中。

var ribbonPrintConfig = {     "label": "页面布局",     "thumbnailClass": "ribbon-thumbnail-spreadsettings",     "commandGroup": {         "children": [            {                "direction": "vertical",                 "commands": [                     {                         iconClass: "ribbon-button-namemanager",                         text: "宽度",                     },                     {                         iconClass: "ribbon-button-namemanager",                         text: "高度",                     }                 ]             }         ]     } } （3）将命令注册到config的commandMap属性上。 designerConfig.commandMap = {}； Object.assign(designerConfig.commandMap, ribbonPrintCommands )； （4）在designer的config中加入自定义的命令和按钮 customerRibbon.buttonGroups.push(ribbonPrintConfig ); 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 */ ); 这样我们自定义的ComboBox可以正常工作了。