摘要：本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

在表格类填报需求中，根据当前登录用户的不同等级，能填报的区域会有所不同。本文基于前端表格控件SpreadJS，介绍一种实现前端分权限编辑的实现方案。

（SpreadJS在浏览器端的展示效果）

先来看看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。

完整的实现Demo点击此处，跳转了解详细的代码。本文提供的是权限编辑的一种参考实现思路，如果大家有更好的实现方式，欢迎在评论区讨论。

扩展链接：

Spring Boot框架下实现Excel服务端导入导出

项目实战：在线报价采购系统（React +SpreadJS+Echarts）

React + Springboot + Quartz，从0实现Excel报表自动化