自定义命令指南

问题：如何使用SpreadJS的内置命令（Command）以及自定义命令

背景：

SpreadJS 本身内置提供了一个很强大的功能，那就是命令（Command）。命令实际上就是把前端用户的操作封装成接口，让技术人员在代码中也可以完美模拟终端用户来执行一些操作。同时命令还支持事务，包括多步骤的撤销、重做等。在一些情况下，我们还需要调用命令来触发一些事件。

示例

下面用一段简单的代码来演示命令调用的方法：

// 获取ID为”ss”的div上初始化的Workbook实例
var spread = GC.Spread.Sheets.findControl("ss");
// 获取该实例的CommandManager实例
var commandManager = spread.commandManager();
// 设置当前Workbook允许撤销命令
spread.options.allowUndo = true;
// 定义操作的列集合
var columns = [ { col: 3 } ];
// 命令调用：
commandManager().execute({cmd: "autoFitColumn", sheetName: "Sheet1", columns: columns, isRowHeader: false, autoFitType: GC.Spread.Sheets.AutoFitType.cell});

以上代码示例实现了为Workbook的Sheet1表，表单第3列实现自适应列宽（autoFitColumn）的操作。其中execute方法的参数含义如下：

cmd : 命令名称，表示此次执行的命令；（必需）

sheetName: 表格名称，也就是Worksheet名称，表示此命令作用的具体表格；（必需）

columns: 列集合，表示命令作用的列；

isRowHeader: 是否行头；

autoFitType: 自适应的类型，参考API。

填充"当前时间”示例

1、一些初始设置（包括HTML和JS代码）

<div class="sample-turtorial">
    <button id="btn1">执行</button>
    <button id="btn2">回滚</button>
    <button id="btn3">重新执行</button>
    <div id="ss" style="width:70%; height:400px;border: 1px solid gray;"></div>
</div>

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
// 挂起表格绘制
sheet.suspendPaint();
// 锁定表格
sheet.options.isProtected = true;
// 设置默认列宽
sheet.defaults.colWidth = 150;
// 设置单元格默认样式为解锁状态
var ds = sheet.getDefaultStyle();
ds.locked = false;
sheet.setDefaultStyle(ds);
// 设置锁定行、列
sheet.getRange(-1, 1).backColor("red").locked(true);
sheet.getRange(1, -1).backColor("red").locked(true);
// 设置单元格格式为日期格式
sheet.setFormatter(-1, -1, "yyyy年m月d日");
// 恢复表格绘制
sheet.resumePaint();

2、设置允许Undo命令

// 设置允许撤销操作
spread.options.allowUndo = true;

3、注册自定义命令fillNow

// 注册命令的调用方法
/*
* 其中第一个参数fillNow是命令的名称
* 第二个参数
* */
spread.commandManager().register("fillNow",
{
    canUndo: true,
    execute: function (context, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        // 在此加cmd名称
        options.cmd = "fillNow";
        if (isUndo) {
            // isUndo 为true时，调用undoTransaction
            Commands.undoTransaction(context, options);
            return true;
        } else {
            // 开始事务
            Commands.startTransaction(context, options);
            var sheet = spread.getActiveSheet();
            var ranges = sheet.getSelections();
            if (ranges.length > 0) {
                var range = ranges[0];
                var cell = sheet.getCell(range.row, range.col);
                if (!cell.locked()) {
                    sheet.setValue(range.row, range.col, new Date());
                }
            }
            // 结束事务
            Commands.endTransaction(context, options);
            return true;
        }
}
});

4、为自定义命令注册快捷键Ctrl + ; (分号)

// 设置快捷键：Ctrl + ;
// 参数含义：commandName, key, isCtrl, isShift, isAlt, isMeta
spread.commandManager().setShortcutKey(
        "fillNow", 186, true, false, false, false
);

5、注册按钮事件（执行命令）

$("#btn1").click(function () {
    var sheet = spread.getActiveSheet();
    // 调用命令执行
    spread.commandManager().execute({
        cmd: "fillNow",
        sheetName: sheet.name()
    });
});

6、注册按钮事件（撤销命令）

$("#btn2").click(function () {
    // 调用代码撤销
    var undoManager = spread.undoManager();
    undoManager.undo();
});

7、注册按钮事件（回滚命令）

$("#btn3").click(function () {
    // 重做
    var undoManager = spread.undoManager();
    undoManager.redo();
});

完整demo:填充当前日期.html

作者: Grapecity.China | 审核：Ellia.Duan | 更新时间：2023.12.13

自定义命令指南

问题：如何使用SpreadJS的内置命令（Command）以及自定义命令

背景：

示例

相关API

填充"当前时间”示例