SpreadJS是一个JavaScript的电子表格和网格功能控件，基于HTML5和jQuery技术，通过画布呈现在客户端。SpreadJS使用Canvas绘制表格，默认情况下没有右键菜单，本文主要介绍如何使用JavaScript创建一个右键菜单。

1.添加一个spreadContextMenu菜单

<body>
    <div id="ss" style="width: 500px; height: 300px; border: 1px solid gray">
    </div>
    <ul id="spreadContextMenu" class="dropdown-menu" role="menu" style="display: none">
        <li><a class="localize" data-action="cut">剪切</a></li>
        <li><a class="localize" data-action="copy">复制</a></li>
        <li><a class="localize" data-action="paste">粘贴</a></li>
        <li class="context-header divider"></li>
        <li class="context-header"><a class="localize" data-action="insert">插入</a></li>
        <li class="context-header"><a class="localize" data-action="delete">删除</a></li>
        <li class="context-cell divider"></li>
        <li class="context-cell context-merge"><a class="localize" data-action="merge">合并</a></li>
        <li class="context-cell context-unmerge"><a class="localize" data-action="unmerge">取消合并</a></li>
    </ul>
</body>

2.右键单击的事件

//右键点击触发
        function processSpreadContextMenu(e)
        {
            // move the context menu to the position of the mouse point
            var sheet = spread.getActiveSheet(),
                target = getHitTest(e.pageX, e.pageY, sheet),
                hitTestType = target.hitTestType,
                row = target.row,
                col = target.col,
                selections = sheet.getSelections();
            var isHideContextMenu = false;
            if (hitTestType === GcSpread.Sheets.SheetArea.colHeader)
            {
                if (getCellInSelections(selections, row, col) === null)
                {
                    sheet.setSelection(-1, col, sheet.getRowCount(), 1);
                }
                if (row !== undefined && col !== undefined)
                {
                    $(".context-header").show();
                    $(".context-cell").hide();
                }
            } else if (hitTestType === GcSpread.Sheets.SheetArea.rowHeader)
            {
                if (getCellInSelections(selections, row, col) === null)
                {
                    sheet.setSelection(row, -1, 1, sheet.getColumnCount());
                }
                if (row !== undefined && col !== undefined)
                {
                    $(".context-header").show();
                    $(".context-cell").hide();
                }
            } else if (hitTestType === GcSpread.Sheets.SheetArea.viewport)
            {
                if (getCellInSelections(selections, row, col) === null)
                {
                    sheet.clearSelection();
                    sheet.endEdit();
                    sheet.setActiveCell(row, col);
                    updateMergeButtonsState();
                }
                if (row !== undefined && col !== undefined)
                {
                    $(".context-header").hide();
                    $(".context-cell").hide();
                    showMergeContextMenu();
                } else
                {
                    isHideContextMenu = true;
                }
            } else if (hitTestType === GcSpread.Sheets.SheetArea.corner)
            {
                sheet.setSelection(-1, -1, sheet.getRowCount(), sheet.getColumnCount());
                if (row !== undefined && col !== undefined)
                {
                    $(".context-header").hide();
                    $(".context-cell").show();
                }
            }
            var $contextMenu = $("#spreadContextMenu");
            $contextMenu.data("sheetArea", hitTestType);
            if (isHideContextMenu)
            {
                hideSpreadContextMenu();
            } else
            {
                $contextMenu.css({ left: e.pageX, top: e.pageY });
                $contextMenu.show();
                $(document).on("click.contextmenu", function ()
                {
                    if ($(event.target).parents("#spreadContextMenu").length === 0)
                    {
                        hideSpreadContextMenu();
                    }
                });
            }
        }

3.给菜单处理方法

        //右键菜单点击触发
        function processContextMenuClicked()
        {
            var action = $(this).data("action");
            var sheet = spread.getActiveSheet();
            var sheetArea = $("#spreadContextMenu").data("sheetArea");
            hideSpreadContextMenu();
            switch (action)
            {
                case "cut":
                    GcSpread.Sheets.SpreadActions.cut.call(sheet);
                    break;
                case "copy":
                    GcSpread.Sheets.SpreadActions.copy.call(sheet);
                    break;
                case "paste":
                    GcSpread.Sheets.SpreadActions.paste.call(sheet);
                    break;
                case "insert":
                    if (sheetArea === GcSpread.Sheets.SheetArea.colHeader)
                    {
                        sheet.addColumns(sheet.getActiveColumnIndex(), 1);
                    } else if (sheetArea === GcSpread.Sheets.SheetArea.rowHeader)
                    {
                        sheet.addRows(sheet.getActiveRowIndex(), 1);
                    }
                    break;
                case "delete":
                    if (sheetArea === GcSpread.Sheets.SheetArea.colHeader)
                    {
                        sheet.deleteColumns(sheet.getActiveColumnIndex(), 1);
                    } else if (sheetArea === GcSpread.Sheets.SheetArea.rowHeader)
                    {
                        sheet.deleteRows(sheet.getActiveRowIndex(), 1);
                    }
                    break;
                case "merge":
                    var sel = sheet.getSelections();
                    if (sel.length > 0)
                    {
                        sel = sel[sel.length - 1];
                        sheet.addSpan(sel.row, sel.col, sel.rowCount, sel.colCount, GcSpread.Sheets.SheetArea.viewport);
                    }
                    updateMergeButtonsState();
                    break;
                case "unmerge":
                    var sels = sheet.getSelections();
                    for (var i = 0; i < sels.length; i++)
                    {
                        var sel = getActualCellRange(sels[i], sheet.getRowCount(), sheet.getColumnCount());
                        for (var r = 0; r < sel.rowCount; r++)
                        {
                            for (var c = 0; c < sel.colCount; c++)
                            {
                                var span = sheet.getSpan(r + sel.row, c + sel.col, GcSpread.Sheets.SheetArea.viewport);
                                if (span)
                                {
                                    sheet.removeSpan(span.row, span.col, GcSpread.Sheets.SheetArea.viewport);
                                }
                            }
                        }
                    }
                    updateMergeButtonsState();
                    break;
                default:
                    break;
            }
        }

4.将事件初始化

        $(document).ready(function ()
        {
            spread = new GcSpread.Sheets.Spread($("#ss").get(0), {
                sheetCount: 3
            });
            $("#ss").bind("contextmenu", processSpreadContextMenu);
            $("#spreadContextMenu a").click(processContextMenuClicked);
            $(document).on("contextmenu", function ()
            {
                event.preventDefault();
                return false;
            });
        });