當前的應用設計風格趨於Flat扁平化，很多基於BootStrap實現了很多UI非常漂亮的管理界面(Bootstrap admin template)。
此核心文件開源在Github:https://github.com/JackWangCUMT/AdminLTE-Menu-Generate。首先看一下主界面：
查看左邊導航的菜單html結構(下面代碼有錯誤，HTML自定義屬性直接用空格進行分割，而不是,號進行分割，不然jquery獲取定義屬性時可能會出現錯誤）：
通過觀察，可以發現其中菜單樹的特點，這里注意一下，菜單頂級的標題顯示在span中，另外class也不同。那邊如何從數據庫動態生成符合此特征的treemenu結構呢？
1 數據庫字段設計
2 演示數據
5 菜單類實現：
首先樹結構的菜單，自然想到用遞歸來構建（去掉html自定義屬性的分割,號，用空格代替），代碼如下：
1 public class AdminLTEHelper 2 { 3 /// <summary> 4 /// 根據DataTable生成AdminLTE的多級菜單目錄 5 /// GetTreeJsonByTable(datatable, "id", "title", "pid", "0","menulevel"); 6 /// </summary> 7 /// <param name="tabel">數據源</param> 8 /// <param name="idCol">ID列</param> 9 /// <param name="txtCol">Text列</param> 10 /// <param name="rela">關系字段(字典表中的樹結構字段)</param> 11 /// <param name="pId">父ID值(0)</param> 12 /// <param name="colmenulevel">菜單顯示層級列名</param> 13 public StringBuilder result = new StringBuilder(); 14 public StringBuilder sb = new StringBuilder(); 15 16 public void GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId,string colmenulevel) 17 { 18 19 result.Append(sb.ToString()); 20 sb.Clear(); 21 22 if (tabel.Rows.Count > 0) 23 { 24 25 string filer = string.Format("{0}='{1}'", rela, pId); 26 DataRow[] rows = tabel.Select(filer); 27 if (rows.Length > 0) 28 { 29 foreach (DataRow row in rows) 30 { 31 if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0) 32 { 33 //第一層級,名稱在<span>多級菜單</span>中 class為treeview 34 //colmenulevel為menulevel，為菜單的顯示層級，可以在后台進行配置 35 //和樹的層級可能不同 36 if (row[colmenulevel].ToString() == "1") 37 { 38 sb.Append("<li class=\"treeview\"><a href=\"#\"><i class=\"fa fa-folder\"></i><span>" + row[txtCol] + "</span><span class=\"pull-right-container\"> <i class=\"fa fa-angle-left pull-right\"></i></span></a>"); 39 40 } 41 else 42 { 43 44 sb.Append("<li><a href=\"#\"><i class=\"fa fa-folder\"></i>" + row[txtCol] + "<span class=\"pull-right-container\"> <i class=\"fa fa-angle-left pull-right\"></i></span></a>"); 45 46 } 47 sb.Append("<ul class=\"treeview-menu\">"); 48 GetTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol], colmenulevel); 49 sb.Append("</ul>"); 50 sb.Append("</li>"); 51 result.Append(sb.ToString()); 52 sb.Clear(); 53 54 } 55 else 56 { 57 //isleaf=true 58 if (row[colmenulevel].ToString() == "1") 59 { 60 //頂級菜單，標題顯示在span中，否則顯示圖標時，標題不能隱藏 61 sb.Append("<li class=\"treeview\"><a href=\"#\" moid=\"" + row[idCol] + "\",text=\"" + row[txtCol] + "\",isleaf=\"true\"" + ",url=\"" + row["url"] + "\"><i class=\"fa fa-folder\"></i><span>" + row[txtCol] + "</span></a></li>"); 62 63 } 64 else 65 { 66 sb.Append("<li><a href=\"#\" moid=\"" + row[idCol] + "\",text=\"" + row[txtCol] + "\",isleaf=\"true\"" + ",url=\"" + row["url"] + "\"><i class=\"fa fa-folder\"></i>" + row[txtCol] + "</a></li>"); 67 } 68 69 //sb.Append("<li><a href=\"#\" moid=\"" + row[idCol] + "\",text=\"" + row[txtCol] + "\",isleaf=\"true\"" + ",url=\"" + row["url"] + "\"><i class=\"fa fa-folder\"></i>" + row[txtCol] + "</a></li>"); 70 71 result.Append(sb.ToString()); 72 sb.Clear(); 73 } 74 result.Append(sb.ToString()); 75 sb.Clear(); 76 77 } 78 79 } 80 81 result.Append(sb.ToString()); 82 sb.Clear(); 83 84 } 85 86 } 87 }
6 調用
7 測試
驗證生成的菜單結構是否正確，首先看看顯示的層級結構和數據庫是否一致，另外查看單擊上級，是否可以展開，最后注意的是，在左邊菜單收縮后，只顯示圖標，鼠標移動到圖標上后，並能正確顯示子菜單：
8 應用
假設菜單是這樣的：
用jquery可以在單擊菜單某項時，打開頁面
核心文件開源在Github:https://github.com/JackWangCUMT/AdminLTE-Menu-Generate。