SpreadJS 自定义右键菜单-在选择行下面插入行

收藏 · 2020-11-27 18:12 上传

本帖最后由 Lynn.Dou 于 2022-6-30 14:19 编辑

使用SpreadJS产品的小伙伴可能会注意到，sheet插入行时会在选中行的上面新增一行，这个行为也是与Excel保持一致的。
不过对于一些行业的小伙伴来说，在下方插入行更满足他们的需求。SpreadJS虽然没有直接提供在下方插入行的API，不过可以通过重写右键菜单插入行选项来实现这个需求。
接下来我们结合附件的demo来带领大家共同来实现这个功能。

1、自定义右键菜单大家可以参考这两篇技术博客，这里就不重复介绍了。
https://www.grapecity.com.cn/blo ... ht-click-menu-part1
https://www.grapecity.com.cn/blo ... ht-click-menu-part2

2、首先来定义向下插入行的命令，在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;
}
}
};

复制代码

3、注册该命令

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

复制代码

4、替换原有的插入命令

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;