This article is mainly on the implementation of the Easyui tree+asp.net tree or directory tree navigation Simple examples are introduced, the need for friends can come to the reference, I hope to help you.
Code as follows: <%@ Page language= "C #" autoeventwireup= "true" codefile= "Main.aspx.cs" inherits= "Manage_main"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title> website Background General management system, <%=ADMINNAME%>, Hello! </title> <link href= "css/default.css" rel= "stylesheet" type= "Text/css"/> <!- -easyui--> <link rel= "stylesheet" type= "Text/css" href= "Easyui/themes/default/easyui.css"/> & nbsp <link rel= "stylesheet" type= "Text/css" href= "Easyui/themes/default/tree.css"/> <link rel = "stylesheet" type= "Text/css" href= "Easyui/themes/icon.css"/> <script type= "Text/javascript" src= "Easyui/jquery-1.8.0.min.js" >≪/script> <script type= "Text/javascript" src= "Easyui/jquery.easyui.min.js" ></script> <script type= "Text/javascript" src= ' easyui/jqloader.js ' > </script> <script Type= "Text/javascript" src= ' easyui/outlook.js ' > </script> <script type= "Text/javascript" > $ (function () { $ (' #lefttree '). Tree ({ &N Bsp Animate:true, checkbox: False URL: ' gettreedatafromdb.ashx?father=0 ', &NBS P onclick:function (node) { &NBS P if (node.attributes!= "") { AD Dtab (Node.text, Node.attributes, Node.id); & nbsp }, onloadsuccess:function (node, data) { &NB Sp $ (' #lefttree '). Show (); ( }); $ (' #loginOut '). Click (function () { &NB Sp $.messager.confirm (' System prompt ', ' Are you sure you want to exit this login? ') function (r) { & nbsp if (R) { LOCATION.HREF = ' Loginexit.ashx '; & nbsp }); &NBSP }) }); </script> </head> <body class= "easyui-layout" style= "overflow-y : Hidden " scroll=" no "> <form id=" Form1 "runat=" Server "> <NOSCRIPT> ; <div style= "Position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; Background:white; Text-align:center; " > <img src= "images/noscript.gif" alt= ' Sorry, please open script support! '/> </div> </noscript> <div region= "North" split= "true" Borde R= "false" style= "Overflow:hidden; height:60px; Background:url (images/layout-browser-hd-bg.gif) #7f99be repeat-x Center 50%; Line-height:20px;color: #fff; Font-family:verdana, Microsoft Black, bold "> <div style=" float:right;padding-top:5px; Padding-right:20px;text-align:right; " > <span class= "Head" >   </span> <div style= "margin-top:6px" class= "Head" > <span class= "icon Icon-quit" > </span><a href= "#" id= "loginout" > Safe exit </a> </div> </div> <span style= "padding-left:10px; font-size:16px; "><img src=" Images/blocks.gif "width=" height= "align=" Absmiddle "/>" website background general management system V1.0</span> </ div> <div region= "South" split= "true" style= "height:30px; Background: #D2E0F2; "> <div class=" footer "> website Background general management system <%=ADMINNAME%> Copyright @2012</div> </div> <div region= "West" hide= "true" split= "Tru" E "title=" navigation menu "style=" width:180px "id=" West "> <div id=" nav "class=" easyui-accordion " Fit= "true" border= "false" > <!-- NavigationRong--> <div id= "Lefttree" style= "margin:5px" ></div> </div> </div> <div I D= "Mainpanle" region= "center" style= "background: #eee; Overflow-y:hidden "> <div id=" tabs "class=" Easyui-tabs " fit=" true "border=" false "> <div title=" Welcome to use "style=" Padding:20px;overflow:hidden; "> <span style=" font-size:18px; > welcome into the system </span> </div> </div> </div> &NB Sp <div id= "MM" class= "Easyui-menu" style= "width:150px" > <div id= "mm-tabupdate" > Refresh </div> <div class= "Me Nu-sep "></div> <div id=" Mm-tabclose "> off </div> & nbsp <div id= "Mm-tabcloseall" > All closed </div> <div id= "Mm-tabcloseother" > All but close </div> <div CLA ss= "Menu-sep" ></div> <div id= "Mm-tabcloseright" > all the right of the current page off </div> <div id= "mm-tabcloseleft" > Current page left all off </div> <div CLA ss= "Menu-sep" ></div> <div id= "Mm-exit" > Exit </div> & lt;/div> </form> </body> </html> Copy code code as follows: <%@ webhandler language= "C # "class=" Gettreedatafromdb "%> using System; Using System.Web; Using System.Configuration; Using System.Data; Using System.Text; Using System.Collections.Generic; Add using System.Web.Script.Serialization; public class Gettreedatafromdb:ihttphandler { public void ProcessRequest (HttpContext context ) { the context. ResponsE.contenttype = "Text/plain"; //Get the classified data in the database String Fatherid = context. Request.querystring["Father"]; DataTable dt = Createdt (); String json = gettreejsonbytable (dt, "module_id", "Module_name", "Module_url", "Module_ Fatherid "," 0 "); context. Response.Write (JSON); context. Response.End (); { #region generated Easyui tree JSON structure ST on DataTable Ringbuilder result = new StringBuilder (); StringBuilder sb = new StringBuilder (); ///<summary> ///Easyui tree JSON structure ///</based on DataTable summary> ///<param name= "tabel" > Data source </param> ///<param name= "Idcol" > ID column </param> ///<param name= "Txtcol" >text column </param> ///<param name= URL > node url</param> ///<param name= "RelA" > Relationship field </param> ///<param name= "PId" > Parent id</param> private string Gettreejsonbytable (DataTable tabel, String idcol, String txtcol, String url, String rela, Object pId) {&nbs P result. Append (sb.) ToString ()); SB. Clear (); if (tabel. Rows.Count > 0) { SB. Append ("["); string filer = string. Format ("{0}= ' {1} '", RelA, PId); datarow[] rows = tabel. Select (filer); if rows. Length > 0) { foreach (DataRow row in rows) &NBSP { SB. Append ("{" id ":" "+ Row[idcol] +" "," Text ":" "+ Row[txtcol] +" "," Attributes ":" "+ Row[url] +" "," state ":" Open "); if (tabel. Select (String. Format ("{0}= ' {1} '", RelA, Row[idcol])). Length > 0) { SB. Append ("," Children ":"); gettreejsonbytable (tabel, Idcol, Txtco L,url, RelA, Row[idcol]); result. Append (sb.) ToString ()); SB. Clear (); { &NBSP; result. Append (sb.) ToString ()); SB. Clear (); SB. Append ("},"); SB = sb. Remove (sb.) Length-1, 1); SB. Append ("]"); result. Append (sb.) ToString ()); SB. Clear (); } return result. ToString (); } #endregion #region Create data protected static Dat ATable Createdt () { DataTable dt = new DataTable (); Dt. Columns.Add ("module_id"); DT. Columns. ADD ("Module_name"); DT. Columns.Add ("Module_fatherid"); DT. Columns.Add ("Module_url"); DT. Columns.Add ("Module_order"); DT. Rows.Add ("C1", "national", "0", "1.aspx", "1"); DT. Rows.Add ("M01", "Guangdong", "C1", "2.aspx", "1"); DT. Rows.Add ("M0101", "Shenzhen", "M01", "3.aspx", "100"); DT. Rows.Add ("M010101", "Nanshan District", "M0101", "4.aspx", "1000"); DT. Rows.Add ("M010102", "Luohu District", "M0101", "", "1001"); DT. Rows.Add ("M010103", "Futian District", "M0101", "", "1002"); DT. Rows.Add ("M010104", "Baoan District", "M0101", "", "1003"); DT. Rows.Add ("M010105", "Longgang District", "M0101", "", "1004"); DT. Rows.Add ("M01010301", "on Merlin", "M010103", "", "1002001"); DT. Rows.Add ("M01010302", "Xia Mei")Lin "," M010103 "," "," 1002002 "); DT. Rows.Add ("M01010303", "Che Kung Temple", "M010103", "", "1002003"); DT. Rows.Add ("M01010304", "Bamboo Grove", "M010103", "", "1002004"); DT. Rows.Add ("M01010305", "Gossip Ridge", "M010103", "", "1002005"); DT. Rows.Add ("M01010306", "Huaqiang North", "M010103", "", "1002006"); DT. Rows.Add ("M0102", "Guangzhou", "M01", "", "101"); DT. Rows.Add ("M010201", "Yuexiu District", "M0102", "", "1105"); DT. Rows.Add ("M010202", "Haizhu District", "M0102", "", "1106"); DT. Rows.Add ("M010203", "Tianhe District", "M0102", "", "1107"); DT. Rows.Add ("M010204", "Baiyun District", "M0102", "", "1108"); DT. Rows.Add ("M010205", "Huangpu District", "M0102", "", "1109"); DT. Rows.Add ("M010206", "Liwan District", "M0102", "", "1110"); DT. Rows.Add ("M010207", "Luo Gang area", "M0102 "," "," 1111 "); DT. Rows.Add ("M010208", "South Sandy Area", "M0102", "", "1112"); return DT; } #endregion public bool IsReusable { Get ( return false; &NBS P } } code is as follows: #region generate Easyui trees JSON tree structure String in accordance with DataTable Builder result = new StringBuilder (); StringBuilder sb = new StringBuilder (); ///<summary> ///Easyui tree JSON structure based on DataTable &N Bsp ///</summary> ///<param name= "tabel" > Data source </param> /// <param name= "Idcol" >id columns </param> ///<param name= "Txtcol" >text columns </param> & nbsp ///;p aram name= "url" > node url</param> ///<param name= "RelA" > Relationship field </param> & nbsp ///<param name= "PId" > Parent id</param> private string gettreejsonbytable (DataTable Tabel, String Idcol, String txtcol, String url, String rela, Object pId { &NBSP ; result. Append (sb.) ToString ()); SB. Clear (); if (tabel. Rows.Count > 0) { SB. Append ("["); string filer = string. Format ("{0}= ' {1} '", RelA, PId); datarow[] rows = tabel. Select (filer); if (rows. Length > 0) { foreach (DataRow row in rows) { SB. Append ("{" id ":" "+ Row[idcol] +" "," Text ":" "+ Row[txtcol] +" "," Attributes ":" "+ Row[url] +" ""); if (tabel. Select (String. Format ("{0}= ' {1} '", RelA, Row[idcol])). Length > 0) { //Click to expand &NB Sp SB. Append (", State": "Closed", "children"); gettreejsonbytable (tabel, Idcol , Txtcol,url, RelA, Row[idcol]); result. Append (sb.) ToString ()); SB. Clear (); & nbsp result. Append (sb.) ToString ()); SB. Clear (); SB. Append ("},"); { & nbsp SB = sb. Remove (sb.) Length-1, 1); { SB. Append ("]"); result. Append (sb.) ToString ()); SB. Clear (); { return result. ToString (); &NBsp #endregion Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
