SpreadJS在线表格编辑器自定义功能 -- 新建工具栏下拉选项（Ribbion ComboBox）
本帖最后由 dexteryao 于 2021-2-3 13:59 编辑前言：在上节中我们介绍了如何在组件版设计器中自定义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可以正常工作了。
页:
[1]