纯前端表格控件SpreadJS使用教程:组件化编辑器自定义(Toolbar使用以及命令的定义)

转帖|使用教程|编辑:龚雪|2021-10-14 10:03:31.367|阅读 15 次

概述:本文主要为大家介绍Toolbar的使用以及命令的定义,欢迎下载最新版工具体验~

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

相关链接:

点击获取SpreadJS工具下载

这篇教程主要讲讲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);

SpreadJS | 下载试用

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

本文转载自葡萄城

如果您对我们的产品还有任何疑问,欢迎咨询在线客服>>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:葡萄城

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
SpreadJS

面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。

SpreadJS在线表格编辑器

SpreadJS在线表格编辑器是类似在线Excel功能和外观的表格编辑程序,是SpreadJS桌面设计器的在线版本,并且提供了源代码,用户可以任意扩展自定制。

在线咨询
联系我们
TOP
在线客服系统
live chat