当前位置：首页 > news >正文

前端技术栈加持：用 SpreadJS 实现分权限管理

news 来源：原创 2025/6/19 12:01:15

引言

在现代前端开发中，数据表格的应用极为广泛，而分权限管理在许多业务场景下是必不可少的功能。例如在表格类填报需求中，不同等级的登录用户能填报的区域有所不同。SpreadJS 作为一款强大的前端表格控件，为实现这样的分权限管理提供了有效的解决方案。本文将详细介绍如何借助前端技术栈，利用 SpreadJS 实现表格的分权限管理。

正文

SpreadJS 简介

SpreadJS 是一款类 Excel 的前端表格控件，它的操作及功能与 Excel 高度类似，但又完全脱离对 Office 的依赖。将 SpreadJS 集成到前端项目并部署发布后，用户只需在 PC 上安装满足 H5 标准的浏览器（如 Chrome、Firefox、Edge 等），即可在浏览器端打开使用，这为前端开发提供了极大的便利 ^^。

选择 SpreadJS 实现分权限管理的原因

选择 SpreadJS 来做权限编辑的底层表格组件，主要是受到 Excel 中表单保护机制的启发。在 Excel 里，结合单元格锁定状态和工作表的保护状态，可以控制单元格是否可以编辑，这种可编辑控制的最小粒度能达到单元格级别。而 SpreadJS 具备类似的表单保护功能，为实现分权限管理提供了基础。

借助 SpreadJS 实现分权限管理的具体方案

编辑权限控制分类

SpreadJS 实现编辑控制的核心 API 主要有单元格锁定及表单保护。编辑权限控制整体可分为以下三类：

整个工作表不可编辑
一个 Excel 文件称为一个工作簿，一个工作簿包含多个工作表。默认状态下，工作表的锁定状态为 true。若要设置整个工作表不可编辑，只需执行工作表保护相关代码。示例代码如下：

let designer = GC.Spread.Sheets.Designer.findControl(document.getElementById('gc-designer-container'));
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
sheet.options.isProtected = true;

执行上述代码后，Sheet1 中所有单元格将不能再编辑。若设置后单元格仍可编辑，可能是原 Excel 文件中默认单元格的锁定状态被修改成 false，此时可通过代码或右键设置单元格格式→保护来查看单元格的锁定状态。若需要整个工作簿都不可编辑，只需循环设置工作簿中每个工作表的保护状态即可。
在这里插入图片描述

部分单元格可以编辑
不可编辑的原则是单元格锁定和表单保护同时生效。若要让部分单元格可编辑，只需将对应单元格的锁定状态设置为 false。示例代码如下：

let sheet = spread.getActiveSheet();
sheet.getRange(0, 0, 6, 3).locked(false);
sheet.options.isProtected = true;

通过上述代码，可实现设置 A1:C6 单元格可以编辑，其他单元格不能编辑的需求。若不生效，需检查其他单元格的锁定状态是否被修改为 false，若是则需将其锁定状态变为 true。
在这里插入图片描述

部分单元格不能编辑
默认单元格锁定状态为 true，若只需少量单元格不能编辑，建议先将工作表的默认单元格锁定状态改为 false，之后设置部分不能编辑的单元格锁定状态为 true。示例代码如下：

let sheet = spread.getActiveSheet();
let defaultStyle = sheet.getDefaultStyle();
defaultStyle.locked = false;
sheet.setDefaultStyle(defaultStyle);
let range = sheet.getRange(0, 0, 5, 5);
range.locked(true);
sheet.options.isProtected = true;

通过上述代码，可实现橙色区域可以编辑，其他区域不能编辑的需求。若需要设置多个区域可以编辑，可继续调用区域锁定（locked）相关的 API。更详细的 UI 实现设置及代码可参考 SpreadJS 官方论坛相关教程链接。

将用户权限与单元格打通

在了解单元格编辑控制后，接下来要将用户权限与单元格打通，实现基于登录用户权限的编辑控制。SpreadJS 支持单元格标签（Tag）属性，可用于记录一些和单元格相关的额外不需要展示的信息，我们可以将单元格编辑权限的相关信息记录在单元格 Tag 中。整体实现思路如下：

预先设置权限信息：将可以编辑的用户以字符串的形式写入单元格的 Tag 中。例如，单元格 tag 为 ‘user1’，代表当前单元格一级用户可以编辑；若单元格 tag 为 ‘user1,user2’，则代表当前单元格一级用户与二级用户均可编辑。
遍历查询权限信息：遍历查询当前单元格 Tag 中是否包含用户等级标记信息，若包含，表明当前用户可以编辑此单元格，将单元格对应的锁定状态变为 false。

结论

借助前端技术栈和 SpreadJS，我们可以有效地实现表格的分权限管理。SpreadJS 的表单保护功能和单元格标签属性为分权限管理提供了强大的支持，通过合理运用这些功能和属性，能够满足不同业务场景下的分权限管理需求。本文提供了权限编辑的一种参考实现思路，开发者可根据实际情况进行调整和优化。同时，随着前端技术的不断发展，SpreadJS 也将在更多的场景中发挥重要作用，为前端开发带来更多的可能性。

SpreadJS