SpreadJS在线表格编辑器自定义功能 -- 新建工具栏下拉按钮（Ribbion DropDown）
本帖最后由 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可以正常工作了。
spreadJs Designer V14.2.1
获取的DropDown没有subCommands属性
V14.2.1 对于config结构做了修改，本文章对于V14.2.1不具有参考性。
您可以参考下方链接文章：
https://gcdn.grapecity.com.cn/showtopic-132316-1-1.html
请问下拉菜单可以配置二级选项吗？如果不可以的话，怎样才能配置二级下拉框呢？ 请参考附件demo，效果如下图：
ToolbarMode模式如何配置下拉框？
sssssss 发表于 2022-8-8 18:03
ToolbarMode模式如何配置下拉框？
请参考这个帖子
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=133648 Derrick.Jiao 发表于 2022-8-9 09:14
请参考这个帖子
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=133648
这里面是优先级的配置，没看到如何配置dropdown类型的操作，我写了type: "dropdown",但是点击三角下拉框不展示{
command: "addCellType11",
visiblePriority: 10,
type: "dropdown",
dropdownMaxWidth: 145,
children: ['comboBoxCellType', 'clearFormat', 'clearContent', 'clearComments']
} sssssss 发表于 2022-8-10 10:41
这里面是优先级的配置，没看到如何配置dropdown类型的操作，我写了type: "dropdown",但是点击三角下拉框 ...
请参考这个demo，无论是哪个config添加下拉命令的思路都是一样的，只不过对应的ribbon下的层级不同罢了。后续若仍有问题，可以开一个新帖进行交流。
我想问下dropdown这个下拉框用setData不能禁用吗？
页:
[1]
2