上下文菜单

上下文菜单是单级或多级弹出菜单，当用户通过右键单击鼠标操作与表单进行交互时，它会提供一组选项（称为菜单项）。

SpreadJS支持内置上下文菜单和自定义内置上下文菜单。

当用户触发表单上的鼠标右键事件时，将显示上下文菜单。 这为用户提供了快速执行表单中某些重要操作或重复操作的灵活性。 菜单项根据表单中单击的区域显示。 您可以添加和删除自定义菜单项，并自定义上下文菜单的结构。

下面图片显示了内置的上下文菜单。

SpreadJS还支持自定义内置上下文菜单。 您可以重写定义的上下文菜单样式类以应用不同的样式。 您还可以根据自己的喜好添加或删除自定义菜单选项。 单级上下文菜单和多级上下文菜单均受支持。 但是，生成的响应基于菜单视图以及菜单内容，具体取决于鼠标单击的区域。

上下文菜单为用户提供以下功能：

• 上下文菜单的主题类似于Spread主题。
• 用户可以变更筛选上下文菜单数据结果。
• 用户可以修改菜单视图的外观及其结构。

allowContextMenu 属性为用户提供了控制是否显示内置上下文菜单的选项。 默认情况下，此选项设置为true，并且每次在表单上单击鼠标右键都会看到一个上下文菜单。 如果您不想显示上下文菜单，可以通过将此选项设置为false来禁用它。

示例代码

第一个示例代码显示了如何使用 allowContextmenu 选项禁用上下文菜单。

第二个示例代码显示如何使用 createMenuItemElement 函数自定义菜单项的视图和结构。

第三个示例代码显示了如何在上下文菜单中添加/删除自定义菜单选项。 每个选项都遵循JSON模式中已定义的菜单数据。

// 如果您不想使用上下文菜单，请关闭上下文菜单选项
var spread = $('#ss').data('workbook');
spread.options.allowContextMenu = false;

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
function CustomMenuView() {}
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
    // 您可以在此处调用super的createMenuItemElement，并且仅自定义一些菜单项
    // 应该返回菜单项视图
};
spread.contextMenu.menuView = new CustomMenuView();

//定义菜单数据
var openDialog = {
    text: 'Open Dialog',
    name: 'openDialog',
    command: showLoginDialog,
    workArea: 'viewport'
};
spread.contextMenu.menuData.push(openDialog);
function showLoginDialog() {
    //任意操作
}
// 添加/删除自定义菜单选项
$.each(spread.contextMenu.menuData, function (p, v) {
    if (v.name === 'openDialog') { //openDialog is a command's name
        spread.contextMenu.menuData.splice(p, 1)
    }
});