前端共學會：學習|成長|工作|職業(yè)，綜合服務社區(qū)

download：https://www.zxit666.com/6459/

先來看看SpreadJS是什么？

SpreadJS是一款類Excel的前端表格控件，操作及功用與Excel高度相似，但又完整脫離對Office的依賴。將SpreadJS集成到前端項目并部署發(fā)布后，用戶只需求在PC上裝置了滿足H5規(guī)范的閱讀器（Chrome、Firefox、Edge等），即可在閱讀器端翻開SpreadJS。

假如想愈加深化的理解SpreadJS，能夠翻開官方在線體驗地址及學習指南停止學習，接下來我們來引見分權限編輯的詳細完成計劃。

為什么會想到運用SpreadJS呢？

之所以選擇SpreadJS來做權限編輯的底層表格組件，主要是受業(yè)務人員啟示。在Excel中，有一種機制叫做表單維護。表單維護是分離單元格鎖定狀態(tài)和工作表的維護狀態(tài)，能夠用來控制單元格能否能夠編輯，這種可編輯控制的最小粒度能夠到達單元格級別。

該如何來完成呢？

SpreadJS是一款類Excel的表格控件，具備表單維護的功用。完成編輯控制的中心API主要有單元格鎖定。我們將編輯權限控制整體分為三類，分別如下：

（1）整個工作表不可編輯

一個Excel文件我們稱為一個工作簿，一個工作簿會包含多個工作表。默許狀態(tài)下，工作表的鎖定狀態(tài)為true，此時假如想要設置整個工作表不可編輯，只需執(zhí)行工作表維護相關代碼即可。

（經過SpreadJS完成整個工作表不可編輯）

經過上圖中紅框所示的代碼，Sheet1中一切單元格就不能再編輯了。假如設置完之后，發(fā)現單元格還是能夠編輯，可能是由于原來的excel文件中默許單元格的鎖定狀態(tài)被修正成false了，此時能夠用代碼或右鍵設置單元格格式→維護來查看單元格的鎖定狀態(tài)。

假如需求整個工作簿都不可編輯，只需求循環(huán)去設置工作簿中每個工作表的維護狀態(tài)即可。

（2）完成局部單元格能夠編輯

之前講到，不可編輯的準繩是單元格鎖定&表單維護同時生效。只需目的可以編輯的單元格不滿足這個與條件，即可停止編輯。表單維護是在工作表上的控制參數，無法對應的單元格，因而想要與條件不成立，只需求將對應單元格的鎖定狀態(tài)設置為false即可。

（經過SpreadJS完成局部單元格能夠編輯）

經過上圖中黃色區(qū)域的代碼即可完成設置A1:C6單元格能夠編輯，其它單元格不能編輯的需求，這里文件默許單元格鎖定狀態(tài)為true，假如不生效，則需求檢查其它單元格的鎖定狀態(tài)能否被修正為false，假如是的話，需求將其它單元格的鎖定狀態(tài)變?yōu)閠rue。

（3）完成局部單元格不能編輯

默許單元格鎖定狀態(tài)為true，假如需求少量的單元格不能編輯，倡議先將工作表的默許單元格鎖定狀態(tài)改為false，之后設置局部不能編輯的單元格鎖定狀態(tài)為true即可。

（經過SpreadJS完成局部單元格不能編輯）

經過上圖紅框中的代碼，即可完成橙色區(qū)域能夠編輯，區(qū)域區(qū)域不能編輯的需求。假如需求設置多個區(qū)域能夠編輯，能夠繼續(xù)調用區(qū)域鎖定（locked）相關的API即可，愈加細致的UI完成設置及代碼能夠參考SpreadJS官方論壇相關教程鏈接。

簡單總結一下

理解完單元格編輯的控制之后，接下來需求做的就是將用戶權限與單元格打通，完成基于登錄用戶權限的編輯控制。SpreadJS為了迎合Web端需求，支持了（Tag）屬性，用于記載一些和單元格相關的額外不需求展現的信息，我們就能夠將單元格編輯權限的相關信息記載在單元格Tag中。整體完成思緒如下：

（1）預先在單元格Tag中設置和權限相關的信息。本計劃中，將能夠編輯的用戶以字符串的方式寫入單元格當中。例如單元格tag為'user1'，則代表當前單元格一級用戶能夠編輯，假如單元格tag為'user1,user2'則代表當前單元格一級用戶與二級用戶均可編輯。

（2）遍歷查詢當前單元格Tag中能否包含用戶等級標志信息，若包含，標明當前用戶能夠編輯此單元格，將單元格對應的鎖定狀態(tài)變?yōu)閒alse。