SpreadJS cellButtons如何注册命令

收藏 · 2020-11-11 10:03 上传

本帖最后由 lynn512 于 2020-11-11 10:03 编辑

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如何注册命令
除了上述示例代码所示，我们还可以在命令管理器中注册该命令进行管理。以附件demo为例：
先来定义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，大家可以参考下。

前端小菜鸟 · 前端小菜鸟

请问支持11.1 版本么？

Lynn.Dou · Lynn.Dou

单元格按钮是自V13开始支持的，V11不支持

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

SpreadJS cellButtons如何注册命令

2 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人