Use C # To dynamically generate the AdminLTE menu from the database,

Use C # To dynamically generate the AdminLTE menu from the database,

The current application design style tends to Flat. Many BootStrap-based management interfaces (Bootstrap admin template) provide a lot of beautiful UIS ).

This core file is open-source on Github: https://github.com/jackwangcumt/adminlte-menu-generate. First, let's take a look at the main interface:

View the menu html structure in the left navigation bar (The following code has an error. HTML custom attributes are separated by spaces instead of commas (,). Otherwise, errors may occur when jquery obtains the definition attributes.):

Through observation, we can find out the features of the menu tree. Note that the top-level menu title is displayed in span, and the class is also different. How can we dynamically generate a treemenu structure based on this feature from the database?

1. database Field Design

2. Demo data

5 menu implementation:

First, the tree structure menu is naturally built using recursion (Remove the part of custom html attributes, and replace it with a space.), The Code is as follows:

1 public class AdminLTEHelper 2 {3 /// <summary> 4 // generate the AdminLTE multilevel menu directory based on the DataTable 5 // GetTreeJsonByTable (datatable, "id ", "title", "pid", "0", "menulevel "); 6 /// </summary> 7 /// <param name = "tabel"> data source </param> 8 /// <param name = "idCol"> ID column </param> 9 // <param name = "txtCol"> Text column </param> 10 // <param name = "rela"> link field (tree structure in the dictionary table) field) </param> 11 // <param name = "pId"> parent ID (0) </param> 12 // <param name = "colmenulevel"> menu display level column name </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 // Level 1. In the <span> multilevel menu </span>, the class is treeview34 // colmenulevel is menulevel, which is the display level of the menu, you can configure 35 // in the background and the hierarchy of the tree may be different 36 if (row [colmenulevel]. toString () = "1") 37 {38 sb. append ("<li class = \" treeview \ "> <a href = \" # \ "> <I class = \" fa-folder \ "> </I> <span> "+ row [txtCol] +" </span> <span class = \ "pull-right-container \"> <I class = \ "fa-angle- left pull-right \ "> </I> </span> </a> "); 39 40} 41 else42 {43 44 sb. append ("<li> <a href = \" # \ "> <I class = \" fa-folder \ "> </I>" + row [txtCol] + "<span class = \" pull-right-container \ "> <I class = \" 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 else56 {57 // isleaf = true58 if (row [colmenulevel]. toString () = "1") 59 {60 // top-level menu. The title is displayed in span; otherwise, the title cannot be hidden in 61 sb. append ("<li class = \" treeview \ "> <a href = \" # \ "moid = \" "+ row [idCol] + "\", text = \ "" + row [txtCol] + "\", isleaf = \ "true \" "+ ", url = \ "" + row ["url"] + "\"> <I class = \ "fa-folder \"> </I> <span> "+ row [txtCol] + "</span> </a> </li> "); 62 63} 64 else65 {66 sb. append ("<li> <a href = \" # \ "moid = \" "+ row [idCol] + "\", text = \ "" + row [txtCol] + "\", isleaf = \ "true \" "+ ", url = \ "" + row ["url"] + "\"> <I class = \ "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-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}View Code

6. Call

7. Test

Verify that the generated menu structure is correct. First, check whether the displayed hierarchy is consistent with that of the database. Then, check whether you can click the upper-level menu to expand it. Finally, note that after the menu on the left is shrunk, show only the icon, move the mouse over the icon, and display the sub-menu correctly:

8 applications

Suppose the menu is like this:

You can use jquery to open the page when you click an item in the menu.

Open-source core files are available on Github: https://github.com/jackwangcumt/adminlte-menu-generate.