用户在自定义工具栏时,希望将自定义的按钮所执行的操作也可以记录到撤销重做栈中,本文提供了一种自定义命令进入撤销重做记录的实现方式。
1. 将自定义的可重做命令注册到当前Designer的resources中
- let resource = GC.Spread.Sheets.Designer.getResources()
- resource.commandMap["spreadChangeColor"] = "添加背景"
- GC.Spread.Sheets.Designer.setResources(resource)
复制代码 2. 自定义ribbon
- // 添加ribbon tab
- let config = GC.Spread.Sheets.Designer.DefaultConfig
- let customRibbon = {
- id: 'operate',
- // tab名称
- text: '自定义操作',
- buttonGroups: [
- {
- // 子按钮类别名称
- label: '------',
- commandGroup:{
- direction: 'vertical',
- // 子命令
- commands: ['designerChangeColor']
- }
- }
- ],
- }
- // 子按钮定义
- let designerChangeColorCommand = {
- text: "背景色",
- commandName: 'designerChangeColor',
- execute: designerChangeColorFun
- }
- // push新tab
- config.ribbon.push(customRibbon);
- //定义命令映射关系
- config.commandMap = {
- designerChangeColor: designerChangeColorCommand,
- };
-
- let designer = new GC.Spread.Sheets.Designer.Designer('designer_container')
- let spread = designer.getWorkbook()
- function designerChangeColorFun(){
- // 调用spread上可撤销的自定义命令
- let spread = designer.getWorkbook()
- let sheet = spread.getActiveSheet()
- spread.commandManager().execute({cmd: "spreadChangeColor", selections: sheet.getSelections(),sheetName: sheet.name(),row: sheet.getActiveRowIndex(),col: sheet.getActiveColumnIndex()})
- }
复制代码 3. 注册可撤销命令spreadChangeColor
- spread.commandManager().register("spreadChangeColor",{
- // 注册可撤销命令
- canUndo: true,
- execute: function(context,options,isUndo){
- var Commands = GC.Spread.Sheets.Commands;
- if (isUndo) {
- Commands.undoTransaction(spread, options);
- return true;
- } else {
- let sheet = context.getActiveSheet()
- Commands.startTransaction(context, options);
- // let selection =options.selections[0];
- // sheet.getCell(selection.row,selection.col).backColor('#789067')
- sheet.getCell(options.row,options.col).backColor('#789067')
- Commands.endTransaction(context, options);
- return true;
- }
- }
- })
复制代码 详细demo参考附件,若资源不可用,请自行更换html中的资源即可。
|
|