Derrick.Jiao 发表于 2021-2-18 15:15:34

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

本帖最后由 DerrickJiao 于 2021-2-18 15:19 编辑

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

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


首先，我们还是从最基本的开始，这是一个查找编辑器对应命令最万能的方法。获取编辑器的DefaultConfig，找到“图片”对应的命令。
var config = GC.Spread.Sheets.Designer.DefaultConfig;config.ribbon.buttonGroups.commandGroup.commands

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


接下来就是使用getCommand获取“图片”命令，并对enableContext设置一个自定义的状态，然后赋值给newFun命令。
GC.Spread.Sheets.Designer.getCommand("insertPicture").enableContext = "cusData";
var newFun = GC.Spread.Sheets.Designer.getCommand("insertPicture")

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

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

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

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


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


aisinoTax 发表于 2021-3-4 10:00:15

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

Lynn.Dou 发表于 2021-3-4 10:08:02

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

豪 发表于 2022-5-22 13:04:39

通过配置enableContext设置禁用与否，会有点bug，点击不同单元格，有时候设置会不生效
window.onload = function () {
                        const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
                        designerConfig.ribbon.buttonGroups = [
                                {
                                        label: "test",
                                        commandGroup: {
                                                children: [
                                                        {
                                                                direction: "vertical",
                                                                commands: ["myTest"],
                                                        },
                                                ],
                                        }
                                }
                        ]
                        designerConfig.commandMap = {
                                myTest: {
                                        text: "myTest",
                                        bigButton: true,
                                        commandName: "myTest",
                                        enableContext: '!cusTest',
                                        iconClass: 'ribbon-button-barcode'
                                }
                        };
                        const designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer"), designerConfig);
                        const spread = designer.getWorkbook();
                        const sheet = spread.getActiveSheet();

                        let count = 0;
                        for(let i = 0; i<6; i++){
                                for(let j = 0; j<6; j++){
                                        count++;
                                        sheet.getCell(i,j).value(count);
                                }
                        }
                        spread.bind(GC.Spread.Sheets.Events.SelectionChanged, ()=>{
                                const range = sheet.getSelections();
                                const val = sheet.getCell(range.row, range.col).value();
                                designer.setData('cusTest', val % 2 == 0);
                        })
      }

Derrick.Jiao 发表于 2022-5-23 11:08:36

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

如果用的是14.1的版本，建议使用最新的15.0.7试一下，这边测试是正常的。
页: [1]
查看完整版本: SpreadJS在线表格编辑器自定义功能 --禁用ribbon按钮