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

收藏 · 2021-11-12 12:18 上传

本帖最后由 Lynn.Dou 于 2021-11-12 12:18 编辑

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

1. 介绍 CheckBox

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

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

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

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

2.增加新Ribbon 选项卡

在浏览器Console中输入 GC.Spread.Sheets.Designer.DefaultConfig 即可查看默认ribbon选项卡配置。
image.png145140074.png

参考默认配置，自定义操作选项卡。
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可以正常工作了。
image.png646937865.png

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

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

复制代码

完整代码请参考附件demo

		自动登录	找回密码
密码			立即注册

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人