[组件化编辑器自定制]-修改表单保护下工具栏按钮和右键菜单项禁用状态

收藏 · 2021-12-29 16:33 上传

本帖最后由 Lynn.Dou 于 2022-9-30 11:43 编辑

背景：
在设置表单保护之后，工具栏发生了变化，一些按钮变成了灰色-禁用状态。
image.png905435180.png

实际上除了工具栏，右键菜单也是如此：
image.png256049803.png

这一点也是与Excel保持一致的。
设置表单保护后就表示不希望用户再对此表单做出一些修改性的行为，
所以将工具栏和右键菜单的一些按钮禁用，最大限度的保证用户无法做出修改性行为。
但实际业务中，会有一些需求希望能放开工具栏按钮可供使用。

如下图，可以通过UI操作勾选操作项来实现。
image.png962325134.png

如果不想通过UI操作，并且希望只开放部分工具栏按钮呢？
例如，需求为：
表单保护下工具栏背景色、文本颜色按钮可用。
表单保护下右键菜单项剪切项可用。
本篇文章就来带领大家学习如何实现。

步骤：
1、找到工具栏某按钮的commandName （ "backColor" "foreColor"），请参考下图：

var config = GC.Spread.Sheets.Designer.DefaultConfig
config.ribbon[0].buttonGroups[2]

复制代码

2、修改相应command的enableContext值，并进行注册

GC.Spread.Sheets.Designer.getCommand("backColor").enableContext = "test1";
GC.Spread.Sheets.Designer.getCommand("foreColor").enableContext = "test2";
GC.Spread.Sheets.Designer.getCommand("contextMenuCut").enableContext = "test3";
var newFun1 = GC.Spread.Sheets.Designer.getCommand("backColor");
var newFun2 = GC.Spread.Sheets.Designer.getCommand("foreColor");
var newFun3 = GC.Spread.Sheets.Designer.getCommand("contextMenuCut");
config.commandMap = {
"backColor": newFun1,
"foreColor": newFun2,
"contextMenuCut": newFun3,
};

复制代码

3、初始化designer后，使用setData方法设置该修改值。

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
designer.setData("test1",true);
designer.setData("test2",true);
designer.setData("test3", true);
designer.refresh();

复制代码

最终结果如下图：

完整代码请参考附件demo。

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

[组件化编辑器自定制]-修改表单保护下工具栏按钮和右键菜单项禁用状态

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人