• 用C#从数据库动态生成AdminLTE菜单的一种方法


    用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

    水平有限,望各位园友不吝赐教!如果觉得不错,请点击推荐和关注! 
    出处:http://www.cnblogs.com/isaboy/ 
    声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
     
     
  • 相关阅读:
    学习网站
    HTML 5 Canvas 参考手册
    -webkit-overflow-scrolling:touch
    css中引入新的字体文件
    js转义html中的字符
    js 去掉html标签及&nbsp;
    ajax解决IE跨域设置
    百度地图的简单使用
    jquery 阻止默认事件(传播和冒泡)
    IOS学习之路十九(JSON与Arrays 或者 Dictionaries相互转换)
  • 原文地址:https://www.cnblogs.com/zhangxiaolei521/p/6011287.html
Copyright © 2020-2023  润新知