SpreadJS在线表格编辑器自定义功能 -- 新增工具栏复选框（Ribbion CheckBox）
本帖最后由 Lynn.Dou 于 2021-11-12 12:18 编辑前言：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方法。
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
页:
[1]