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

收藏

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

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

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

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

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

复制代码

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

复制代码

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

接下来就是使用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);

复制代码

这样，就能实现禁用按钮的效果
image.png992749023.png

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

designer.setData("cusData",true)

复制代码

aisinoTax · aisinoTax

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

Lynn.Dou · Lynn.Dou

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

豪 · 豪

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

window.onload = function () {
const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
designerConfig.ribbon[0].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()[0];
const val = sheet.getCell(range.row, range.col).value();
designer.setData('cusTest', val % 2 == 0);
})
}

复制代码

Derrick.Jiao · Derrick.Jiao

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

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

		自动登录	找回密码
密码			立即注册

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

4 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证