用C#从数据库动态生成AdminLTE菜单的一种方法-CSDN博客

当前的应用设计风格趋于Flat扁平化，很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template)。首先看一下主界面：

查看左边导航的菜单html结构：

通过观察，可以发现其中菜单树的特点，这里注意一下，菜单顶级的标题显示在span中，另外class也不同。那边如何从数据库动态生成符合此特征的treemenu结构呢？

1 数据库字段设计

2 演示数据

5 菜单类实现：

首先树结构的菜单，自然想到用递归来构建，代码如下：

 
       public   
       class  
       AdminLTEHelper 
      
       { 
      
       /// <summary> 
      
       /// 根据DataTable生成AdminLTE的多级菜单目录 
      
       /// GetTreeJsonByTable(datatable, "id", "title", "pid", "0","menulevel"); 
      
       /// </summary> 
      
       /// <param name="tabel">数据源 
      
       /// <param name="idcol">ID列 
      
       /// <param name="txtcol">Text列 
      
       /// <param name="rela">关系字段(字典表中的树结构字段) 
      
       /// <param name="pid">父ID值(0) 
      
       /// <param name="colmenulevel">菜单显示层级列名 
      
       public  
       StringBuilder result =  
       new  
       StringBuilder(); 
      
       public  
       StringBuilder sb =  
       new  
       StringBuilder(); 
      
       public  
       void  
       GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId,string colmenulevel) 
      
       { 
      
       result.Append(sb.ToString()); 
      
       sb.Clear(); 
      
       if  
       (tabel.Rows.Count > 0) 
      
       { 
      
       string filer = string.Format( 
       "{0}='{1}'" 
       , rela, pId); 
      
       DataRow[] rows = tabel.Select(filer); 
      
       if  
       (rows.Length > 0) 
      
       { 
      
       foreach (DataRow row in rows) 
      
       { 
      
       if  
       (tabel.Select(string.Format( 
       "{0}='{1}'" 
       , rela, row[idCol])).Length > 0) 
      
       { 
      
       //第一层级,名称在<span>多级菜单</span>中 class为treeview 
      
       //colmenulevel为menulevel，为菜单的显示层级，可以在后台进行配置 
      
       //和树的层级可能不同 
      
       if  
       (row[colmenulevel].ToString() ==  
       "1" 
       ) 
      
       { 
      
       sb.Append( 
       "<li class=\"treeview\"><a href=\"#\"><i class=\"fa fa-folder\"><span>"  
       + row[txtCol] +  
       "</span><span class=\"pull-right-container\"> <i class=\"fa fa-angle-left pull-right\">" 
       ); 
      
       } 
      
       else 
      
       { 
      
       sb.Append( 
       "<li><a href=\"#\"><i class=\"fa fa-folder\">"  
       + row[txtCol] +  
       "<span class=\"pull-right-container\"> <i class=\"fa fa-angle-left pull-right\">" 
       ); 
      
       } 
      
       sb.Append( 
       "<ul class=\"treeview-menu\">" 
       ); 
      
       GetTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol], colmenulevel); 
      
       sb.Append( 
       "" 
       ); 
      
       sb.Append( 
       "</ul class=\"treeview-menu\"></i class=\"fa fa-angle-left pull-right\"></span class=\"pull-right-container\"></i class=\"fa fa-folder\"></a href=\"#\"></li>" 
       ); 
      
       result.Append(sb.ToString()); 
      
       sb.Clear(); 
      
       } 
      
       else 
      
       { 
      
       //isleaf=true 
      
       if  
       (row[colmenulevel].ToString() ==  
       "1" 
       ) 
      
       { 
      
       //顶级菜单，标题显示在span中，否则显示图标时，标题不能隐藏 
      
       sb.Append( 
       "<li class=\"treeview\"><a href=\"#\" moid=\""  
       + row[idcol] +  
       "\",text=\""  
       + row[txtcol] +  
       "\",isleaf=\"true\""  
       +  
       ",url=\""  
       + row[ 
       "url" 
       ] +  
       "\"><i class=\"fa fa-folder\"><span>"  
       + row[txtCol] +  
       "</span>" 
       ); 
      
       } 
      
       else 
      
       { 
      
       sb.Append( 
       "<li><a href=\"#\" moid=\""  
       + row[idcol] +  
       "\",text=\""  
       + row[txtcol] +  
       "\",isleaf=\"true\""  
       +  
       ",url=\""  
       + row[ 
       "url" 
       ] +  
       "\"><i class=\"fa fa-folder\">"  
       + row[txtCol] +  
       "</i class=\"fa fa-folder\"></a href=\"#\" moid=\""  
       + row[idcol] +  
       "\",text=\""  
       + row[txtcol] +  
       "\",isleaf=\"true\""  
       +  
       ",url=\""  
       + row[ 
       "url" 
       ] +  
       "\"></li>" 
       ); 
      
       } 
      
       //sb.Append("<li><a href=\"#\" moid=\"" + row[idcol] + "\",text=\"" + row[txtcol] + "\",isleaf=\"true\"" + ",url=\"" + row["url"] + "\"><i class=\"fa fa-folder\">" + row[txtCol] + "</i class=\"fa fa-folder\"></a href=\"#\" moid=\"" + row[idcol] + "\",text=\"" + row[txtcol] + "\",isleaf=\"true\"" + ",url=\"" + row["url"] + "\"></li>"); 
      
       result.Append(sb.ToString()); 
      
       sb.Clear(); 
      
       } 
      
       result.Append(sb.ToString()); 
      
       sb.Clear(); 
      
       } 
      
       } 
      
       result.Append(sb.ToString()); 
      
       sb.Clear(); 
      
       } 
      
       } 
      
       }</i  
       class 
       =\ 
       "fa fa-folder\"></a href=\"#\" moid=\""  
       + row[idcol] +  
       "\",text=\""  
       + row[txtcol] +  
       "\",isleaf=\"true\""  
       +  
       ",url=\""  
       + row[ 
       "url" 
       ] +  
       "\"></li class=\"treeview\"></i class=\"fa fa-angle-left pull-right\"></span class=\"pull-right-container\"></i class=\"fa fa-folder\"></a href=\"#\"></li class=\"treeview\"></param name=" 
       colmenulevel 
       "></param name=" 
       pid 
       "></param name=" 
       rela 
       "></param name=" 
       txtcol 
       "></param name=" 
       idcol 
       "></param name=" 
       tabel">