菜单选项差异化显示

问题：右键菜单如何在某个工作表中显示特定的菜单项

背景：

在日常的使用中可能会遇到诸如此类，在某一个工作表显示特殊的菜单项，其他工作表不显示的需求

例如：工作表中有两个Sheet，一个用于报表展示，一个用于数据填报。在数据填报的Sheet中需要在右键菜单中定制一些特殊的菜单选项，这些选项只会在Sheet是填报的时候显示出来。

这种差异化菜单显示的需求，可以使用下面的解决方案。

解决方案：

1、创建对应菜单项的命令（command）

右键菜单需要将点击后执行的代码封装成一个命令（command）去执行，这里首先创建对应菜单项执行的命令。


var newMenuItem = {
    canUndo: true,
    name: "newMenuItem",
    execute: function (context, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
            Commands.undoTransaction(context, options);
            return true;
        } else {
            Commands.startTransaction(context, options);
            var sheet = context.getSheetFromName(options.sheetName);
            alert("添加的新右键菜单项");

            Commands.endTransaction(context, options);
            return true;
        }
    }
};

2、注册命令

建立好执行的命令之后需要进行注册，注册到SpreadJS的命令管理器（commandManager）中，这样就能在之后被调用。

spread.commandManager().register("newMenuItem", newMenuItem);

3、在onOpenMenu方法中进行判断

onOpenMenu方法会在弹出右键菜单时被调用，该方法可用于筛选将要弹出的菜单选项。在方法中判断一下当前的工作表是否需要展示特殊菜单项。

function MyContextMenu() { }
MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
MyContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
    var sheetIndex = spread.getActiveSheetIndex()
    // 如果为sheet1,则添加新项
    if (sheetIndex == 0) {
        itemsDataForShown.push({
            text: "新项",
            name: "newItem",
            command: "newMenuItem",
            workArea: "viewportcolHeaderrowHeaderslicercorner"
        });
    }
};
var contextMenu = new MyContextMenu();
spread.contextMenu = contextMenu;

运行效果如下图所示：

完整demo请点击此处

问题：在线表格编辑器部分行选时显示特定右键菜单项

背景：

用户在填写文件时，大部分行列都已经确定，只需要按照提示填写即可。但部分行列，允许添加同级别下的行，做数据扩展。这就要求用户在点击部分行头时，可以正常添加行。

本文会详细讲解该需求的实现方式。

思路：

自定义设计器右键菜单，注册自定义添加行命令，当用户点击行头，且行头索引为2（选中第三行）时，显示自定义添加行菜单项。

而选中其它区域时，右键菜单不会显示自定义菜单项。同时，根据自己的需求，可选择是否需要去掉原有的删除行功能。

实现代码：

let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")
let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))

// 控制自定义右键菜单显示条件
let insertRowActive = "insertRowActive"

let customeAddRow = {
    "text":"自定义添加行",
    commandName:"customeAddRow",
    iconClass:"gc-spread-new",
    className:"customer-css",
    // ClickRowHeader && !AllowInsertCopiedCutCells为行头选中条件，insertRowActive为自定义条件
    visibleContext : `ClickRowHeader && !AllowInsertCopiedCutCells && ${insertRowActive}`,
    execute:(context) => {
        let sheet = context.getWorkbook().getActiveSheet()
        if(sheet.getActiveRowIndex()==2){
            sheet.addRows(3,1)
        }else{
            alert("该区域不支持添加行")
        }
    }
}
// 追加自定义命令
config.contextMenu.push("customeAddRow")
config.commandMap = {
    customeAddRow
}

designer.setConfig(config)

let spread = designer.getWorkbook();
let designerOnOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (menuData, menuDataForShown, hitTest, workbook){
    let designer = GC.Spread.Sheets.Designer.findControl("designer-container");
    let sheet = workbook.getActiveSheet();
    if(sheet.getActiveRowIndex()==2){
        designer.setData(insertRowActive,true);
    }else{
        designer.setData(insertRowActive,false);
    }
    designerOnOpenMenu.apply(this, arguments);

}

let sheet = spread.getActiveSheet()
sheet.getRange(2,-1,2,-1).backColor("pink")

效果如下图：

详细的实现方案参考Demo：设计器自定义右键菜单-局部行显示。

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.09.04