liuyuhang原創，未經允許請勿轉載！ 前端開發樹形插件帶來的煩惱（一） 前端開發中，有些項目中會用到樹形插件，其數據結構也比較簡單，大體如下： 數據結構說明： 每一行代表一個數據,該數據由基本信息，id，pid三個部分構成。pid為連接的父節點，額外增加的內容也包括兩個部分； ①縮進；②節點展 ...
liuyuhang原創，未經允許請勿轉載！
前端開發樹形插件帶來的煩惱（一）
前端開發中，有些項目中會用到樹形插件，其數據結構也比較簡單，大體如下：
1 TreeRoot 2 3 |-- tree01 id = 01 pid = 0 4 |-- leaf01 id = 04 pid = 01 5 |-- leaf02 id = 05 pid = 01 6 |-- leaf03 id = 06 pid = 01 7 ...... 8 |-- tree02 id = 02 pid = 0 9 |-- leaf04 id = 07 pid = 02 10 ...... 11 |-- tree03 id = 03 pid = 0 12 |-- leaf05 id = 08 pid = 03 13 ...... 14 ......
數據結構說明：
每一行代表一個數據,該數據由基本信息，id，pid三個部分構成。pid為連接的父節點，額外增加的內容也包括兩個部分；
①縮進；②節點展開提示，如+ - 符號，> < 符號等，方式眾多，不是重點，不繼續說了。
樹形結構展示說明：
樹形結構的展示方式主要還是通過遍歷和遞歸，渲染方式可以一次性將數組組裝好整體展示，或者一層層展示，也可以考慮一共展示幾層（遞歸次數）
煩惱不在於此，煩惱是來自於業務的。我舉例兩個樹形結構，暫命名為樹形結構A和樹形結構B，描述如下： 1 樹形結構A 2
3 科：大貓科 id = 1 pid = 0 5 屬：虎 id = 2 pid = 1 7 種：01華南虎 id = 3 pid = 2 8 02孟加拉虎 id = 4 pid = 2 9 03東北虎 id = 5 pid = 2 10 11 - - - - -- - - - - - - - - - - - 12 樹形結構B
13 14 鍵盤：鍵盤實例 id = 1 pid = 0 16 按鍵：Q鍵 id = 2 pid = 1 18 ：W鍵 id = 3 pid = 1 19 ：E鍵 id = 4 pid = 1
在以上兩個例子中，假設我需要在每個節點（包括根節點）上做個覆選框，然後拿到所選擇的 id，之後根據已選擇的id進行操作。
這裡對於節點是否已選，我見到的操作方式是不同的。如：
01、選擇根節點，子節點跟隨顯示選擇；
02、選擇根節點，子節點不跟隨顯示選擇；
03、選擇所有子節點，根節點跟隨顯示選擇；
04、選擇部分子節點，根節點跟隨顯示選擇；
05、選擇部分子節點，根節點跟隨顯示半選擇；
05、選擇部分子節點，根節點跟隨顯示不選擇；
首先以01、03、04這種策略對上述兩種AB樹結構進行分析
對A進行假設，已選擇 01華南虎，此時 屬：虎 對應跟隨顯示選擇，
因為 科 下只有這麼一個 屬，所以 科：大貓 必定跟隨顯示選擇；
至此，對樹形結構A選擇的 id列表為 [ 1,2 ,3 ]；
此時我可以說：“華南虎是虎，華南虎是大貓”，這兩種描述都並沒有任何錯誤。
——即符合事實,也符合選擇覆選策略出現的id列表
對B進行假設，已選擇 Q鍵 ，此時鍵盤實例跟隨顯示選擇；
至此，對樹形結構B選擇的 id列表為[ 1, 2 ]；
此時我說：“我按Q鍵，鍵盤燈點亮的是Q鍵”，就是錯的，因為我按Q鍵，選擇的是Q；
但是實際選擇的是Q和整個鍵盤，所以點亮的鍵盤燈也是整個鍵盤的，
這個看似很簡單的問題源於樹形結構中的選擇附帶的 id 跟隨選擇策略的不同；
同理，假設我以01、03、05這種策略對以上兩種AB樹結構進行分析，一樣會得出矛盾的結論，還是上例：
對A結構描述：可以說：“華南虎是虎，但是虎不是華南虎，範圍不同”，這句話是正確的，也符合邏輯
對B結構描述：可以說：“我按Q鍵，並沒有按全部的鍵盤按鍵，鍵盤燈點亮的只有Q鍵”
以上兩種說法都符合邏輯，也很正確，但是id如何選，假設去掉父 id，則一條符合半選描述，
一條符合不選描述的內容，半選到底是選，還是不選？
拿出來的數據結構是否有必要重新列一張列表出來，很是矛盾，即使是使用01、03、06，依然也會產生困惑。
這兩個例子還算好，還有更噁心的例子：
假設父節點是空的內容，比如某頁PPT，有文字A，文字B，圖形C，圖形D，其中AB編組為X，CD編組為Y，XY編組為Z；
這個樹形結構的父節點是架空的，內容完全由最基層的子節點來構成的情況下，
我選擇A的時候，必定跟隨選擇AB形成的組X，必定跟隨選擇X所屬的編組XY構成的Z；
試問，此時我要對A沿虛線剪下，剪下的是誰，如果不拆分組，剪掉的是Z，
實際上是ABCD，如果拆分組，那破壞了本身的樹形結構；
若此時我選擇Z，然後對Z沿虛線剪下，剪下的應該是整個組，但是這個組之間可能會有間距，有重疊，
並沒有分開樹形結構，實際上選擇的是Z，但是獲取的id並非是ABCD的id，也不是XY的id，只獲取了Z的id；
這種選擇了父節點而子節點並未實際跟隨選擇的情況如何計算呢？
所以，樹形結構的覆選策略，實際上是複雜的，在給用戶的設計中，是必定要有跟隨選擇的；
至少帶有全選，反選，子節點全選父節點跟隨全選，子節點未全選父節點要麼半選，要麼不選這種跟隨性操作；
十幾種一種策略不夠用，上述描述的策略也只是適用於某種情況而已；
如果樹形結構編組的是3D模型組？2D圖層組？真實分類的子分類？策略不能一蹴而就的；
既然已經使用了樹結構，而且又要必須使用多選，那麼樹形結構就必須分開策略，分別創建，復用性就大大降低；
而已經做好的很多樹形結構的插件大神們，有考慮以上這些問題，提供出不同覆選策略的方案麽？
後續會慢慢更新這個問題，有一些尚未全部完成的解決思路，有空就更一下！
以上！✧(∗≧ꇴ≦)人(≧ꈊ≦∗)✧
