前端開發樹形插件帶來的煩惱(一)


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圖層組?真實分類的子分類?策略不能一蹴而就的;

 

    既然已經使用了樹結構,而且又要必須使用多選,那么樹形結構就必須分開策略,分別創建,復用性就大大降低;

    而已經做好的很多樹形結構的插件大神們,有考慮以上這些問題,提供出不同復選策略的方案么?

 

后續會慢慢更新這個問題,有一些尚未全部完成的解決思路,有空就更一下!

以上!✧(∗≧ꇴ≦)人(≧ꈊ≦∗)✧

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM