SpreadJS实现基于权限的编辑控制

收藏 · 2021-10-21 18:15 上传

本帖最后由 Winny 于 2021-11-12 13:10 编辑

在实际项目中，对于同一个模板，不同用户登录之后，能编辑的区域可能并不相同，针对当前权限的用户，需要动态的去控制其无法编辑的区域。本文提供有一种根据用户登记来切换可编辑范围的实现方案。要实现此需求，首先要了解SpreadJS中如何进行单元格保护，具体可以参考SpreadJS设置单元格保护。本文根据权限改变编辑状态的步骤为：
step1: 设置模板单元格标签
image.png610290221.png

右键选中需要根据权限切换编辑状态的单元格，选择标签项，输入对应的标签。这里我将系统用户分为一级用户和二级用户，对应的值都为true。
用于用户不可编辑时，对应的单元格锁定状态需要变为true,因此这里表明，一级用户和二级用户都无法编辑当前单元格。
image.png470799560.png

上方截图表明，二级用户无法编辑当前选中区域。当模板中只有少量单元格用户无法编辑时，其实只需要给这些单元格添加标签即可，对应的标签中输入无法编辑的权限等级。这里其实用数组也可以实现，但是在正式项目中，业务逻辑可能比较复杂，因此用json来表示。

Step2: 设置当前sheet启用保护状态，且所有单元格默认不锁定。

let sheet = spread.getActiveSheet()
let defaultStyle = sheet.getDefaultStyle()
defaultStyle.locked = false
sheet.setDefaultStyle(defaultStyle)
sheet.options.isProtected = true

复制代码

Step3：解析标签内容，根据标签具体内容设置锁定状态。

for (let i = 0; i < sheet.getRowCount(); i++) {
for (let j = 0; j < sheet.getColumnCount(); j++) {
//没有tag信息跳过
if (sheet.getTag(i, j)) {
let info = JSON.parse(sheet.getTag(i, j))
//当前tag是否存在key值为当前用户的数据项
if (info[currentUser]) {
let range = sheet.getRange(i, j, 1, 1)
range.backColor('#9cf')
range.locked(true)
}
}
}
}

复制代码

至此，一个简单的根据权限设置编辑状态的例子就基本完成，需要本地测试时，建议下载附件Demo，因为Demo中还有设置内容时的优化点，并且提供了在用户切换时编辑范围的切换。
image.png71029051.png

如上图所示，用户可以点击红色区域中的下拉框，来模拟权限的切换。
测试文件见附件。

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

SpreadJS实现基于权限的编辑控制

0 个回复