個人前端工具集(四)樹狀結構前篇

個人前端工具集(四)樹狀結構前篇

 

liuyuhang原創，未經容許禁止轉載

 

目錄

個人前端工具集

 

一、什麼是樹狀結構

 

　　樹狀結構，指的是由根，和葉組成的結構。

　　咱們通常看的文件夾關係，就是樹狀結構。打開一個文件夾，其中能夠有多個文件夾。

　　樹狀結構的路徑可以向下擴展，同時可以向上溯源。

 

　　在樹狀結構分叉的地方，叫作節點（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.組織形式多樣化

 

　　　　常見的系統中，樹狀結構是豎着展現的。而在不少組織結構圖中，樹狀結構是橫向展現的。

　　　　除此以外，以相似離散圖形式展現的，也能夠稱爲樹，好比腦圖。

　　　　不該該將樹的組織形式惟一化，雖然豎向的樹狀圖最爲常見，也展現起來最爲便利。

 

三、樹狀結構解決了什麼需求

 

　　有了list的展現形式，爲何還須要樹來展現信息？

 

　　list的展現形式分爲有序和無序兩種，兩種形式中，list中的各個元素都是沒有級別之分的，最多有順序之分。　

 

　　樹狀結構主要展現的是元素之間的關係。這種元素之間的關係有兩層含義：

　　這種元素之間的關係，能夠表示爲層級關係，一種等級關係；

　　一樣，這種元素之間的關係，能夠表示爲包含關係，即集合中的包含、隸屬這種含義的關係；

 

四、樹狀結構的的原始數據

 

　　樹狀結構要展示，須要原始數據，目前來看，我見過的原始數據組織形式，有如下幾種：

　　鏈表結構。

　　N叉樹結構。

　　List結構。

 

　　通常來說數據是要作持久化的，這種持久化目前多儲存於數據庫中。

　　數據庫中讀出來的原始數據，若不通過加工，直接使用，多數是List結構。

 

　　以後將面臨兩個選擇：

　　　　在服務器上將List加工成樹結構，仍是發送List給瀏覽器，讓瀏覽器加工成樹結構？

　　

　　結果顯而易見，這種不是必須給服務器作的工做，固然不讓服務器去作。

 

六、簡單的樹狀結構Demo

 

更新在下文中

 

個人前端工具集(四)樹狀結構後篇 

 

以上！