本帖最后由 dexteryao 于 2021-2-3 17:09 编辑
前言:
前面我们介绍了 如何在组件版设计器中自定义 CheckBox 、自定义ComboBox
本节课我们继续来学习 如何在组件版设计器中 自定义DropDown下拉菜单。
1. 介绍 DropDown下拉菜单
在组件版设计器中,我们在工具栏中会看到如下图所示的下拉菜单。点击下拉菜单列表项即触发相应的命令。
在控制台我们可以打印出 DropDown“单元格类型”的默认配置信息,可供我们参考自定义DropDown
--------- 为方便演示,我们首先新建一个Ribbon 选项卡来放置自定义的DropDown。----------
2.增加新Ribbon 选项卡
在前面我们已经介绍了如何增加新Ribbon 选项卡,这里不再赘述。
3.自定义DropDown
整体思路与自定义 Checkbox 、ComboBox一致,我们以具体的代码来演示下。
实现功能:点击 “导出图片”下拉列表,可选择不同的导出图片方式
(1)在定义DropDown之前,我们先定义 点击DropDown下拉列表 的命令Commands。
var ribbonFileCommands= {
.......
"exportImage_List": {
title: "exportImage_List",
bigButton: true,
iconClass: "ribbon-button-namemanager",
text:"导出图片",
type: "dropdown",
commandName: "exportImage_List",
subCommands: [
"exportSheetPDFImage",
"exportRangePDFImage",
"exportSheetImage",
"exportRangeImage"
]
},
......
}
text 为显示文本。
type 为按钮类型,本例中为dropdown。
iconClass 设置dropdown下拉列表图片。
commandName 为命令名称,需要全局唯一。
在subCommands 中设置下拉菜单各项的命令。
所以接下来我们就需要定义下拉列表各项 的命令了。
var ribbonFileCommands= {
.......
"exportImage_List": {
title: "exportImage_List",
bigButton: true,
iconClass: "ribbon-button-namemanager",
text:"导出图片",
type: "dropdown",
commandName: "exportImage_List",
subCommands: [
"exportSheetPDFImage",
"exportRangePDFImage",
"exportSheetImage",
"exportRangeImage"
]
},
"exportSheetPDFImage": {
iconClass: "ribbon-button-namemanager",
text: "Sheet导出PDF图片",
commandName: "exportSheetPDFImage",
execute: async function (context) {
exportImage(context, false, true)
}
},
"exportRangePDFImage": {
iconClass: "ribbon-button-namemanager",
text: "选择区域导出PDF图片",
commandName: "exportRangePDFImage",
execute: async function (context) {
exportImage(context, true, true)
}
},
"exportSheetImage": {
iconClass: "ribbon-button-namemanager",
text: "Sheet导出图片",
commandName: "exportSheetImage",
execute: async function (context) {
exportImage(context, false, false)
}
},
"exportRangeImage": {
iconClass: "ribbon-button-namemanager",
text: "选择区域导出图片",
commandName: "exportRangeImage",
execute: async function (context) {
exportImage(context, true, false)
}
},
......
}
在 execute 中定义 下拉列表各项 具体执行内容的function。
(2)将命令 exportImage_List 添加至对应的 config 中。
var ribbonFileConfig =
{
"label": "文件操作",
"thumbnailClass": "ribbon-thumbnail-spreadsettings",
"commandGroup": {
"children": [
.......
{
"direction": "vertical",
"commands": [
"exportImage_List"
]
},
......
]
}
}
(3)将命令注册到config的commandMap属性上。
designerConfig.commandMap = {};
Object.assign(designerConfig.commandMap, ribbonFileCommands);
(4)在designer的config中加入自定义的命令和按钮
customerRibbon.buttonGroups.push(ribbonFileConfig);
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 */
);
这样我们自定义的DropDown可以正常工作了。
|
-
|