如何能够高效实现表格中的分权限编辑功能

摘要:本文由葡萄城技术团队于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报表自动化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图论--最短路问题

图论–最短路问题 邻接表 /* e[idx]:存储点的编号 w[idx]:存储边的距离(权重) */ void add(int a, int b, int c) {e[idx] b;ne[idx] h[a];w[idx] ch[a] idx ; }1.拓扑排序 给定一个 n 个点 m 条边的有向图,点的编号是 11 到 n&#xf…

日常整理的一些前端知识点笔记

整理的一些前端知识点 ECMAScript和JavaScript是什么关系 ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现 (另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是…

Delphi 开发不一样的窗体标题栏:TTitleBarPanel

目录 TTitleBarPanel 的使用 TTitleBarPanel 的使用进阶 一、设置标题栏高度、颜色 二、个性化标题栏的关闭等按键 我们在用Delphi开发程序的时候,窗体的标题栏一般都是标准的windows标题栏,上面包括:程序图标、标题、最小化、最大化、关闭…

Linux中error while loading shared libraries错误解决办法

默认情况下,编译器只会使用/lib和/usr/lib这两个目录下的库文件,通常通过源码包进行安装时,如果不指定–prefix,会将库安装在/usr/local/lib目录下 当运行程序需要链接动态库时,提示找不到相关的.so库,会报…

[Python进阶]定制类:属性篇

4.10.2 属性篇 4.10.2.1 getattr、getattribute 通常我们可以通过obj.attr访问某个对象的属性。而__getattr__则是用来处理我们在获取某个不存在的属性时希望的处理。 默认情况下,如果我们获取了一个不存在的属性时,会报错:AttributeError。…

如何做好Code Review:思考、方法和实践 (真实经验总结)

目录 背景 Code Review 目标 系统层面 代码规范 业务逻辑 日志 测试 安全

k8s1.26.6 安装gitlab

Gitlab官方提供了 Helm 的方式在 Kubernetes 集群中来快速安装,但是在使用的过程中发现 Helm 提供的 Chart 包中有很多其他额外的配置,所以我们这里使用自定义的方式来安装,也就是自己来定义一些资源清单文件。 Gitlab主要涉及到3个应用&…

Python爬虫时遇到连接超时解决方案

在进行Python爬虫任务时,经常会遇到连接超时(TimeoutError)错误。连接超时意味着爬虫无法在规定的时间内建立与目标服务器的连接,导致请求失败。为了帮助您解决这个常见的问题,本文将提供一些解决办法,并提…

用合成数据训练托盘检测模型【机器学习】

想象一下,你是一名机器人或机器学习 (ML) 工程师,负责开发一个模型来检测托盘,以便叉车可以操纵它们。 ‌你熟悉传统的深度学习流程,已经整理了手动标注的数据集,并且已经训练了成功的模型。 推荐:用 NSDT设…

【LeetCode】88. 合并两个有序数组

这道题我总共想了三种解法。 1.将nums2中的元素依次放入nums1有效元素的后面&#xff0c;再总体进行排序。 import java.util.*; class Solution {public void merge(int[] nums1, int m, int[] nums2, int n) {int j 0;for(int i m;i<mn;i){nums1[i] nums2[j];j;}Arrays…

搭建网站 --- 快速WordPress个人博客并内网穿透发布到互联网

文章目录 快速WordPress个人博客并内网穿透发布到互联网 快速WordPress个人博客并内网穿透发布到互联网 我们能够通过cpolar完整的搭建起一个属于自己的网站&#xff0c;并且通过cpolar建立的数据隧道&#xff0c;从而让我们存放在本地电脑上的网站&#xff0c;能够为公众互联…

机器学习分布式框架ray运行xgboost实例

Ray是一个开源的分布式计算框架&#xff0c;专门用于构建高性能的机器学习和深度学习应用程序。它的目标是简化分布式计算的复杂性&#xff0c;使得用户能够轻松地将任务并行化并在多台机器上运行&#xff0c;以加速训练和推理的速度。Ray的主要特点包括支持分布式任务执行、Ac…

vue3单选选择全部传all,否则可以多选

<el-form-item label"发布范围-单位选择"><el-radio-group v-model"formData.unitRadio" change"getUnit"><el-radio label"ALL" click.prevent"radioChange(ALL)">全部</el-radio><el-radio la…

限流简单实例

1、限流算法 &#xff08;1&#xff09;固定窗口计数器算法 固定窗口其实就是时间窗口。固定窗口计数器算法规定了我们单位时间处理的请求数量。 思路如下&#xff1a; 1&#xff09;给定一个变量counter来记录当前接口处理的请求数量&#xff0c;初始值为0&#xff08;代表接口…

微信开发者工具 miniprogram_npm 未找到

背景 微信开发者工具中&#xff0c;打开集成了vant-weapp的项目&#xff0c;构建npm时&#xff0c;报错\miniprogram_npm\ 未找到。 问题 微信开发者工具&#xff0c;工具----->构建npm时&#xff0c;提示 message&#xff1a;发生错误 Error: D:\some\path\miniprogram…

Linux 命令学习:

1. PS命令 ps 的aux和-ef区别 1、输出风格不同&#xff0c;展示的格式略有不同 两者的输出结果差别不大&#xff0c;但展示风格不同。aux是BSD风格&#xff0c;-ef是System V风格。 2、aux会截断command列&#xff0c;而-ef不会&#xff0c;当结合grep时这种区别会影响到结果 …

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis em

&#xfeff; 工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据…

【C++】STL——list的模拟实现、构造函数、迭代器类的实现、运算符重载、增删查改

文章目录 1.模拟实现list1.1构造函数1.2迭代器类的实现1.3运算符重载1.4增删查改 1.模拟实现list list使用文章 1.1构造函数 析构函数 在定义了一个类模板list时。我们让该类模板包含了一个内部结构体_list_node&#xff0c;用于表示链表的节点。该结构体包含了指向前一个节点…

深度学习入门 ---- 张量(Tensor)

文章目录 张量张量在深度学习领域的定义张量的基本属性使用PyTorch安装PyTorch查看安装版本 创建张量常用函数四种创建张量的方式和区别 四则运算 张量 张量在深度学习领域的定义 张量&#xff08;tensor&#xff09;是多维数组&#xff0c;目的是把向量、矩阵推向更高的维度。…

uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

uniapp 微信小程序&#xff1a;v-model双向绑定问题&#xff08;自定义 props 名无效&#xff09; 前言问题双向绑定示例使用 v-model使用 v-bind v-on使用 sync 修饰符 参考资料 前言 VUE中父子组件传递数据的基本套路&#xff1a; 父传子 props子传父 this.$emit(事件名, …