A way to dynamically generate Adminlte menus from a database using C #

The current application design style tends to be flat flat, many Bootstrap implementation of a lot of UI very beautiful management interface (Bootstrap Admin template).

This core file is open source in Github:https://github.com/jackwangcumt/adminlte-menu-generate. First look at the main interface:

View the menu HTML structure on the left navigation (there is an error in the following code, the HTML custom attribute is split directly with a space, not the number, or jquery may get an error defining the attribute):

Through observation, you can find the characteristics of the menu tree, note here, the menu top-level title is displayed in span, the other class is different. How do you dynamically generate a treemenu structure that conforms to this feature from a database?

1 database field Design

2 Demo data

5 Menu Class implementation:

First, the tree structure of the menu, naturally think of the recursive build (remove the HTML custom attribute segmentation, the number, with a space instead), the code is as follows:

 1 public class Adminltehelper 2 {3//<summary> 4///Adminlte Multi-level menu catalog with DataTable Generation 5 Gettreejsonbytable (DataTable, "id", "title", "pid", "0", "MenuLevel"); 6//</summary> 7//<param name= "tabel" > Data source </param> 8//<param name= "IdC Ol ">id column </param> 9//<param name=" Txtcol ">text column </param>10//<param name=" RelA "& gt; Relationship field (tree structure field in dictionary table) </param>11//<param name= "PId" > Parent ID value (0) </param>12//<param name = "Colmenulevel" > Menu display Hierarchy column name </param>13 public StringBuilder result = new StringBuilder (); Ringbuilder sb = new StringBuilder (); public void gettreejsonbytable (DataTable tabel, string idcol, Strin G Txtcol, String RelA, Object pid,string colmenulevel), and result. Append (sb.) ToString ()); Clear (); if (tabel.    Rows.Count > 0) 23         {string filer = string. Format ("{0}= ' {1} '", RelA, PId); datarow[] rows = tabel. Select (filer), if (rows.                         Length > 0) {30 foreach (DataRow row in rows) {31 if (tabel. Select (String. Format ("{0}= ' {1} '", RelA, Row[idcol]). Length > 0) 32 {33//First level, name in <span> multilevel menu </span> class TR Eeview34//colmenulevel for MenuLevel, for the menu display level, can be configured in the background 35//And the level of the tree may be different if (Row[colmenulevel]. ToString () = = "1") PNs {"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\ "&Gt;</i></span></a> ");}41 Else42 {on a. 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 }47 sb.  Append ("<ul class=\" treeview-menu\ ">"), Gettreejsonbytable (Tabel, Idcol, Txtcol, RelA, Row[idcol], colmenulevel); Append ("</ul>"); Append ("</li>"); Append (sb.) ToString ());          Clear ();}55 else56               {//isleaf=true58 if (Row[colmenulevel].                                 ToString () = = "1") 59 {60//top-level menu, title is displayed in span, otherwise the caption cannot be hidden when the icon is displayed 61 Sb. Append ("<li class=\" treeview\ "><a href=\" #\ "moid=\" "+ row[idcol] +" \ ", text=\" "+ row[txtcol" + "\", isleaf=\ "t Rue\ "" + ", url=\" "+ row[" url "] +" \ "><i class=\" fa fa-folder\ "></i><span>" + row[txtcol "+" </spa                             N></a></li> "),}64 Else65 {$ 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//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> "); Ult. Append (sb.) ToString ()); Clear ();}74 result. Append (sb.) ToString ());                 Clear (); 76 77}78 79}80 81 Result. Append (sb.) ToString ()); Clear (); 83 84}85 86}87}

6 calls

7 Testing

Verify that the resulting menu structure is correct, first to see if the hierarchy and database are the same, to see if you can expand by clicking the ancestor, and finally note that after the left menu shrinks, only the icon is displayed, the mouse is moved to the icon, and the submenu is displayed correctly:

8 Applications

Suppose the menu is this:

Use jquery to open a page when you click an item in the menu

Core file open source in Github:https://github.com/jackwangcumt/adminlte-menu-generate.

A way to dynamically generate Adminlte menus from a database using C #