下載SpreadJS最新試用版

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

獲取本文的Demo請

了解MenuView

MenuView類的全名是GC.Spread.Sheets.ContextMenu.MenuView，它是SpreadJS界面元素的渲染，Spread JS將此類作為用戶自定義的接口放出，以便于Spread JS用戶可以方便地進(jìn)行擴(kuò)展和定制。

MenuView包括了一個Constructor構(gòu)造器以及兩個方法，分別是createMenuItemElement和getCommandOptions。getCommandOptions是用來獲取對應(yīng)右鍵菜單項綁定的命令的參數(shù)。本例是采用Dom綁定事件來實現(xiàn)菜單功能，因此暫不涉及此方法，如果用綁定命令的方式指定右鍵菜單的功能時，可以方便地在此方法中執(zhí)行自定義邏輯，或者修改命令參數(shù)。

本例中關(guān)注的關(guān)鍵點在于MenuView的createMenuItemElement方法，當(dāng)用戶在頁面上右鍵點擊觸發(fā)右鍵菜單事件時，Spread JS會調(diào)用此方法來執(zhí)行右鍵菜單Dom的渲染操作。因此，我們可以通過該方法來加入我們自定義的內(nèi)容。

準(zhǔn)備右鍵菜單項，實現(xiàn)color picker的邏輯

OK，現(xiàn)在大家已經(jīng)了解了關(guān)于MenuView的作用，結(jié)合《深入解析如何自定義Spread JS右鍵菜單（上）》的內(nèi)容，現(xiàn)在開始準(zhǔn)備右鍵菜單項的定義，并且實現(xiàn)一個簡單的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);

以上代碼不詳細(xì)解釋，只是說明一點，本例是采用Dom注冊事件的方式來實現(xiàn)的功能，因此定義右鍵菜單項時并沒有command屬性，這不影響右鍵菜單的呈現(xiàn)。

其次，定義右鍵菜單執(zhí)行的命令，命令分為兩個，一個控制背景色，一個控制字體色。用命令實現(xiàn)功能的原因是命令可以方便用戶執(zhí)行撤回操作。代碼如下：

/*
*  定義本例中用到的兩個命令，
*  使用命令有個優(yōu)點，就是方便用戶執(zhí)行撤回操作
* */
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);
            // 當(dāng)flag為true時改變背景色，否則改變字體色
            if(flag){
                cellRange.backColor(color);
            }else {
                cellRange.foreColor(color);
            }
        });
        // 重要：恢復(fù)繪制
        sheet.resumePaint();
    }
}

最后，我們來實現(xiàn)一個基于Dom的Color Picker：

/*
*  創(chuàng)建顏色選擇面板，并注冊事件
* */
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加入右鍵菜單項

現(xiàn)在我們通過代碼，將我們實現(xiàn)的color picker加入到右鍵菜單中。首先，定義自己的MenuView類，代碼如下：

// 通過重寫MenuView類，將自定義功能加入右鍵樣式
function CustomMenuView() { }

第二步，繼承原MenuView的功能。我們并不想自己實現(xiàn)整個右鍵菜單，因此我們需要用到原右鍵菜單的大部分樣式與功能。代碼如下：

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

第三步，重寫原生createMenuItemElement方法。重點來了，就是在這里加入自己的代碼邏輯。代碼如下：

CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
    // 先執(zhí)行原類的方法，繼承右鍵菜單的樣式
    var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(this, menuItemData);
    /*
    * 添加自己的樣式。
    *
    *   menuItemView 是右鍵菜單當(dāng)前項的容器div，
    *   自定義的樣式可以在此添加。
    *
    *   需要注意的是，如果想引入第三方控件，比如datepicker之類，
    *   可能會與SpreadJS的樣式與事件產(chǎn)生沖突，
    *   因此除非您從技術(shù)上做過充分的驗證，
    *   否則不推薦在此設(shè)計引入過重的第三方控件。
    * */
    if (menuItemData.name === "selectColorPicker1") {
        $(menuItemView).append(createColorpicker(1));
        return menuItemView;
    } else if (menuItemData.name === "selectColorPicker2") {
        $(menuItemView).append(createColorpicker());
        return menuItemView;
    }else {
        return menuItemView;
    }
};

在SpreadJS渲染右鍵菜單時，每生成一項，都會調(diào)用createMenuItemElement方法。在重寫createMenuItemElement時，關(guān)鍵點有以下幾處：

1、 執(zhí)行原createMenuItemElement的邏輯，獲取menuItemView實例；

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

我們通過執(zhí)行這句代碼讓SpreadJS為我們生成一個右鍵菜單，并且返回了menuItemView的實例，這個實例就是當(dāng)前右鍵菜單項所在的Dom。

2、 對menuItemView實例進(jìn)行操作；

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

從設(shè)計上來講，右鍵菜單中還是不宜引入過重的第三方控件的，如果一些動手能力強且腦洞比較大的同學(xué)想這樣做，前期的技術(shù)調(diào)研一定要充分，只有很好地兼容Spread JS右鍵菜單的組件，才能讓我們愉快地進(jìn)行開發(fā)工作。

購買SpreadJS正版授權(quán)，請點擊“”喲！