实现向下插入行

问题：SpreadJS如何将插入功能替换为向下插入

背景：

SpreadJS右键菜单插入功能默认逻辑为向上插入一行，这个行为是与Excel保持一致的。

在特定情况下，希望实现在下方插入行的功能。

解决方案：

SpreadJS虽然没有直接提供在下方插入行的API，不过可以通过重写右键菜单插入行选项来实现这个需求。

1、首先来定义向下插入行的命令，在execute 添加我们想执行的方法，在本例就是在选中行下方插入行的方法。

我们已经知道，SpreadJS默认就是在选中行的上一行插入的，所以实现思路就是从选中行的下一行开始插入指定行数。

听着有点绕，参考下方代码就容易理解了。

var insertRowsBelow = {
    canUndo: true,
    name: "insertRowsBelow",
    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();
            console.log(options.selections)
            //向下插入行
            if (options.selections && options.selections.length) {
                var row = options.selections[0].row + 1;
                var rowCount = options.selections[0].rowCount;
                sheet.addRows(row, rowCount);
            }
            sheet.resumePaint();

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

2、注册该命令

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

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 = "insertRowsBelow"
        }
    });

};
var contextMenu = new MyContextMenu();
spread.contextMenu = contextMenu;

现在就实现了向下插入行的需求了，如下图：

完整代码可参考附件demo。

右键菜单-向下插入行.zip

问题：在线表格编辑器如何将插入功能替换为向下插入

背景：

希望在在线表格编辑器中实现向下插入行的功能

解决方案：

在线表格编辑器右键菜单添加新项与SpreadJS有所不同，需要在config的基础上进行修改。

1、定义右键菜单结构

config.commandMap = {
    Welcome: {
        title: "Welcome",
        text: "Welcome",
        iconClass: "ribbon-button-welcome",
        bigButton: "true",
        commandName: "Welcome",
        execute: async (context, propertyName, fontItalicChecked) => {

        }
    },
    myCmd: {
        text: "向下插入行",
        commandName: "myCmd",
        visibleContext: "ClickRowHeader",
        execute: async (context, propertyName, fontItalicChecked) => {
            var spread = context.getWorkbook();
            spread.commandManager().execute({
                cmd: "insertRowsBehind"
            })
        }
    }
}

2、右键菜单添加新项

config.contextMenu.splice(26,0,"myCmd");

3、初始化设计器

var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
var spread = d.getWorkbook();

4、定义和注册insertRowsBehind命令

spread.commandManager().register("insertRowsBehind", {
    canUndo: true,
    execute: function (context, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        // 在此加cmd
        options.cmd = "insertRowsBehind";
        if (isUndo) {
            Commands.undoTransaction(context, options);
            return true;
        } else {
            var sheet = spread.getActiveSheet();
            // 注意：需要在options中定义sheetName，否则撤销行为可能无效。
            options.sheetName = sheet.name();
            Commands.startTransaction(context, options);
            var sels = sheet.getSelections();
            if (sels && sels.length > 0) {
                for (var i = 0; i < sels.length; i++) {
                    var sel = sels[i];
                    var row = sel.row;
                    var rowCount = sel.rowCount;
                    sheet.addRows(row + 1, rowCount);
                }
            }
            Commands.endTransaction(context, options);
            return true;
        }
    }
});

最终效果如下图：

完整代码可以查看下面附件：

自定义右键菜单-向下插入行.html

作者: Lynn.Dou | 审核：Clark.Pan | 更新时间：2023.09.04