用C#從資料庫動態生成AdminLTE菜單的一種方法

　　當前的應用設計風格趨於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。