深入解析如何自定义SpreadJS右键菜单（二）

本例中展示了三个操作，分别是为右键菜单添加项、删除右键菜单的两个指定项、自定义右键菜单的“粘贴”项。

下载SpreadJS最新试用版

自定义右键菜单示例解析

经过以上的分析，相信大家对SpreadJS右键菜单组件已经有了充分的了解，下面我用一个Demo展示一下具体该如何对右键菜单实现自定义。

Demo文件zip包

本例中展示了三个操作，分别是为右键菜单添加项、删除右键菜单的两个指定项、自定义右键菜单的“粘贴”项。以下分别解析这三个案例的代码：

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](http://help.grapecity.com/spread/SpreadSheets11/webframe.html#SpreadJS~GC.Spread.Commands.CommandManager~register.html)：

2、 删除右键菜单的两个指定项：

```jsvar 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、 自定义右键菜单的“粘贴”项：

```jsvar 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正版授权，请点击“咨询在线客服”哟！

来源：慧都