Designer动态显示新增菜单项

我们结合一个具体的案例来介绍下本篇教程

背景：
客户希望粉色区域行头菜单可以显示新增项，其余区域不会显示。

思路：
对于新增菜单项，需要先自定义命令以及菜单结构。

1. let commandManager = spread.commandManager();
   
2.             let specialAddRow = {
   
3.                 canUndo: true,
   
4.                 execute: function (spread, options, isUndo) {
   
5.                     let Commands = GC.Spread.Sheets.Commands;
   
6.                     if (isUndo) {
   
7.                         Commands.undoTransaction(spread, options);
   
8.                         return true;
   
9.                     } else {
   
10.                         Commands.startTransaction(spread, options)
    
11.                         alert("自定义添加行");
    
12.                         Commands.endTransaction(spread, options);
    
13.                         return true;
    
14.                     }
    
15.                 }
    
16.             }
    
17.             commandManager.register("customeAddRow", specialAddRow);

复制代码

1. let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
   
2.             let customeAddRow = {
   
3.                 "text": "自定义添加行",
   
4.                 commandName: "customeAddRow"
   
5.             };
   
6.             // 追加自定义右键菜单
   
7.             config.contextMenu.push("customeAddRow");
   
8.             config.commandMap = {
   
9.                 customeAddRow
   
10.             };
    
11.             designer.setConfig(config);

复制代码

控制自定义右键菜单显示条件：
在customeAddRow中添加visibleContext属性，其中insertRowActive为自定义条件

1. let insertRowActive = "insertRowActive";
   
2. let customeAddRow = {
   
3.                 "text": "自定义添加行",
   
4.                 commandName: "customeAddRow",
   
5.                 // ClickRowHeader && !AllowInsertCopiedCutCells为行头选中条件，insertRowActive为自定义条件
   
6.                 visibleContext: `ClickRowHeader && !AllowInsertCopiedCutCells && ${insertRowActive}`,
   
7.             };
   

复制代码

监听SelectionChanged事件，动态修改insertRowActive值

1. spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
   
2.                 var row = info.sheet.getActiveRowIndex();
   
3.                 if (info.sheet.getStyle(row, -1)) {
   
4.                     designer.setData(insertRowActive, true);
   
5.                 } else {
   
6.                     designer.setData(insertRowActive, false);
   
7.                 }
   
8.                 designer.refresh();
   
9.             })

复制代码

来看看测试结果：

完整代码请参考附件demo。