Lynn.Dou 发表于 2020-11-11 09:56:52

SpreadJS cellButtons如何注册命令

本帖最后由 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,大家可以参考下。








前端小菜鸟 发表于 2022-7-27 14:10:06

请问支持11.1 版本么?

Lynn.Dou 发表于 2022-7-27 18:05:24

单元格按钮是自V13开始支持的,V11不支持
页: [1]
查看完整版本: SpreadJS cellButtons如何注册命令