组件版编辑器自定义功能（v14.2）——自定义下拉命令

收藏

本帖最后由 Derrick.Jiao 于 2021-9-28 12:24 编辑

通过下面这篇设计器配置变化的产品动态，我们也了解到在14.2的default_config的升级重点在下拉式命令。
https://gcdn.grapecity.com.cn/fo ... =1&extra=#pid461738

本次的教程，通过自定义下拉式命令也顺便一起了解对自定义命令时接口的增强。可以先看下实现效果，实现的是插入一个名为“操作”的ribbon，并在这个ribbon下插入我们的定义buttonGroups以及下面的下拉菜单命令。
image.png291035765.png

相信大家对设计器的初始化不陌生了，我们直接来添加一个名为“操作”的ribbon。
我们先定义ribbon对象，然后将其push到config下的ribbon数组中，最后通过setConfig将这个新的配置注入到我们的设计器上。
var customerRibbon = {
      "id": "operate",
      "text": "操作",
      "buttonGroups": []
};

config.ribbon.push(customerRibbon);
designer.setConfig(config);

完成上面的操作后，可以看到一个名为“操作”的ribbon已经被添加到了工具栏上。
image.png30665282.png

下面就是来完善buttonGroups里面的内容，下图的每一个红框就是一个buttonGroup。
image.png749267272.png

首先看label就是这个buttonGroup的名称。thumbnailClass为页面自适应后这个buttonGroup的缩略图。下面的commandGroup就是定义各个命令按钮的集合，里面children的第一个对象就是本次要定义的下拉命令的内容。我们可以看到，里面有这个下拉命令（command，如要定义下拉命令，这个必须写，否则不生效），命令的类型（type），定义下拉最大宽度（dropdownMaxWidth），定义下拉最大高度（dropdownMaxHeight）以及下拉命令的子命令（children）。
image.png575122985.png

完成布局上的操作后，接下来我们来定义上面对应的命令。可以看到，iconClass是这个命令对应的图标，与上面的thumbnailClass类似，可以使用我们内置的图标，也可使用自定义的css类来设置。我们可以通过“bigButton”指定命令是否大的按钮，可以通过text指定这个按钮显示的文本，可以通过direction指定方向。当我们定义下拉对应的命令时，可以通过showDropdownButton指定是否显示下拉按钮。最后就是commandName，定义命令的名称。
image.png285325621.png

值得注意的是，在v14.2后，在定义命令时，除了commandName外，其余属性都可以通过公式的形式来进行赋值。红框的值是14.2新增的状态，我们可以通过getData获取这些状态来看下对应的具体值。

完成上面的操作之后，如我们需要自定义的命令能够执行，那么我们需要将其加到commandMap里面
config.commandMap = {};
Object.assign(config.commandMap, ribbonFileCommands);

以上就是自定义下拉命令的增强示例的介绍，下载附件即可查看完整demo。

		自动登录	找回密码
密码			立即注册

组件版编辑器自定义功能（v14.2）——自定义下拉命令

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证