请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-1-20 14:27  /   查看:3821  /  回复:6
本帖最后由 dexteryao 于 2021-2-3 14:01 编辑

组件版设计器推出也有一段时间了,也有许多朋友在问如何定制组件设计器的右键菜单。这篇教程就教大家通过简单的demo实现右键菜单。通过自定义一个新的上下文菜单项,可以为用户提供更方便的方式快速到达一些自定义的常用操作。
例如,如果用户想在所有区域右键快捷菜单中添加一个“弹窗菜单”项,选中该项后,将进行自定义操作(本次demo实现一个弹窗操作)。
image.png956584777.png

要实现右键菜单,关键在于右键菜单的显示与点击后触发的命令。




首先,我们先获取到设计器的DefaultConfig
  1.     var designerConfig = JSON.parse(
  2.       JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
  3.     );
复制代码


然后我们将需要点击后执行的命令push到DefaultConfig的commandMap下
  1. designerConfig.commandMap = {

  2.       "myCmd":{
  3.   
  4.         text: "弹窗菜单",
  5.         commandName: "myCmd",
  6.         execute: () =>{
  7.           alert("我是重写的右键菜单");
  8.         }
  9.       }
  10.       
  11.     }
复制代码

我们可以看到,上面的代码将一个命令名为“myCmd”的命令添加到命令树中。光是添加命令还不够,我们还需将该命令添加到contextMenu中,这样我们的右键菜单才会显示对应的项目。最后再初始化设计器实例。
  1. designerConfig.contextMenu.push("myCmd");
  2. var designer = new GC.Spread.Sheets.Designer.Designer(
  3.       document.getElementById("designer") /**designer host */,
  4.       designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */
  5.     );
复制代码


完成了上面的步骤,我们会发现,在右键单元格、列头行头等都会有这个右键菜单选项。那么如何控制这个右键菜单只在某一个区域显示呢?我们可以在定义命令的时候,可以添加一个visibleContext属性。若只需在点击单元格时出现,则可以用下面的代码。
  1. visibleContext:"ClickViewport",
复制代码
若仅需在行头列头右键时出现,则可以用下面的代码
  1. visibleContext:"ClickRowHeader || ClickColHeader",
复制代码


下载附件即可查看完整的demo

spread-designer-右键菜单.zip

632.92 KB, 下载次数: 222

6 个回复

倒序浏览
卑微的打工狗
金牌服务用户   /  发表于:2023-5-26 16:22:03
沙发
元老您好,我有类似的需求
问题一:按照您写的帖子,并未实现功能,主要原因在于,添加   new GC.Spread.Sheets.Designer.Designer   这一步代码时,控制台报错,个人怀疑可能与 document.getElementById("designer")        有关,但找不出解决办法。


期望实现右键点击添加按钮功能。附上demo

单元格右键添加功能.zip

159.19 KB, 下载次数: 36

回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-5-29 11:43:14
板凳
你是通过标签添加的编辑器,所以并没有id为designer的元素,自然找不到了
但是你在初始化的时候,已经将this.designer做了赋值,这个就是现在的设计器对象
继续用这个做相关设置操作即可


image.png319314574.png
回复 使用道具 举报
阿仁
金牌服务用户   /  发表于:2023-7-18 10:36:24
地板
Richard.Ma 发表于 2023-5-29 11:43
你是通过标签添加的编辑器,所以并没有id为designer的元素,自然找不到了
但是你在初始化的时候,已经将th ...

let designerInitialized = (wb) => {
      designer = wb;
      let spread = designer.getWorkbook();

      console.log(spread, "spread");
      console.log(designer, "designer");

      var designerConfig = JSON.parse(
        JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
      );

      designerConfig.commandMap = {
        myCmd: {
          text: "弹窗菜单",
          commandName: "myCmd",
          visibleContext: "ClickRowHeader",
          execute: () => {
            alert("我是重写的右键菜单");
          },
        },
      };

      designerConfig.contextMenu.push("myCmd");

      designer._config = designerConfig;

      console.log(designer, "designer1");

      var sheet = spread.getActiveSheet();
      sheet.setArray(0, 0, [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [10, 11, 12],
        [13, 14, 15],
      ]);
    };

直接操作设计器对象,菜单也没有出来,麻烦看一下什么问题
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-7-18 11:58:18
5#
阿仁 发表于 2023-7-18 10:36
let designerInitialized = (wb) => {
      designer = wb;
      let spread = designer.getWorkbook ...

您好,您在初始化后再修改config,需要使用setConfig接口来将config重新应用,designer._config = designerConfig是不会生效的。

如:  designer.setConfig(designerConfig);
回复 使用道具 举报
表格6666
金牌服务用户   /  发表于:2023-9-24 13:34:48
6#
visibleContext 接受的是字符串,如何控制右键不同的单元格上,对自定义菜单的显示隐藏控制?
场景:在模版字段上右键需要显示 新增的自定义菜单,在其他格子上是不需要的
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-9-25 10:19:21
7#
表格6666 发表于 2023-9-24 13:34
visibleContext 接受的是字符串,如何控制右键不同的单元格上,对自定义菜单的显示隐藏控制?
场景:在模 ...

一个比较可行的实现方案是:
1、将指定的右键菜单command的visibleContext设置为"test1"(举例说明)。
2、监听EnterCell事件,此事件会在单元格上右键时触发,当在指定单元格上右键时,调用designer.setData("test1", true)接口,此时test1的值为true,相应的,在其他的单元格上右键时,设置test1为false即可。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部