当前的应用设计风格趋于flat扁平化，很多基于bootstrap实现了很多ui非常漂亮的管理界面(bootstrap admin template)。首先看一下主界面：
查看左边导航的菜单html结构：
通过观察，可以发现其中菜单树的特点，这里注意一下，菜单顶级的标题显示在span中，另外class也不同。那边如何从数据库动态生成符合此特征的treemenu结构呢？
1 数据库字段设计
2 演示数据
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 调用
7 测试
验证生成的菜单结构是否正确，首先看看显示的层级结构和数据库是否一致，另外查看单击上级，是否可以展开，最后注意的是，在左边菜单收缩后，只显示图标，鼠标移动到图标上后，并能正确显示子菜单：
声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。