【spreadjs14.1】如何在代码里设置允许设置单元格格式？

Clark.Pan

如题，我把模板下发给业务收集数据的时候，设置了保护工作表，不允许他们自主增加或删除列。
但是想允许他们设置单元格格式，但是发现只要设置了保护工作表，好多地方都是灰的：
企业微信截图_16359221191079.png980482788.png

但是业务又要求一定需要这些基础功能，有什么办法吗？

Clark.Pan · Clark.Pan

具体demo如下，代码比较简单没几句，但具体逻辑经过比较多的实验，很复杂。大致讲解一下：
上面按钮是否可用的自定义需要修改config文件在里面自定制的。具体如何修改：
第一步，需要拿到对应按钮的command，通过GC.Spread.Sheets.Designer.getCommand(commandName);这个API可以拿到。
第二步，如何获取commandName，这个是一个比较麻烦的操作，首先在页面上可以通过GC.Spread.Sheets.Designer.DefaultConfig拿到配置文件，在其中找到对应Button的commandName。这里建议在浏览器的控制台中操作查看，比较方便。如下面截图所示，找到的"cellType","cellDropdowns"分别对应单元格类型和单元格下拉框两个按钮的commandName。
image.png141786498.png

第三步，按照上述方法找到commandName之后，按照第一步方法拿到整个按钮的command对象可以发现其中会有enableContext属性，该属性就是用来控制按钮是否可以使用的关键属性。从该属性中我们可以看到结果是一个字符串。默认情况下这些字符串都是有含义的，例如 "AllowFormatCells" 这个结果，这个对应的就是我们之前设置的formatCells属性的结果。所以我们需要对我们自定制权限的按钮的enableContext属性进行修改。
第四步，对于创建组和取消组合这两个按钮，您现在想要的逻辑是在表单保护的时候允许创建组和取消组合，那么先通过第三步操作拿一下command看一下目前设置的enableContext属性是什么，发现是"!IsProtected",这个代表的意思就是表单保护的非，就是说表单保护时该值为false，非表单保护时该值为true。所以也就导致了只要表单保护这个按钮就不能点了。所以如果想要表单保护时能够点击，结合之前的权限控制，那么很明显就是这两个按钮需要常亮。那么我们自己设置一个字符串名字叫"alwaysEnable"。然后给这两个command的enableContext设置为"alwaysEnable"。

var group = GC.Spread.Sheets.Designer.getCommand("group");
group.enableContext = "alwaysEnable";
var ungroup = GC.Spread.Sheets.Designer.getCommand("ungroup");
ungroup.enableContext = "alwaysEnable";

复制代码

第五步，接下来需要把这两个新设置的command注册会设计器中通过config.commandMap去设置，像下面这样：

config.commandMap = {
"group":group,
"ungroup":ungroup
}

复制代码

第六步，接下来我们按照上述过程对单元格类型，样式，单元格栏目中的按钮分别做权限设置
image.png793981628.png

这里注意根据问题我们是需要在formatcell为true的基础上去修改，同时还不能破坏之前的逻辑，这就比较复杂。尽可能的利用源生的字符串属性来达到效果。
其实就是将AllowFormatCells的字符串逻辑替换成!IsProtected，但是为了保证除了formatcells以外其余的原始权限判断不遭到破坏，当我们遇到类似这样的
"AllowFormatCells && !PivotTableSelected";多重逻辑判断时，我们只需要更改掉AllowFormatCells相关的即可。这样其他原始的判断逻辑也不会遭到破坏。
第七步，在第六步的过程中我发现有一些按钮本身作为外层按钮本身是没有enableContext属性的。例如：cellsInsert，cel**elete，cellsFormat
这不代表他不具备这样的能力，而是他是常亮的。但是根据你的业务逻辑，这些按钮也需要根据权限做适当的灰掉处理。这个时候需要先修改其中字按钮的enableContext，父按钮的enableContext相当于所有字按钮enableContext的或。于是有了最终demo中的修改结果：

var cellsInsert = GC.Spread.Sheets.Designer.getCommand("cellsInsert");
cellsInsert.enableContext = "!IsProtected || AllowInsertCell || AllowInsertRows || AllowInsertColumns";
var cel**elete = GC.Spread.Sheets.Designer.getCommand("cel**elete");
cel**elete.enableContext = "!IsProtected || IsFullColumn || AllowDeleteRows || AllowDeleteColumns";
var cellsFormat = GC.Spread.Sheets.Designer.getCommand("cellsFormat");
cellsFormat.enableContext = "!IsProtected || AllowFormatRows || AllowResizeRows || AllowFormatColumns || AllowResizeColumns || AllowOutlineRows || AllowOutlineColumns || ";

复制代码

第八步，将修改后的command在注册回去。结合第五步的结果形成如下的代码：

config.commandMap = {
"group":group,
"ungroup":ungroup,
"cellType":cellType,
"cellDropdowns":cellDropdowns,
"conditionFormat":conditionFormat,
"formatTable2":formatTable2,
"cellStyles":cellStyles,
"cellStates":cellStates,
"cellsInsert":cellsInsert,
"insertSheet":insertSheet,
"cel**elete":cel**elete,
"deleteSheet":deleteSheet,
"headers":headers
}

复制代码

第九步，将config交给designer进行初始化

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

复制代码

第十步，对于之前第四步中生成的"alwaysEnable"字符串，我们需要初始化之后让他常亮，所以通过setData将其设置为true。

designer.setData("alwaysEnable",true);

复制代码

Clark.Pan · Clark.Pan

在工作表保护的时候设置允许修改单元格格式
UI操作：
image.png505060424.png

Clark.Pan · Clark.Pan

代码操作就是在sheet.options.protectionOptions中设置formatCells属性为true
image.png600622253.png

肥夏米 · 肥夏米

Clark.Pan 发表于 2021-11-3 16:57
代码操作就是在sheet.options.protectionOptions中设置formatCells属性为true

万分感谢，试过可以了。还有一个问题，这个分组的功能要怎么才可以用呢？我现在保护工作表的时候，及时把所有的option都配成true, 这里还是灰色的
企业微信截图_16359414158111.png545031432.png

肥夏米 · 肥夏米

Clark.Pan 发表于 2021-11-3 16:57
代码操作就是在sheet.options.protectionOptions中设置formatCells属性为true

还有一个问题，就是现在我把sheet.options.protectionOptions中formatCells属性设置为true之后，
image.png482642821.png

这两个颜色框出来的部分都是可编辑状态了，有什么配置可以只允许编辑红框的属性，篮框不能编辑么？
因为红框的编辑不会影响整体布局（只是字体颜色变化），而蓝框部分甚至还能删除工作表，能改变样式，这个权限有点过大了

Clark.Pan · Clark.Pan

这个正常方法是行不通的，因为Excel中表单保护后是禁止做这样操作的，只能寄希望于SpreadJS在线表格编辑器中的定制功能来控制上述按钮是否灰掉的操作。这块我花点时间写个demo给您，写好之后我会上传到这里

肥夏米 · 肥夏米

还有这块区域，设置可编辑单元格格式之后，还是灰的，这个也是没有属性可配置，需要另外开发的是吗？

Clark.Pan · Clark.Pan

是的，都是需要结合在线表格编辑器的定制化功能进行进行控制的

肥夏米 · 肥夏米

Clark.Pan 发表于 2021-11-4 11:03
是的，都是需要结合在线表格编辑器的定制化功能进行进行控制的

好的，那先等你的demo哈，麻烦了

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

[已处理] 【spreadjs14.1】如何在代码里设置允许设置单元格格式？

最佳答案

13 个回复

浏览过的版块

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄