• 技术文章 >类库下载 >C#类库

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

    高洛峰高洛峰2016-10-29 10:48:55原创1642
    当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template)。首先看一下主界面:

    1.png

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

    1.png

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

    1 数据库字段设计

    1.png

    2 演示数据

    1.png

    5 菜单类实现:

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

    public  class AdminLTEHelper
        {
            /// 
            /// 根据DataTable生成AdminLTE的多级菜单目录
            /// GetTreeJsonByTable(datatable, "id", "title", "pid", "0","menulevel");
            /// 
            /// 数据源
            /// ID列
            /// Text列
            /// 关系字段(字典表中的树结构字段)
            /// 父ID值(0)
            /// 菜单显示层级列名
            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)
                            {
                                //第一层级,名称在多级菜单中 class为treeview
                                //colmenulevel为menulevel,为菜单的显示层级,可以在后台进行配置
                                //和树的层级可能不同
                                if (row[colmenulevel].ToString() == "1")
                                {
                                    sb.Append("
  • " + row[txtCol] + " "); } else { sb.Append("
  • " + row[txtCol] + " "); } sb.Append("
      "); GetTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol], colmenulevel); sb.Append("
    "); sb.Append("
  • "); result.Append(sb.ToString()); sb.Clear(); } else { //isleaf=true if (row[colmenulevel].ToString() == "1") { //顶级菜单,标题显示在span中,否则显示图标时,标题不能隐藏 sb.Append("
  • " + row[txtCol] + "
  • "); } else { sb.Append("
  • " + row[txtCol] + "
  • "); } //sb.Append("
  • " + row[txtCol] + "
  • "); result.Append(sb.ToString()); sb.Clear(); } result.Append(sb.ToString()); sb.Clear(); } } result.Append(sb.ToString()); sb.Clear(); } } }

    6 调用

    1.png

    7 测试

    验证生成的菜单结构是否正确,首先看看显示的层级结构和数据库是否一致,另外查看单击上级,是否可以展开,最后注意的是,在左边菜单收缩后,只显示图标,鼠标移动到图标上后,并能正确显示子菜单:

    1.png

    声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML Javascript UI
    上一篇:剖析 AssemblyInfo.cs - 从这里了解常用的特性 Attribute 下一篇:实现两个指数递减多项式的和与积
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• C# 属性访问器• c# 特性• C# 在腾讯的发展• C#读取文件夹特定文件的方法• 剖析 AssemblyInfo.cs - 从这里了解常用的特性 Attribute
    1/1

    PHP中文网