找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-7-14 09:35  /   查看:2612  /  回复:0
本帖最后由 Lynn.Dou 于 2021-10-25 15:26 编辑

最近有小伙伴提出这样一个需求:如下图,在 组件版设计器 工具栏 的 单元格类型中 添加新项。
image.png554941100.png

一:组件版设计器 V14.2.0 之前版本 请参考下文:

我们以附件的demo为例:
首先创建一个 config.js 文件,在里面对config做出配置。创建 exportImage 命令,并将它添加到 subCommands 中。
代码如下:
  1. var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
  2. var cellType = GC.Spread.Sheets.Designer.getCommand("cellType");
  3. cellType.subCommands.push("exportImage");
  4. var newCommands = {
  5.     "cellTypeNew": cellType,
  6.     "exportImage": {
  7.         iconClass: "ribbon-button-namemanager",
  8.         text: "导出图片",
  9.         commandName: "exportImage",
  10.         execute: async function (context) {
  11.             console.log("导出图片")
  12.         }
  13.     }
  14. }
  15. designerConfig.commandMap = {}
  16. Object.assign(designerConfig.commandMap, newCommands);
  17. designerConfig.ribbon[0].buttonGroups[5].commandGroup.children[0].commands[0] = "cellTypeNew";
复制代码


在html文件中引入config.js ,将designerConfig作为参数,创建一个新的designer。
  1. var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig, undefined);
复制代码
这时我们再运行下项目,可以看到 导出图片项 已添加。

image.png742167358.png


点击  导出图片 ,控制台打印 “导出图片”,命令生效。

image.png189491881.png



完整代码请参考附件。


二:组件版设计器 V14.2.0 之后版本 请参考下方链接文章:https://gcdn.grapecity.com.cn/showtopic-133667-1-1.html

配置文件 - 单元格类型添加新项.zip

1.21 MB, 下载次数: 127

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部