SpreadJS 中重定义右键插入功能

前言 | 问题背景

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来禁止。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、数据填报、类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

如下资源列表，可以为您评估产品提供帮助：