SpreadJS中重定义右键插入功能

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

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

标签：JavaScript 表格控件Spread