前端共学会：学习|成长|工作|职业，综合服务社区

download：https://www.zxit666.com/6459/

先来看看SpreadJS是什么？

SpreadJS是一款类Excel的前端表格控件，操作及功用与Excel高度相似，但又完整脱离对Office的依赖。将SpreadJS集成到前端项目并部署发布后，用户只需求在PC上装置了满足H5规范的阅读器（Chrome、Firefox、Edge等），即可在阅读器端翻开SpreadJS。

假如想愈加深化的理解SpreadJS，能够翻开官方在线体验地址及学习指南停止学习，接下来我们来引见分权限编辑的详细完成计划。

为什么会想到运用SpreadJS呢？

之所以选择SpreadJS来做权限编辑的底层表格组件，主要是受业务人员启示。在Excel中，有一种机制叫做表单维护。表单维护是分离单元格锁定状态和工作表的维护状态，能够用来控制单元格能否能够编辑，这种可编辑控制的最小粒度能够到达单元格级别。

该如何来完成呢？

SpreadJS是一款类Excel的表格控件，具备表单维护的功用。完成编辑控制的中心API主要有单元格锁定。我们将编辑权限控制整体分为三类，分别如下：

（1）整个工作表不可编辑

一个Excel文件我们称为一个工作簿，一个工作簿会包含多个工作表。默许状态下，工作表的锁定状态为true，此时假如想要设置整个工作表不可编辑，只需执行工作表维护相关代码即可。

（经过SpreadJS完成整个工作表不可编辑）

经过上图中红框所示的代码，Sheet1中一切单元格就不能再编辑了。假如设置完之后，发现单元格还是能够编辑，可能是由于原来的excel文件中默许单元格的锁定状态被修正成false了，此时能够用代码或右键设置单元格格式→维护来查看单元格的锁定状态。

假如需求整个工作簿都不可编辑，只需求循环去设置工作簿中每个工作表的维护状态即可。

（2）完成局部单元格能够编辑

之前讲到，不可编辑的准绳是单元格锁定&表单维护同时生效。只需目的可以编辑的单元格不满足这个与条件，即可停止编辑。表单维护是在工作表上的控制参数，无法对应的单元格，因而想要与条件不成立，只需求将对应单元格的锁定状态设置为false即可。

（经过SpreadJS完成局部单元格能够编辑）

经过上图中黄色区域的代码即可完成设置A1:C6单元格能够编辑，其它单元格不能编辑的需求，这里文件默许单元格锁定状态为true，假如不生效，则需求检查其它单元格的锁定状态能否被修正为false，假如是的话，需求将其它单元格的锁定状态变为true。

（3）完成局部单元格不能编辑

默许单元格锁定状态为true，假如需求少量的单元格不能编辑，倡议先将工作表的默许单元格锁定状态改为false，之后设置局部不能编辑的单元格锁定状态为true即可。

（经过SpreadJS完成局部单元格不能编辑）

经过上图红框中的代码，即可完成橙色区域能够编辑，区域区域不能编辑的需求。假如需求设置多个区域能够编辑，能够继续调用区域锁定（locked）相关的API即可，愈加细致的UI完成设置及代码能够参考SpreadJS官方论坛相关教程链接。

简单总结一下

理解完单元格编辑的控制之后，接下来需求做的就是将用户权限与单元格打通，完成基于登录用户权限的编辑控制。SpreadJS为了迎合Web端需求，支持了（Tag）属性，用于记载一些和单元格相关的额外不需求展现的信息，我们就能够将单元格编辑权限的相关信息记载在单元格Tag中。整体完成思绪如下：

（1）预先在单元格Tag中设置和权限相关的信息。本计划中，将能够编辑的用户以字符串的方式写入单元格当中。例如单元格tag为'user1'，则代表当前单元格一级用户能够编辑，假如单元格tag为'user1,user2'则代表当前单元格一级用户与二级用户均可编辑。

（2）遍历查询当前单元格Tag中能否包含用户等级标志信息，若包含，标明当前用户能够编辑此单元格，将单元格对应的锁定状态变为false。