摘要：本文由葡萄城技術團隊於博客園原創並首發。轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
在表格類填報需求中，根據當前登錄用戶的不同等級，能填報的區域會有所不同。本文基於前端表格控件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點擊此處，跳轉了解詳細的代碼。本文提供的是權限編輯的一種參考實現思路，如果大家有更好的實現方式，歡迎在評論區討論。
擴展鏈接：