SpreadJS在线表格编辑器自定义功能 --禁用ribbon按钮

背景：在使用在线表格编辑器的时候，有用户想要将菜单栏上的部分按钮给禁用掉，但又不想删除这个按钮。最直接的场景就是权限控制上的应用，通过禁用部分按钮，使得权限较低的用户无法点击该部分按钮。

我们以插入图片为例，正常情况下是可以点击的，我们可以通过配置enableContext将其禁用。enableContext是由状态或者状态表达式控制的。


首先，我们还是从最基本的开始，这是一个查找编辑器对应命令最万能的方法。获取编辑器的DefaultConfig，找到“图片”对应的命令。

1. var config = GC.Spread.Sheets.Designer.DefaultConfig;

复制代码

1. config.ribbon[1].buttonGroups[2].commandGroup.commands

复制代码

因为config下面是数组，通过对数组的层层操作（也就是上面的代码），我们可以找找到“图片”的命令名称


接下来就是使用getCommand获取“图片”命令，并对enableContext设置一个自定义的状态，然后赋值给newFun命令。

1. GC.Spread.Sheets.Designer.getCommand("insertPicture").enableContext = "cusData";
   

复制代码

1. var newFun = GC.Spread.Sheets.Designer.getCommand("insertPicture")

复制代码

然后通过对象的形式将其塞入commandMap中，这样，当鼠标点击“图片”按钮时，会优先执行下面的命令。

1. config.commandMap = {
   
2.      "insertPicture":newFun
   
3. }

复制代码

到这里还没完，我们还需将这个config放入我们的designer中

1. var designer = GC.Spread.Sheets.Designer.findControl('gc-designer-container');

复制代码

1. designer.setConfig(config);

复制代码

这样，就能实现禁用按钮的效果


我们前面还提到enableContext是由状态或者状态表达式控制的。通过setData改变"cusData"的值可以实现恢复按钮的点击状态。

1. designer.setData("cusData",true)

复制代码

请问这个帖子发文用的spreadjs在线编辑器版本是多少？

您好， 如下图所示，使用的 在线表格编辑器  V14.0.7

通过配置enableContext设置禁用与否，会有点bug，点击不同单元格，有时候设置会不生效

1. window.onload = function () {
   
2.                         const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
   
3.                         designerConfig.ribbon[0].buttonGroups = [
   
4.                                 {
   
5.                                         label: "test",
   
6.                                         commandGroup: {
   
7.                                                 children: [
   
8.                                                         {
   
9.                                                                 direction: "vertical",
   
10.                                                                 commands: ["myTest"],
    
11.                                                         },
    
12.                                                 ],
    
13.                                         }
    
14.                                 }
    
15.                         ]
    
16.                         designerConfig.commandMap = {
    
17.                                 myTest: {
    
18.                                         text: "myTest",
    
19.                                         bigButton: true,
    
20.                                         commandName: "myTest",
    
21.                                         enableContext: '!cusTest',
    
22.                                         iconClass: 'ribbon-button-barcode'
    
23.                                 }
    
24.                         };
    
25.                         const designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer"), designerConfig);
    
26.                         const spread = designer.getWorkbook();
    
27.                         const sheet = spread.getActiveSheet();
    
28. 
    
29.                         let count = 0;
    
30.                         for(let i = 0; i<6; i++){
    
31.                                 for(let j = 0; j<6; j++){
    
32.                                         count++;
    
33.                                         sheet.getCell(i,j).value(count);
    
34.                                 }
    
35.                         }
    
36.                         spread.bind(GC.Spread.Sheets.Events.SelectionChanged, ()=>{
    
37.                                 const range = sheet.getSelections()[0];
    
38.                                 const val = sheet.getCell(range.row, range.col).value();
    
39.                                 designer.setData('cusTest', val % 2 == 0);
    
40.                         })
    
41.         }

复制代码

豪 发表于 2022-5-22 13:04
通过配置enableContext设置禁用与否，会有点bug，点击不同单元格，有时候设置会不生效

如果用的是14.1的版本，建议使用最新的15.0.7试一下，这边测试是正常的。