组件化编辑器自定义——Toolbar的使用以及其命令的定义

收藏

本帖最后由 Derrick.Jiao 于 2021-12-1 08:39 编辑

在这篇文章中，我们介绍了toolbar config的一些情况以及我们对config的升级。
https://gcdn.grapecity.com.cn/fo ... =1&extra=#pid463675

这篇教程主要讲讲toolbar应该怎么在设计器中使用。前面我们也有提到一个新的命名空间叫GC.Spread.Sheets.Designer.ToolbarModeConfig。我们要使用toolbar的时候，先获取设计器实例，然后通过setConfig设置这个config。这样就可以直接使用toolbar模式，怎么样,是不是so easy, too happy?

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('gc-designer-host'));
//Switch to toolbar mode ribbon
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);

复制代码

结合上面的代码，我们来做一个模式切换的demo，也就是在工具栏上添加一个新的按钮来切换两种形式。首先我们还是来定义一个ribbon，创建一个名为switch的命令，我们可以看到label属性这块，用了一个if公式判断，当我们的ribbonHeight大于toolbarHeight的时候就显示label，否则不显示。因为我们知道toolbar的位置有限，“寸土寸金”，因此可以不显示label。由此，公式对于command的options的作用可见一斑。

var customerRibbon = {
"id": "operate",
"text": "操作",
"buttonGroups": [
{
"label": "=IF(ribbonHeight>toolbarHeight, "高端操作", "")",
"thumbnailClass": "ribbon-thumbnail-clipboard",
"commandGroup": {
"children": [
"switch"
]
}
},
]
};

复制代码

接下来就是定义我们ribbon上的命令了，在命令中我们可以看到，icon可以根据两种模式调整大小，可以通过visiblePriority控制其展示的优先级。在execute中，通过三目表达式进行config的切换。var switchConfig = true;
var ribbonFileCommands = {
         "switch": {
            iconClass: "ribbon-button-namemanager",
            bigButton: "=AND(ribbonHeight>toolbarHeight,NOT(inDropdown))",
            text: "切换工具栏",
            visiblePriority: 7,
            commandName: "switch",
            execute: async function (context) {
                  context.setConfig(switchConfig ? GC.Spread.Sheets.Designer.ToolBarModeConfig : GC.Spread.Sheets.Designer.DefaultConfig);
                  switchConfig = !switchConfig;
            }
         }
      }

最后通过再将定义好的命令以及ribbon分别加入到我们的default config和toolbar config中，这样定义好的一个命令就可以在两套配置中使用var defaultConfig = GC.Spread.Sheets.Designer.DefaultConfig;
var toolbarConfig = GC.Spread.Sheets.Designer.ToolBarModeConfig;
defaultConfig.commandMap = {};
toolbarConfig.commandMap = {};
Object.assign(defaultConfig.commandMap, ribbonFileCommands);
Object.assign(toolbarConfig.commandMap, ribbonFileCommands);

defaultConfig.ribbon.push(customerRibbon);
toolbarConfig.ribbon.panels.push(customerRibbon);
designer.setConfig(defaultConfig);

下载附件即可查看完整demo

sssssss · sssssss

三目表达式中的变量是可以自己定义的吗？

Derrick.Jiao · Derrick.Jiao

sssssss 发表于 2022-7-29 19:45
三目表达式中的变量是可以自己定义的吗？

第一个是自己定义的量，后面两个可以获取我们内置的defalutconfig以及toolbarconfig之后，往里增删内容也是可以的。
image.png384543151.png

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

组件化编辑器自定义——Toolbar的使用以及其命令的定义

2 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证