CellButtons 注册命令

问题：CellButtons如何注册命令

1、首先我们先简单学习下 cellButtons

单元格按钮 cellButtons 是一组多个预定义按钮，可以嵌入到单元各中并可以运行各种命令。

示例代码：

let style = new GC.Spread.Sheets.Style();
style.cellButtons= [{
        imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
        command: "openColorPicker",
    },
    {
        imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
        command: (sheet, row, col, option) => {
            //do something
        },
    }
];
sheet.setStyle(0, 0, style);
sheet.setValue(0, 0, "Text");

ButtonImageType 指定了单元格按钮的类型，SpreadJS 提供了多个选项，您可以根据需要自行选择。

command 为命令选项，开发人员可以为用户单击按钮时执行的特定行为编写代码。

2、cellButtons 如何注册命令

除了上述示例代码所示，我们还可以在命令管理器中注册该命令进行管理。

先来定义 cellButtons 点击触发的命令：

var command = {
    canUndo: true,
    execute: function (context, options, isUndo) {
        alert('触发');
    }
}

向命令管理器注册command，定义命令名称为 alertSth

var commandManager = spread.commandManager();
commandManager.register("alertSth", command);

创建一个style，并设置 cellButtons 及 cellButtons 执行 alertSth 命令。

style.cellButtons = [
    {   
        imageType: GC.Spread.Sheets.ButtonImageType.ellipsis,
        command: "alertSth"
    }
];

最后在单元格设置style：

sheet.setStyle(0, 0, style);

效果如下图所示：

3、我们将spread导出为ssjson文件，并导入到spread2中，会发现点击单元格按钮，无法弹出弹窗。

这是因为我们在spread2中没有注册 alertSth 命令，只需重新注册即可。

var command = {
    canUndo: true,
    execute: function (context, options, isUndo) {
        alert('触发');
    }
}
var commandManager = spread.commandManager();
commandManager.register("alertSth", command);

完整Demo如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.1.4.css"
        rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script type="text/javascript"
        src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.1.4.min.js"></script>
    <script type="text/javascript"
        src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.16.1.4.min.js"></script>
</head>

<body>
    <div id="ss" style="width: 98vw; height: 95vh;"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            let sheet = spread.getActiveSheet();

            let command = {
                canUndo: true,
                execute: function (context, options, isUndo) {
                    alert('触发');
                }
            }
            let commandManager = spread.commandManager();
            commandManager.register("alertSth", command);

            let style = new GC.Spread.Sheets.Style();
            style.cellButtons = [
                {
                    imageType: GC.Spread.Sheets.ButtonImageType.ellipsis,
                    command: "alertSth"
                }
            ];

            sheet.setStyle(0, 0, style);
        });
    </script>
</body>

</html>

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.26