SpreadJS在线表格编辑器自定义功能 - 命令（Command）重定义

收藏

本帖最后由 Derrick.Jiao 于 2021-11-19 13:39 编辑

SpreadJS 组件版设计器提供了灵活的方式添加新的功能行为，那么对于原有的功能如何重新定义行为呢？
以插入图表行为为例介绍两种重新定义方法。
点击插入ribbon中的图表icon，会弹出图表类型选择对话框，如果在弹框之前想加入一个提示，来让用户确认行为，可以通过一下两种方式完成。

1. 自定义命令，命令中调用原有插入图表命令
关于自定义命令，已有前文描述，这里不做赘述。自定义命令后，需要讲原有按钮对应命令替换为新的命令
插入图表config位置如下，原始值为"insertChart"，这里需要替换为新的命令名称
GC.Spread.Sheets.Designer.DefaultConfig.ribbon[1].buttonGroups[1].commandGroup.commands[0]
在新的命令execute中，可以重新调用"insertChart"命令的execute方法弹出dialog

GC.Spread.Sheets.Designer.getCommand("insertChart").execute.call(this, designer)

2. 重写原始命令execute方法
通过js灵活的配置，可以直接重写exectue方法，重新定义行为

let insertChartCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.InsertChart);
if(insertChartCommand){
let oldExecute = insertChartCommand.execute;
insertChartCommand.execute = function(context, propertyName, args){
//添加confirm逻辑
oldExecute.call(this, context, propertyName, args);}}

复制代码

修改完行为后重新注册命令var config = GC.Spread.Sheets.Designer.DefaultConfig
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.InsertChart] = insertChartCommand;
var designer = GC.Spread.Sheets.Designer.findControl('gc-designer-container')
designer.setConfig(config)

方法2使用简单，但是影响了原有逻辑，对于整个项目可能会有影响，方法一需要重新定义config，但是对于全局影响更小。

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

SpreadJS在线表格编辑器自定义功能 - 命令（Command）重定义

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章