Extaspnet application tips (15th)-tree menu and accordion menu

Interface

Accordion menu

Tree menu

Database Table (x_menu)

Design view:

Data:

Aspx label Definition

In the previous article, the foreground page definition has been described in detail.

 
<Ext: region ID = "regionleft" split = "true" width = "200px" margins = "0 0 0 0" showheader = "true" Title = "menu" enablecollapse = "true" layout = "fit" position = "Left" runat = "server"> </ext: region>
 

Dynamically create a tree menu

Protected void page_init (Object sender, eventargs e) {initmenu ();} private void initmenu () {xmenucollection menus = new select (). from <xmenu> (). where (xmenu. showcolumn ). isdue to (true ). orderasc (xmenu. sortindexcolumn. columnname ). executeascollection <xmenucollection> (); If (xconfighelper. menutype. tolower () = "accordion") {// todo create an accordion menu} else {extaspnet. TREE tree = new extaspnet. tree (); Regi Onleft. items. add (tree); tree. showborder = false; tree. showheader = false; tree. autoscroll = true; tree. enablearrows = true; resolvemenutree (menus, 0, tree. nodes );}} /// <summary> /// generate the menu tree /// </Summary> /// <Param name = "Menus"> </param> /// <Param name = "parentmenuid"> </param> /// <Param name = "nodes"> </param> /// <returns> Number of subnodes of the current node </returns> private int resolvemenutree (xmenucollection menus, int Parentmenuid, extaspnet. treenodecollection nodes) {int COUNT = 0; foreach (xmenu menu in menus) {If (menu. parentmenuid = parentmenuid) {extaspnet. treenode node = new extaspnet. treenode (); nodes. add (node); node. TEXT = menu. name; node. iconurl = menu. imageurl; If (! String. isnullorempty (menu. navigateurl) {node. navigateurl = menu. navigateurl; node. target = "Main";} int childcount = resolvemenutree (menus, menu. ID, node. nodes); If (childcount = 0) {node. leaf = true;} count ++;} return count ;}

In this sectionCodeNote the following points:

• Because you need to dynamically create controls, it is best to put them in page_init instead of page_load.
• It is quite convenient to use subsonic to retrieve data from the database. Here, only the menus to be displayed are retrieved.
• Resolvemenutree is used to recursively generate the tree control. Note that the return value is used to indicate the number of subnodes of the current node and assign values to node. Leaf.

Create an accordion menu

The code for "// todo create an accordion menu" is as follows:

Extaspnet. accordion accordion = new extaspnet. accordion (); regionleft. items. add (Accordion); accordion. showborder = false; accordion. showheader = false; foreach (xmenu menu in menus) {If (menu. parentmenuid = 0) {extaspnet. accordionpane pane = new extaspnet. accordionpane (); accordion. panes. add (PANE); pane. title = menu. name; pane. showborder = false; extaspnet. TREE tree = new extaspnet. tree (); pane. items. add (tree); tree. showborder = false; tree. showheader = false; tree. autoscroll = true; tree. enablearrows = true; resolvemenutree (menus, menu. ID, tree. nodes );}}
 

Create the accordion control using all the top-level menus (menu. parentmenuid = 0), and then create the child control-tree in accordionpane from the following menu levels.

In the next chapter, we use the Grid Control to complete the "menu management" module, including crud ).

Download all source code