我的前端工具集(四)樹狀結構前篇
liuyuhang原創，未經允許禁止轉載
目錄
1、什么是樹狀結構
樹狀結構，指的是由根，和葉組成的結構。
我們一般看的文件夾關系，就是樹狀結構。打開一個文件夾，其中可以有多個文件夾。
樹狀結構的路徑能夠向下擴展，同時能夠向上溯源。
在樹狀結構分叉的地方，叫做節點（node）。
對於每個節點分叉數量相同的樹，叫做X叉樹，如每個節點分為2叉的樹叫做二叉樹。
同理也有3叉樹N叉樹。
2叉樹是一種比較標准規范的數據結構了，以后會寫相關內容！
本文說的樹，指的是在前端視圖上要展示的樹狀結構，並非指數據結構！
貼幾張樹狀結構的可視效果：
2.樹狀結構的特點
樹狀結構都要滿足一定的特點的，這些特點讓這個樹的功能給定！
2.1.唯一根節點（ROOT）
每個樹形結構都應該有唯一的根節點，在向上追溯的時候，整個樹狀結構是根據從該節點開始的。
2.2.可閉合可展開
樹形結構的節點一般都包括開閉功能，表現符號多為用+或-表示，也有用node或leaf表示的。
樹在加載完畢以后，也有兩種表現形式，即默認關閉節點，默認展開節點。
介於這兩種形式之間的形式，就是默認展開部分節點，可以用某個參數來設定，比如默認展開三級節點。
2.3.有唯一id構成
樹的每一個節點，即可以表示信息點（leaf），同時也可以表示是信息節點（node）。
區別在於，信息點是包含信息，而不包含子信息的。
信息節點可以包含信息，也是允許包含子信息的。
一般來講，類似於文件與文件夾的關系。
在自然環境中，一個樹葉長出的地方，我們叫做葉芽，即該芽長出的是一片葉子（信息）。
同時，葉芽在第二年，可能就生長成了一個枝芽（節點），枝芽中包含一個分支，該分支上可能長出多個葉芽。
因此，不管是信息點（leaf），還是信息節點（node），都是有一個標記的，該標記即id，當然可以用其他的key來表示。
但是要確定的是，該id應有唯一的value來表示，即有唯一id表示其身份。
2.4.有pid指定其隸屬節點
如果按照自然順序直接展示，那就是個list，而並非是樹結構了。
將正確的id標記的信息點（leaf）掛載在正確的信息節點（node）下，需要一個方式去識別，該識別方式即一個引用。
因為每個信息節點（node）下可以掛載多個信息點（leaf），所以，需要有一個key表示value等同於信息節點（node）的id。
多數情況下，大家采用pid的手段，即parentId的縮寫。實際意義是this info‘s parent id is xxx的意思。
即leaf的pid=node的id的時候，表示該leaf掛載在該node下。
pid並不是唯一標識，但是為了表示樹形結構，該key應該存在。
2.5.每一叉上都有相應的Info信息
如果每一個信息點（leaf）或信息節點（node）都只有id和pid，這個樹就太空盪盪了，它需要一些信息，可能是：
文字信息；
某種功能按鈕；
某種綁定事件；
2.6.組織形式多樣化
常見的系統中，樹狀結構是豎着展示的。而在很多組織結構圖中，樹狀結構是橫向展示的。
除此之外，以類似離散圖形式展示的，也可以稱為樹，比如腦圖。
不應該將樹的組織形式唯一化，雖然豎向的樹狀圖最為常見，也展示起來最為便利。
3、樹狀結構解決了什么需求
有了list的展示形式，為什么還需要樹來展示信息？
list的展示形式分為有序和無序兩種，兩種形式中，list中的各個元素都是沒有級別之分的，最多有順序之分。
樹狀結構主要展示的是元素之間的關系。這種元素之間的關系有兩層含義：
這種元素之間的關系，可以表示為層級關系，一種等級關系；
同樣，這種元素之間的關系，可以表示為包含關系，即集合中的包含、隸屬這種含義的關系；
4、樹狀結構的的原始數據
樹狀結構要展現，需要原始數據，目前來看，我見過的原始數據組織形式，有以下幾種：
鏈表結構。
N叉樹結構。
List結構。
一般來講數據是要做持久化的，這種持久化目前多儲存於數據庫中。
數據庫中讀出來的原始數據，若不經過加工，直接使用，多數是List結構。
之后將面臨兩個選擇：
在服務器上將List加工成樹結構，還是發送List給瀏覽器，讓瀏覽器加工成樹結構？
結果顯而易見，這種不是必須給服務器做的工作，當然不讓服務器去做。
6、簡單的樹狀結構Demo
更新在下文中
以上！