自定义工具栏-复选框及可用状态切换

需求场景：

    在线表格编辑器添加复选按钮，并控制其可用状态。

实现方法：
    （1）添加复选按钮：designer的config添加需要操作的按钮，声明相关命令并注册。核心代码如下：

1. let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
   
2.     // 新增Tab
   
3.     let customerRibbon = {
   
4.         id: "operate",
   
5.         text: "自定义操作",
   
6.         buttonGroups: [
   
7.             {
   
8.                 label: "自定义行为",
   
9.                 commandGroup: {
   
10.                     children: [
    
11.                         {
    
12.                             direction: "vertical",
    
13.                             commands: ["changeLineVisible"]
    
14.                         }
    
15.                     ]
    
16.                 }
    
17.             }
    
18.         ]
    
19.     }
    
20.     // 定义数据保存点击命令
    
21.     let changeLineVisibleExec = {
    
22.         text: '显示打印分页线',
    
23.         type: "checkbox",
    
24.         enableContext: ISENABLED,
    
25.         commandName: "changeLineVisible",
    
26.         execute: (context) => {
    
27.                 let sheet = context.getWorkbook().getActiveSheet();
    
28.                 var isVisible = sheet.isPrintLineVisible();
    
29.                 sheet.isPrintLineVisible(!isVisible);
    
30.             },
    
31.         getState: (context) => {
    
32.             // getState用于控制复选框的选中状态
    
33.             let sheet = context.getWorkbook().getActiveSheet();   
    
34.             //设置 checkBox 初始状态         
    
35.             return sheet.isPrintLineVisible();   //初始为未选中状态
    
36.         }
    
37.     }

复制代码

上述代码中，getState()可以用于控制复选框是否选中的状态。
（2）控制复选框是否可用
在声明命令时，enableContext用于控制复选框是否可用，之后可以使用designer.setData()设置复选框是否可用。核心代码如下：

1. // 控制复选框是否可用的参数
   
2. const ISENABLED = "isEnabled"
   
3. // 定义数据保存点击命令
   
4.     let changeLineVisibleExec = {
   
5.         text: '显示打印分页线',
   
6.         type: "checkbox",
   
7.         enableContext: ISENABLED,
   
8.         commandName: "changeLineVisible",
   
9.         execute: (context) => {
   
10.                 let sheet = context.getWorkbook().getActiveSheet();
    
11.                 var isVisible = sheet.isPrintLineVisible();
    
12.                 sheet.isPrintLineVisible(!isVisible);
    
13.             },
    
14.         getState: (context) => {
    
15.             // getState用于控制复选框的选中状态
    
16.             let sheet = context.getWorkbook().getActiveSheet();   
    
17.             //设置 checkBox 初始状态         
    
18.             return sheet.isPrintLineVisible();   //初始为未选中状态
    
19.         }
    
20.     }
    
21. // 控制复选是否可用状态
    
22. designer.setData(ISENABLED, true)
    
23. 
    
24. 
    
25. 
    

复制代码

完整的示例demo可点击链接查看。