No-refreshing tree structure of jquery + xml + ajax
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Data. Linq;
Using System. Xml;
Using System. Xml. Linq;
Namespace WebApplication3 {
Public partial class WebForm1: System. Web. UI. Page {
Protected void Page_Load (object sender, EventArgs e ){
Int id = Convert. ToInt32 (Request ["parentID"]);
GetXML (id );
}
Public IList <Product> GetList (){
Return new List <Product> (){
New Product (){
Id = 1,
ParentId = 0,
HasChild = 1,
Name = "aaaaa"
},
New Product (){
Id = 2,
ParentId = 1,
HasChild = 1,
Name = "bbbb1"
},
New Product (){
Id = 3,
ParentId = 2,
HasChild = 0,
Name = "ccccc2"
},
New Product (){
Id = 4,
ParentId = 2,
HasChild = 0,
Name = "ddddd3"
},
New Product (){
Id = 5,
ParentId = 1,
HasChild = 0,
Name = "eeeeee4"
},
New Product (){
Id = 6,
ParentId = 3,
HasChild = 0,
Name = "ffffff5"
},
New Product (){
Id = 7,
ParentId = 4,
HasChild = 0,
Name = "ggggggg6"
},
New Product (){
Id = 8,
ParentId = 7,
HasChild = 0,
Name = "hhhhhhh7"
},
New Product (){
Id = 9,
ParentId = 0,
HasChild = 0,
Name = "jjjjjj8"
},
New Product (){
Id = 10,
ParentId = 0,
HasChild = 0,
Name = "yyyyyyyy9"
}
};
} // <Summary>
/// Read the child node through the parent node and splice it into xml to the foreground
/// </Summary>
/// <Param name = "parentId"> </param>
Public void GetXML (int parentId ){
List <Product> list = GetList (). Where (x => x. ParentId = parentId). ToList ();
XElement xElement = new XElement ("textTree ");
Foreach (Product p in list ){
XElement. Add (new XElement ("value", new XAttribute ("id", p. Id), p. Name ));
}
XElement. Save ("d: \ kw.ana. xml ");
XmlDocument xdocument = new XmlDocument ();
Xdocument. Load ("d: \ kw.ana. xml ");
Response. ContentType = "text/xml ";
Xdocument. Save (Response. OutputStream );
Response. End ();
}
}
Public class Product {
Public int Id {set; get ;}
Public int ParentId {set; get ;}
Public int HasChild {set; get ;}
Public string Name {set; get ;}
}}
The idea is very simple. the backend uses xml to send it to the front end for processing and splicing ul through jquery,
Li principle (using the <li> nested <ul> method, all directly affiliated subnodes under a node are partially read. If you click to read the subnodes each time, the GetDisplayOrNot () (html code: <body> <form id = "form1"
Runat = "server"> <input type = "button"
Value = "text"
Onclick = "LoadXml (0)"/> <div id = "root"> </div>
</Form>
</Body>
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
