SpreadJS在线表格编辑器自定义功能 - 新建右键菜单（Content Menu）

收藏

本帖最后由 Lynn.Dou 于 2021-9-10 14:15 编辑

在前面的教程中我们学习了组件版设计器的初始化和新建工具栏按钮
本节课我们继续来学习组件版设计器如何自定义右键菜单。
1. 自定义右键菜单—删除
示例：我想删除单元格右键菜单的 “删除”项，应该如何操作呢？
image.png842925720.png

(1) 获取designer的DefaultConfig

var CustomerConfig = GC.Spread.Sheets.Designer.DefaultConfig；

(2) 如下图，右键菜单contextMenu为一个包含多个命令名称的数组。
image.png662950439.png

接下来我们需要做出判断，遍历contextMenu找到我们指定要删除的命令名称（示例：DeleteDialog），然后使用splice方法将其删除。
if (CustomerConfig.contextMenu) {
for (let i = 0; i < CustomerConfig.contextMenu.length; i++) {
      if (CustomerConfig.contextMenu=== GC.Spread.Sheets.Designer.CommandNames.DeleteDialog) {
         CustomerConfig.contextMenu.splice(i, 1)
      }
}
}

(3) 创建一个新的designer，CustomerConfig为其参数。
var designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById('gc-designer-container'),
CustomerConfig
);

这样，单元格右键菜单的“删除”项就被删除了。

删除右键菜单其他项同理，只需将 CommandNames.DeleteDialog 修改为对应的名称即可。

freedom2012 · freedom2012

有个问题，这种方式右键菜单里回调里的state(hook)状态值不会更新

freedom2012 · freedom2012

如果我要根据单元格内容展示不同的右键菜单怎么办， new GC.Spread.Sheets.Designer.Designer 是不行的它会把表格数据和事件监听全部冲掉？

Lynn.Dou · Lynn.Dou

您可以参考下方链接贴：
https://gcdn.grapecity.com.cn/showtopic-54101-1-325.html

另，为便于后续交流，关于此问题建议您在求助中心发新帖，教程集锦容易漏贴。

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

SpreadJS在线表格编辑器自定义功能 - 新建右键菜单（Content Menu）

3 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人