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

QQ登录

只需一步,快速开始

Joestar.Xu SpreadJS 开发认证

超级版主

62

主题

9566

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
12552

SpreadJS 认证SpreadJS 高级认证

Joestar.Xu SpreadJS 开发认证
超级版主   /  发表于:2024-10-29 16:01  /   查看:23  /  回复:0
很多同学在使用SpreadJS和设计器时都有着各式各样自定义的需求,作为最灵活的操作面板——右键菜单,其往往被大家列为第一位自定义的对象。


但是在查阅了大量的资料后,大家会发现右键菜单的自定义并没有那么简单,不同的环境下要使用不同的代码来实现,今天我们就来学习一下自定义菜单的使用方法。

首先需要明确的是,设计器的右键菜单和SpreadJS的右键菜单是不一样的。

下图是SpreadJS的右键菜单:
image.png33565672.png

下图是设计器的右键菜单:
image.png447445372.png

如果想要重写SpreadJS的右键菜单,请参考以下代码:

  1. function ContextMenu() {}
  2. ContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
  3. ContextMenu.prototype.onOpenMenu = function (
  4.   menuData,
  5.   itemsDataForShown,
  6.   hitInfo,
  7.   spread
  8. ) {
  9.   console.log(itemsDataForShown);
  10.   for (const element of itemsDataForShown) {
  11.     let item = element;
  12.     if (
  13.       (item.name === "gc.spread.insertColumns" ||
  14.         item.name === "gc.spread.deleteColumns") &&
  15.       hitInfo.worksheetHitInfo.hitTestType == 1
  16.     ) {
  17.       item.disable = true;
  18.     }
  19.   }
  20. };
  21. spread.contextMenu = new ContextMenu();
复制代码


如果想要重写设计器的右键菜单,请参考以下代码:

  1. let oldOpenMenu = spread.contextMenu.onOpenMenu;
  2. spread.contextMenu.onOpenMenu = function (
  3.   menuData,
  4.   itemsDataForShown,
  5.   hitInfo,
  6.   spread
  7. ) {
  8.   oldOpenMenu.apply(this, arguments);
  9. };
复制代码


需要特别注意的是,您可以将SpreadJS的重写代码放在设计器中使用,此时设计器中的右键菜单将会变成SpreadJS中的右键菜单,但是设计器中右键菜单不能直接放在SpreadJS中使用,SpreadJS的右键菜单无法直接变成设计器的右键菜单。

两种不同实现的方案都使用了同一个函数,即onOpenMenu,在这个函数中有menuData,itemsDataForShown这两个关键参数。

menuData参数包含所有的右键菜单中的选项,你可以打印它看到所有的右键菜单选项。

而itemsDataForShown则只会包含每次打开右键菜单时,其中包含的右键菜单的选项:

image.png151968077.png

简单来说,我们可以直接在这个函数中修改这两个参数来控制右键菜单中显示的选项,在下一节我们将介绍该具体如何修改。

0 个回复

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