SpreadJS在线表格编辑器自定义功能 -- 新增工具栏复选框（Ribbion CheckBox）

前言：SpreadJS 组件版设计器采用了全新可配置设计，任何区域都采取json config 的配置方式。
通过修改默认的GC.Spread.Sheets.Designer.DefaultConfig，可以达到自定制功能。
本节课我们来学习下如何自定义工具栏（ribbon）和 添加 Checkbox复选框

1. 介绍 CheckBox

在组件版设计器中，我们在工具栏中会看到如下图所示的复选框。
点击 CheckBox 即可触发相应的命令。

在控制台我们可以打印出 CheckBox“行标题”的默认配置信息，可供我们参考自定义CheckBox

除了上述复选框样式（下文称为：小图标），CheckBox 也提供大图标样式，如下图 唤起 字段列表的”模板“按钮，实际就是CheckBox类型。（下文称为：大图标）


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

2.增加新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": [ ]
};

3.自定义Checkbox

（1）在定义Checkbox之前，我们先定义按钮点击时的命令Commands。

var ribbonPrintCommands = {
    // 小图标
    "showHidePrintLine": {
        text: "打印分页预览线",
        type: "checkbox",
        commandName: "showHidePrintLine",
        execute: async (context) => {
            setTimeout(() => {
                let sheet = context.Spread.getActiveSheet();
                var isVisible = sheet.isPrintLineVisible();
                sheet.isPrintLineVisible(!isVisible);
            }, 0)
        },
        getState: (context) => {
            let sheet = context.Spread.getActiveSheet();            //设置 checkBox 初始状态            //return !sheet.isPrintLineVisible();    //初始为选中状态
            return sheet.isPrintLineVisible();   //初始为未选中状态
        }
    }
    // 大图标
    "showHideScrollbar": {        
        text: "显示滚动条",
        type: "checkbox",
        iconClass: "ribbon-button-namemanager",
        bigButton: true,
        commandName: "showHideScrollbar",
        execute: async (context) => {
            setTimeout(() => {
                let vsb = context.Spread.options.showVerticalScrollbar;
                let hsb = context.Spread.options.showHorizontalScrollbar;
                context.Spread.options.showVerticalScrollbar = !vsb;
                context.Spread.options.showHorizontalScrollbar = !hsb;
            }, 0)
        },
        getState: (context) => {
            let sheet = context.Spread.getActiveSheet();
            return context.Spread.options.showVerticalScrollbar;
        }
    }
}

上面代码注册了 showHidePrintLine、showHideScrollbar 命令。接下来我们来具体分析代码各部分的作用。
text 为显示文字。
type 为命令类型，本例中为checkbox。
iconClass 为CheckBox样式，可以制定CheckBox图片。
bigButton 设置为true时表示大图标。
commandName 为命令名称，需要全局唯一。
在 execute 中定义具体执行内容的function，本例中使用 isPrintLineVisible方法 来控制 打印预览线的显示 。
在 getState 中控制复选框的选中状态。

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

var ribbonPrintConfig = {
    "label": "页面布局",
    "thumbnailClass": "ribbon-thumbnail-spreadsettings",
    "commandGroup": {
        "children": [
            //小图标
            {
                "direction": "vertical",
                "commands": ["showHidePrintLine"]
            }，
            //分割线
            {
                "type": "separator"
            },
            // 大图标
            {
                "direction": "vertical",
                "commands": ["showHideScrollbar"]
            }
        ]
    }
}

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

这样我们自定义的checkBox可以正常工作了。


注：
只有设计器内置的命令，才能使用getCommand 方法获取到，并执行getState或者excute方法。
对于自定义的命令，通过代码可以看到是注册在了 commandMap 中，
所以需要通过commandMap 来执行getState或者excute方法。

1. var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig, undefined);
   
2. var value = designerConfig.commandMap.showHideScrollbar.getState(designer);
   
3. console.log(value);

复制代码

完整代码请参考附件demo