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

在前篇《深入解析如何自定义Spread JS右键菜单（上）》中，我们介绍了如何在V11及以上版本的Spread JS自定义右键菜单的命令项，本文就这个话题继续深入讨论一下，研究一下如何自定义右键菜单样式，引入自定义功能。

注意：本文适用Spread JS版本是V11及以上版本。

获取本文的Demo请点击此处

了解MenuView

MenuView类的全名是GC.Spread.Sheets.ContextMenu.MenuView，它是SpreadJS界面元素的渲染，Spread JS将此类作为用户自定义的接口放出，以便于Spread JS用户可以方便地进行扩展和定制。关于MenuView更多用法可以参考学习指南。

点击此处，参考MenuView的API。

MenuView包括了一个Constructor构造器以及两个方法，分别是createMenuItemElement和getCommandOptions。getCommandOptions是用来获取对应右键菜单项绑定的命令的参数。本例是采用Dom绑定事件来实现菜单功能，因此暂不涉及此方法，如果用绑定命令的方式指定右键菜单的功能时，可以方便地在此方法中执行自定义逻辑，或者修改命令参数。

本例中关注的关键点在于MenuView的createMenuItemElement方法，当用户在页面上右键点击触发右键菜单事件时，Spread JS会调用此方法来执行右键菜单Dom的渲染操作。因此，我们可以通过该方法来加入我们自定义的内容。

准备右键菜单项，实现color picker的逻辑

OK，现在大家已经了解了关于MenuView的作用，结合《深入解析如何自定义Spread JS右键菜单（上）》的内容，现在开始准备右键菜单项的定义，并且实现一个简单的color picker。

首先，定义color picker菜单项，并添加到右键菜单中。代码如下：

var colorPickers = {
    text: "颜色选择器",
    name: "gc.spread.colorPicker",
    workArea: "viewport",
    subMenu:
        [{
            text: "背景色:",
            name: "selectColorPicker1"
        },{
            text: "字体色:",
            name: "selectColorPicker2"
        }]
};
var menuData = spread.contextMenu.menuData;
menuData.splice(1, 0, colorPickers);

以上代码不详细解释，只是说明一点，本例是采用Dom注册事件的方式来实现的功能，因此定义右键菜单项时并没有command属性，这不影响右键菜单的呈现。

其次，定义右键菜单执行的命令，命令分为两个，一个控制背景色，一个控制字体色。用命令实现功能的原因是命令可以方便用户执行撤回操作。代码如下：

/*
*  定义本例中用到的两个命令，
*  使用命令有个优点，就是方便用户执行撤回操作
* */
spread.commandManager().register("colorPicker_backColor",
    {
        canUndo: true,
        execute: function (context, options, isUndo) {
            var Commands = GC.Spread.Sheets.Commands;
            // 在此加cmd
            options.cmd = "colorPicker_backColor";
            if (isUndo) {
                Commands.undoTransaction(context, options);
                return true;
            } else {
                Commands.startTransaction(context, options);
                changeColor(spread, options.color, true);
                Commands.endTransaction(context, options);
                return true;
            }
        }
    });
spread.commandManager().register("colorPicker_foreColor",
    {
        canUndo: true,
        execute: function (context, options, isUndo) {
            var Commands = GC.Spread.Sheets.Commands;
            // 在此加cmd
            options.cmd = "colorPicker_foreColor";
            if (isUndo) {
                Commands.undoTransaction(context, options);
                return true;
            } else {
                Commands.startTransaction(context, options);
                changeColor(spread, options.color, false);
                Commands.endTransaction(context, options);
                return true;
            }
        }
    });
function changeColor(spread, color, flag){
    var sheet = spread.getActiveSheet();
    var selections = sheet.getSelections();
    if(selections && selections.length > 0){
        // 重要：挂起sheet绘制
        sheet.suspendPaint();
        selections.forEach(function (item) {
            var cellRange = sheet.getRange(item.row, item.col, item.rowCount, item.colCount);
            // 当flag为true时改变背景色，否则改变字体色
            if(flag){
                cellRange.backColor(color);
            }else {
                cellRange.foreColor(color);
            }
        });
        // 重要：恢复绘制
        sheet.resumePaint();
    }
}

最后，我们来实现一个基于Dom的Color Picker：

/*
*  创建颜色选择面板，并注册事件
* */
function createColorpicker(flag) {
    var colors = ['rgb(255,255,255)',
        'rgb(0,255,255)', 'rgb(255,0,255)',
        'rgb(255,255,0)', 'rgb(255,0,0)',
        'rgb(0,255,0)', 'rgb(0,0,255)',
        'rgb(0,0,0)', 'rgb(64,64,64)',
        'rgb(128,128,128)'];
    var colorPicker = $("<div id='colorPicker'></div>");
    for(var i=0; i<colors.length; i++){
        var color = $("<span class='colorPicker colorPickerBorderMouseout' mycolor='"+colors[i]+"' style='background-color:"+colors[i]+"'></span>");
        color.mouseenter(function () {
            $(this).removeClass("colorPickerBorderMouseout");
            $(this).addClass("colorPickerBorderMouseenter");
        });
        color.mouseout(function () {
            $(this).removeClass("colorPickerBorderMouseenter");
            $(this).addClass("colorPickerBorderMouseout");
        });
        color.click(function () {
            var that = $(this);
            var color = that.attr("mycolor");
            var spread = GC.Spread.Sheets.findControl(document.getElementById("ss"));
            var sheet = spread.getActiveSheet();
            var commandName = "colorPicker_foreColor";
            if(flag){
                commandName = "colorPicker_backColor";
            }
            spread.commandManager().execute({
                cmd: commandName,
                sheetName: sheet.name(),
                color : color
            });
        });
        colorPicker.append(color);
    }
    return colorPicker;
}

将Color Picker加入右键菜单项

OK，重点来了！现在我们通过代码，将我们实现的color picker加入到右键菜单中。

首先，定义自己的MenuView类，代码如下：

// 通过重写MenuView类，将自定义功能加入右键样式
function CustomMenuView() { }

第二步，继承原MenuView的功能。我们并不想自己实现整个右键菜单，因此我们需要用到原右键菜单的大部分样式与功能。代码如下：

// 继承原MenuView的功能
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();

第三步，重写原生createMenuItemElement方法。重点来了，就是在这里加入自己的代码逻辑。代码如下：

CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
    // 先执行原类的方法，继承右键菜单的样式
    var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(this, menuItemData);
    /*
    * 添加自己的样式。
    *
    *   menuItemView 是右键菜单当前项的容器div，
    *   自定义的样式可以在此添加。
    *
    *   需要注意的是，如果想引入第三方控件，比如datepicker之类，
    *   可能会与SpreadJS的样式与事件产生冲突，
    *   因此除非您从技术上做过充分的验证，
    *   否则不推荐在此设计引入过重的第三方控件。
    * */
    if (menuItemData.name === "selectColorPicker1") {
        $(menuItemView).append(createColorpicker(1));
        return menuItemView;
    } else if (menuItemData.name === "selectColorPicker2") {
        $(menuItemView).append(createColorpicker());
        return menuItemView;
    }else {
        return menuItemView;
    }
};

在SpreadJS渲染右键菜单时，每生成一项，都会调用createMenuItemElement方法。在重写createMenuItemElement时，关键点有以下几处：

1、执行原createMenuItemElement的逻辑，获取menuItemView实例；

GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(this, menuItemData);

我们通过执行这句代码让SpreadJS为我们生成一个右键菜单，并且返回了menuItemView的实例，这个实例就是当前右键菜单项所在的Dom。

2、对menuItemView实例进行操作；

if (menuItemData.name === "selectColorPicker1") {
        $(menuItemView).append(createColorpicker(true));
        return menuItemView;
    } else if (menuItemData.name === "selectColorPicker2") {
        $(menuItemView).append(createColorpicker(false));
        return menuItemView;
    }else {
        return menuItemView;
        }

好了，以上就是本文分享的全部内容，是不是正在惊叹于Spread JS的强大呢？不过要提醒大家的是，从设计上来讲，右键菜单中还是不宜引入过重的第三方控件的，如果一些动手能力强且脑洞比较大的同学想这样做，前期的技术调研一定要充分，只有很好地兼容Spread JS右键菜单的组件，才能让我们愉快地进行开发工作。

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。