找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-1-26 09:59  /   查看:6531  /  回复:12
本帖最后由 dexteryao 于 2021-2-3 17:09 编辑

前言:
前面我们介绍了 如何在组件版设计器中自定义 CheckBox自定义ComboBox
本节课我们继续来学习 如何在组件版设计器中 自定义DropDown下拉菜单。

1. 介绍 DropDown下拉菜单

在组件版设计器中,我们在工具栏中会看到如下图所示的下拉菜单。点击下拉菜单列表项即触发相应的命令。
在控制台我们可以打印出 DropDown“单元格类型”的默认配置信息,可供我们参考自定义DropDown

image.png524094237.png

---------  为方便演示,我们首先新建一个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可以正常工作了。
image.png363968505.png










image.png840327453.png

12 个回复

倒序浏览
finstone-lush
金牌服务用户   /  发表于:2021-10-21 10:46:59
沙发
spreadJs Designer V14.2.1
获取的DropDown没有subCommands属性
image.png741895446.png
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-10-21 11:02:36
板凳
V14.2.1 对于config结构做了修改,本文章对于V14.2.1不具有参考性。
您可以参考下方链接文章:
https://gcdn.grapecity.com.cn/showtopic-132316-1-1.html
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2022-8-2 11:08:14
地板
请问下拉菜单可以配置二级选项吗?如果不可以的话,怎样才能配置二级下拉框呢?
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-8-2 17:32:50
5#
请参考附件demo,效果如下图:
image.png912474670.png

dropdown_二级菜单.html

4.79 KB, 下载次数: 375

回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2022-8-8 18:03:26
6#
ToolbarMode模式如何配置下拉框?
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2022-8-9 09:14:53
7#
sssssss 发表于 2022-8-8 18:03
ToolbarMode模式如何配置下拉框?

请参考这个帖子
https://gcdn.grapecity.com.cn/fo ... read&tid=133648
回复 使用道具 举报
sssssss
金牌服务用户   /  发表于:2022-8-10 10:41:35
8#
Derrick.Jiao 发表于 2022-8-9 09:14
请参考这个帖子
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=133648

这里面是优先级的配置,没看到如何配置dropdown类型的操作,我写了type: "dropdown",但是点击三角下拉框不展示
  1. {
  2.               command: "addCellType11",
  3.               visiblePriority: 10,
  4.               type: "dropdown",
  5.               dropdownMaxWidth: 145,
  6.               children: ['comboBoxCellType', 'clearFormat', 'clearContent', 'clearComments']
  7.             }
复制代码
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2022-8-10 16:30:11
9#
sssssss 发表于 2022-8-10 10:41
这里面是优先级的配置,没看到如何配置dropdown类型的操作,我写了type: "dropdown",但是点击三角下拉框 ...

请参考这个demo,无论是哪个config添加下拉命令的思路都是一样的,只不过对应的ribbon下的层级不同罢了。后续若仍有问题,可以开一个新帖进行交流。
image.png192724608.png

toolbar_mode.html

4.67 KB, 下载次数: 362

回复 使用道具 举报
忘记了~
注册会员   /  发表于:2022-10-9 10:06:42
10#
我想问下  dropdown这个下拉框用setData不能禁用吗?
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部