用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/
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
出处:http://www.cnblogs.com/isaboy/
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。