dexteryao 发表于 2021-2-1 15:44:58

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

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

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

1. 自定义命令,命令中调用原有插入图表命令
关于自定义命令,已有前文描述,这里不做赘述。自定义命令后,需要讲原有按钮对应命令替换为新的命令
插入图表config位置如下,原始值为"insertChart",这里需要替换为新的命令名称
GC.Spread.Sheets.Designer.DefaultConfig.ribbon.buttonGroups.commandGroup.commands
在新的命令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 = insertChartCommand;
var designer = GC.Spread.Sheets.Designer.findControl('gc-designer-container')
designer.setConfig(config)



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



页: [1]
查看完整版本: SpreadJS在线表格编辑器自定义功能 - 命令(Command)重定义