Spread JS V11开始已有了原生右键菜单,右键菜单中的项可以灵活的自定义(参考扩展上下文菜单)。当现有的菜单不满足我们需求时候,我们可以通过自定义Command的方式拓展功能。

在Excel中我们常用的一个操作是插入行,并希望在插入行后自动复制上一行的样式,合并单元格,那么以这个需求为例,讲解如何重定义现有插入菜单

  1. 定义插入复制样式insertRowsCopyStyle命令。

    Command中使用Transaction实现Undo和Redo,exectue时先调用原有“gc.spread.contextMenu.insertRows”命令插入行,然后复制插入行前样式。

    var insertRowsCopyStyle = {
        canUndo: true,
        name: "insertRowsCopyStyle",
        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);
                sheet.suspendPaint();
                options.cmd = "gc.spread.contextMenu.insertRows"
                context.commandManager().execute(options);
                options.cmd = "insertRowsCopyStyle";
    
                var beforeRowCount = 0;
                if (options.selections && options.selections.length) {
                    var selections = getSortedRowSelections(options.selections)
                    for (var i = 0; i < selections.length; i++) {
                        var selection = selections[i];
                        if (selection.row > 0) {
                            for (var row = selection.row + beforeRowCount; row < selection.row + beforeRowCount + selection.rowCount; row++) {
                                sheet.copyTo(selection.row + beforeRowCount - 1, -1, row, -1, 1, -1, GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.span);
                            }
                        }
                        beforeRowCount += selection.rowCount;
                    }
                }
                sheet.resumePaint();
    
                Commands.endTransaction(context, options);
                return true;
            }
        }
    };
    

    getSortedRowSelections为对selections按照row Index排序的方法。

    function getSortedRowSelections(selections) {
        var sortedRanges = selections;
        for (var i = 0; i < sortedRanges.length - 1; i++) {
            for (var j = i + 1; j < sortedRanges.length; j++) {
                if (sortedRanges[i].row > sortedRanges[j].row) {
                    var temp = sortedRanges[i];
                    sortedRanges[i] = sortedRanges[j];
                    sortedRanges[j] = temp;
                }
            }
        }
        return sortedRanges;
    }
    
  2. 注册insertRowsCopyStyle命令

    spread.commandManager().register("insertRowsCopyStyle", insertRowsCopyStyle);
    
  3. 替换原有插入命令

    function MyContextMenu() {}
        MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
        MyContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
            itemsDataForShown.forEach(function (item, index) {
                if (item && item.name === "gc.spread.insertRows") {
                    item.command = "insertRowsCopyStyle"
                }
            });
    
        };
        var contextMenu = new MyContextMenu();
        spread.contextMenu = contextMenu;
    

在onOpenMenu 方法中,可以拿到当前点击区域可操作的所有右键菜单内容,对itemsDataForShown进行修改,可以更改最终呈现出来右键菜单的内容。比如删除某一项,或者设置disable=true来禁止。

在线测试地址:https://runjs.cn/detail/yebbozwj


SpreadJS | 下载试用

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

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