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

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

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

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

1 数据库字段设计

2 演示数据

5 菜单类实现：

云网OA

采用JSP开发的办公自动化产品、基于B/S结构，运行环境：JDK v1.5、Tomcat v5.5、MySQL v4.1，三者均为以上版本其他相关内容：可视化流程设计： 流程支持串签、会签和分支流程，可以设置流程节点的修改、删除权限，并可指定流程中各个用户在表单中可以填写的域。智能表单所见即所得设计： 智能设计，自动在数据库中生成表格，方便优化程序 公共交流： 集论坛、博客、聊天室于一体文件柜：C

下载

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

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 调用

7 测试

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

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