在前篇《深入解析如何自定义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右键菜单的组件,才能让我们愉快地进行开发工作。


SpreadJS | 下载试用

纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、中通、民航飞行学院等国内知名企业客户青睐。

您对SpreadJS产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>技术支持论坛