下載SpreadJS最新試用版

自定義右鍵菜單示例解析

經過以上的分析，相信大家對SpreadJS右鍵菜單組件已經有了充分的了解，下面我用一個Demo展示一下具體該如何對右鍵菜單實現自定義。

本例中展示了三個操作，分別是為右鍵菜單添加項、刪除右鍵菜單的兩個指定項、自定義右鍵菜單的“粘貼”項。以下分別解析這三個案例的代碼：

1、 為右鍵菜單添加一個項：

```js
/*
*  定義一個命令，作為右鍵菜單項的執行邏輯
* */
spread.commandManager().register("insertRowsBehind",
    {
        canUndo: true,
        execute: function (context, options, isUndo) {
            var Commands = GC.Spread.Sheets.Commands;
            // 在此加cmd
            options.cmd = "insertRowsBehind";
            if (isUndo) {
                Commands.undoTransaction(context, options);
                return true;
            } else {
                Commands.startTransaction(context, options);
                var sheet = spread.getActiveSheet();
                var sels = sheet.getSelections();
                if(sels && sels.length > 0){
                    for(var i=0; i<sels.length; i++ ){
                        var sel = sels[i];
                        var row = sel.row;
                        var rowCount = sel.rowCount;
                        sheet.addRows(row+1, rowCount);
                    }
                }
                Commands.endTransaction(context, options);
                return true;
            }
        }
    });

// 獲取右鍵菜單數組
var menuData = spread.contextMenu.menuData;

console.log(menuData);

// 定義一個在行頭區域執行的右鍵菜單項
var insertRowsBehind = {
    command: "insertRowsBehind",
    text: "向后插入行",
    // name只要不重復即可
    name: "insertRowsBehind",
    // 把自己定義好的icon class加在這里
    iconClass:"gc-spread-custom-icon",
    workArea: "rowHeader"
};

// 將自定義的項，加入到“插入行”（insertRows）之后
menuData.forEach(function (item, index) {
    if(item && item.name === "gc.spread.insertRows"){
        menuData.splice(index+1, 0, insertRowsBehind);
    }
});

```
以上代碼展示了如何實現為右鍵菜單添加一個自定義命令項，效果如下圖所示：

![](/images/blogs/how-to-customize-spread-right-click-menu_16.png)

如果對命令不熟悉，可以參考我們的[API](//help.grapecity.com/spread/SpreadSheets11/webframe.html\#SpreadJS\~GC.Spread.Commands.CommandManager\~register.html)：

2、 刪除右鍵菜單的兩個指定項：

```js
var menuData = spread.contextMenu.menuData;

var newMenuData = [];

/*
*  注意：這里沒有直接刪除原數組，而是創建一個新數組，
*  原因是在遍歷數組時不能同時刪除數組項，這樣會導致程序運算結果錯誤。
* */
menuData.forEach(function (item) {
    if(item){
        if(item.name === "gc.spread.insertSheet" ||
            item.name === "gc.spread.deleteSheet"){
            return;
        }
        newMenuData.push(item);
    }
});

// 將新數組賦予spread的右鍵菜單屬性
spread.contextMenu.menuData = newMenuData;
```

以上代碼演示了如何刪除掉sheet標簽右鍵菜單中的“插入”和“刪除”項，如圖：

![](/images/blogs/how-to-customize-spread-right-click-menu_17.png)

![](/images/blogs/how-to-customize-spread-right-click-menu_18.png)

3、 自定義右鍵菜單的“粘貼”項：

```js
var paste = {
    iconClass : "gc-spread-pasteAll",
    name : "gc.spread.pasteOptions",
    text : "粘貼",
    command : "gc.spread.contextMenu.pasteAll",
    workArea : "viewportcolHeaderrowHeadercorner"
};

var menuData = spread.contextMenu.menuData;
var newMenuData = [];
menuData.forEach(function (item) {
    if(item){
        if(item.name === "gc.spread.pasteOptions" ||
            item.group === "gc.spread.pasteOptions"){
            return;
        }
        newMenuData.push(item);
    }
});
newMenuData.unshift(paste);
spread.contextMenu.menuData = newMenuData;

```

最后一段代碼，展示了如何將“粘貼選項”組改為“粘貼”項，如圖：

![](/images/blogs/how-to-customize-spread-right-click-menu_19.png)

![](/images/blogs/how-to-customize-spread-right-click-menu_20.png)

經過以上的解釋和Demo分析，相信大家都掌握了基本的自定義右鍵菜單的方法。但是右鍵菜單還有更加強大的功能，它還允許用戶自定義右鍵菜單的樣式！如圖：

購買SpreadJS正版授權，請點擊“”喲！