當(dāng)前的應(yīng)用設(shè)計(jì)風(fēng)格趨于Flat扁平化，很多基于BootStrap實(shí)現(xiàn)了很多UI非常漂亮的管理界面(Bootstrap admin template)。首先看一下主界面：

查看左邊導(dǎo)航的菜單html結(jié)構(gòu)(下面代碼有錯(cuò)誤，HTML自定義屬性直接用空格進(jìn)行分割，而不是,號(hào)進(jìn)行分割，不然jquery獲取定義屬性時(shí)可能會(huì)出現(xiàn)錯(cuò)誤）：

通過觀察，可以發(fā)現(xiàn)其中菜單樹的特點(diǎn)，這里注意一下，菜單頂級(jí)的標(biāo)題顯示在span中，另外class也不同。那邊如何從數(shù)據(jù)庫(kù)動(dòng)態(tài)生成符合此特征的treemenu結(jié)構(gòu)呢？

1 數(shù)據(jù)庫(kù)字段設(shè)計(jì)

2 演示數(shù)據(jù)

5 菜單類實(shí)現(xiàn)：

首先樹結(jié)構(gòu)的菜單，自然想到用遞歸來構(gòu)建（去掉html自定義屬性的分割,號(hào)，用空格代替），代碼如下：

 View Code

6 調(diào)用

7 測(cè)試

驗(yàn)證生成的菜單結(jié)構(gòu)是否正確，首先看看顯示的層級(jí)結(jié)構(gòu)和數(shù)據(jù)庫(kù)是否一致，另外查看單擊上級(jí)，是否可以展開，最后注意的是，在左邊菜單收縮后，只顯示圖標(biāo)，鼠標(biāo)移動(dòng)到圖標(biāo)上后，并能正確顯示子菜單：

8 應(yīng)用

假設(shè)菜單是這樣的：

用jquery可以在單擊菜單某項(xiàng)時(shí)，打開頁(yè)面