在线表格编辑器实现批量插入功能

收藏

需求：

1.在线表格编辑器中实现批量插入功能（批量插入10行，50行，100行）
2.插入后支持复制之前的样式及公式。
3.插入的操作支持撤销和重做。

实现：

实现批量插入功能：
首先需要对右键菜单做自定制：
我们先做一个批量插入的菜单组：

config.commandMap.batchInsertRowContextMenu = {
text: '批量插入',
commandName: "batchInsertRowContextMenu",
visibleContext: "ClickRowHeader",
subCommands: [
"batchInsertRows10",
"batchInsertRows50",
"batchInsertRows100"
]
};

复制代码

该菜单组包含三个菜单，分别为插入10行，50行和100行。
下面构建每个菜单的command：

config.commandMap.batchInsertRows10 = {
text: '插入 10 行',
commandName: "batchInsertRows10",
execute: async (context, propertyName, fontItalicChecked) => {
}
};
config.commandMap.batchInsertRows50 = {
text: '插入 50 行',
commandName: "batchInsertRows50",
execute: async (context, propertyName, fontItalicChecked) => {
}
};
config.commandMap.batchInsertRows100 = {
text: '插入 100 行',
commandName: "batchInsertRows100",
execute: async (context, propertyName, fontItalicChecked) => {
}
};

复制代码

这里面的execute为菜单点击之后的执行逻辑，留到与后续需求一起完成。
以上就构建好了菜单的雏形，效果如下：
image.png458231200.png

2.插入后支持复制之前的样式及公式。
SpreadJS只提供了插入功能，但是用户习惯像Excel一样，插入之后复制上一行的样式及公式。这个时候就需要对已有的插入进行改造。
又由于插入的操作需要支持撤销和重做，所以需要封装命令来完成：
创建一个命令，在命令中进行插入，并且通过clipboardPaste命令进行复制（该命令在批量复制操作的情况下性能优于copyto）

config.commandMap["gc.spread.contextMenu.insertRows"] = {
commandName: "myInsertRows",
enableContext: "AllowInsertRows && selectFullRows",
text: "插入",
visibleContext: "ClickRowHeader && !AllowInsertCopiedCutCells",
execute: async (context, propertyName) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:1});
}
};

复制代码

var commandManager = spread.commandManager();
var insertRowAndCopyContent = {
canUndo: true,
execute: function (context, options, isUndo) {
var Commands = GC.Spread.Sheets.Commands;
options.cmd = "insertRowAndCopyContent";
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
context.suspendPaint();
context.suspendEvent();
var sheet = context.getSheetFromName(options.sheetName);
var selections = sheet.getSelections();
for(var i = 0; i < selections.length; i++){
var row = selections[i].row;
sheet.addRows(row,options.rowCount);
var fromRange = [new GC.Spread.Sheets.Range(row + options.rowCount, 0, 1, sheet.getColumnCount())];
var toRanges = [new GC.Spread.Sheets.Range(row, 0, options.rowCount, sheet.getColumnCount())];
spread.commandManager().execute({cmd: "clipboardPaste", sheetName: options.sheetName, fromSheet: sheet, fromRanges: fromRange, pastedRanges: toRanges, isCutting: false, clipboardText: "", pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formulasAndFormatting});
}
context.resumeEvent();
context.resumePaint();
Commands.endTransaction(context, options);
return true;
}
}
};
var commandManager = spread.commandManager();
commandManager.register("insertRowAndCopyContent", insertRowAndCopyContent);

复制代码

这里将rowCount参数提了出来，为了方便批量插入能够公用。同理批量插入的execute也是调用上述的命令指示传入的rowCount参数不同。例如插入10行：

config.commandMap.batchInsertRows10 = {
text: '插入 10 行',
commandName: "batchInsertRows10",
execute: async (context, propertyName, fontItalicChecked) => {
var commandManager = context.Spread.commandManager();
commandManager.execute({cmd: "insertRowAndCopyContent", sheetName: context.Spread.getActiveSheet().name(),rowCount:10});
}
};

复制代码

完整demo见附件：

		自动登录	找回密码
密码			立即注册

在线表格编辑器实现批量插入功能

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄