Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.
In the form filling requirements, the areas that can be filled will vary according to the different levels of the currently logged-in user. Based on the front-end table control SpreadJS, this article introduces an implementation scheme for front-end split-authority editing.
(The display effect of SpreadJS on the browser side)
Let's take a look at what SpreadJS is?
SpreadJS is an Excel-like front-end table control. Its operation and function are highly similar to Excel, but it is completely independent of Office. After integrating SpreadJS into the front-end project and deploying it, users only need to install a browser (Chrome, Firefox, Edge, etc.) that meets the H5 standard on the PC to open SpreadJS on the browser side.
If you want to have a deeper understanding of SpreadJS, you can open the official online experience address and study guide for learning. Next, we will introduce the specific implementation plan of permission-based editing.
Why would you think of using SpreadJS?
The reason why SpreadJS is chosen as the underlying form component for permission editing is mainly inspired by business people. In Excel, there is a mechanism called sheet protection. Form protection is a combination of the cell lock status and the protection status of the worksheet, which can be used to control whether the cell can be edited. The minimum granularity of this editable control can reach the cell level.
How to achieve it?
SpreadJS is an Excel-like form control with form protection function. The core APIs for editing control mainly include cell locking and form protection . We divide the editing permission control into three categories as a whole, which are as follows:
(1) The entire worksheet cannot be edited
An Excel file is called a workbook, and a workbook will contain multiple worksheets. By default, the lock state of the worksheet is true. At this time, if you want to set the entire worksheet to be uneditable, you only need to execute the code related to worksheet protection.
(The entire worksheet is not editable through SpreadJS)
Through the code shown in the red box in the above figure, all cells in Sheet1 can no longer be edited. If you find that the cell can still be edited after setting, it may be because the lock status of the default cell in the original excel file has been changed to false. At this time, you can use the code or right-click to set the cell format → protect to view the cell. locked state.
If it is required that the entire workbook cannot be edited, you only need to cycle through to set the protection status of each worksheet in the workbook.
(2) Realize that some cells can be edited
As mentioned before, the non-editable principle is that cell lock & form protection take effect at the same time. As long as the target editable cell does not meet this AND condition, it can be edited. Form protection is a control parameter on the worksheet, which cannot correspond to the cell, so if you want the condition to fail, you only need to set the lock status of the corresponding cell to false.
(Some cells can be edited through SpreadJS)
Through the code in the yellow area in the above figure, you can set the requirements that cells A1:C6 can be edited, and other cells cannot be edited. The default cell lock status of the file here is true. If it does not take effect, you need to check the lock of other cells. Whether the state is changed to false, if so, the lock state of other cells needs to be changed to true.
(3) Realize that some cells cannot be edited
The default cell lock status is true. If a small number of cells cannot be edited, it is recommended to change the default cell lock status of the worksheet to false, and then set the lock status of some cells that cannot be edited to true.
(Some cells cannot be edited through SpreadJS)
Through the code in the red box in the above figure, the requirement that the orange area can be edited and the area area cannot be edited can be realized. If you need to set multiple regions to be editable, you can continue to call the region-locked (locked) related API. For more detailed UI implementation settings and codes, please refer to the relevant tutorial links on the SpreadJS official forum.
Brief summary
After understanding the control of cell editing, the next thing to do is to connect the user permissions with the cells to realize the editing control based on the login user permissions. In order to meet the needs of the web side, SpreadJS supports the cell tag (Tag) attribute, which is used to record some additional information related to the cell that does not need to be displayed. We can record the relevant information of the cell editing permission in the cell Tag . The overall implementation idea is as follows:
(1) Set the permission-related information in the cell Tag in advance. In this solution, the editable user is written into the cell in the form of a character string. For example, if the cell tag is 'user1', it means that the current cell can be edited by the first-level user; if the cell tag is 'user1, user2', it means that the current cell can be edited by both the first-level user and the second-level user.
(2) Traversingly query whether the current cell Tag contains user level tag information, if it does, it indicates that the current user can edit this cell, and change the lock status corresponding to the cell to false.
Click here for the complete implementation Demo , jump to understand the detailed code. This article provides a reference implementation idea for permission editing. If you have a better implementation method, please discuss it in the comment area.
Extension link:
Implementing Excel server-side import and export under the Spring Boot framework
Project Combat: Online Quotation Procurement System (React +SpreadJS+Echarts)