看纯前端表格控件SpreadJS如何组件化编辑器自定义

大家好，欢迎来到IT知识分享网。

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 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

本文转载自葡萄城