自定义右键菜单一站式解决方案（一）

很多同学在使用SpreadJS和设计器时都有着各式各样自定义的需求，作为最灵活的操作面板——右键菜单，其往往被大家列为第一位自定义的对象。


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

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

下图是SpreadJS的右键菜单：


下图是设计器的右键菜单：


如果想要重写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则只会包含每次打开右键菜单时，其中包含的右键菜单的选项：



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