Home > Developer > JavaScript
Copy codeThe Code is as follows:
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>
Front-end code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var object1 = null;
Function LoadXml (id ){
$. Ajax ({
Type :"
Post ",
Url :"
WebForm1.aspx? ParentID = "+ id,
DataType :"
Xml ",
Success: createTree
});
}
// The idea is that each parent node generates a ul child and ajax reads the parent's direct son and Concatenates the tree.
Function createTree (xml ){
Var obj = object1 = null? ("# Root"): (object1); // determines whether it is loaded for the first time. If it is loaded for the first time, it is the id of the outermost div; otherwise, it is the parent node.
$ (Obj). append ("<UL class = 'ulfather '>"); // Add ul object
$ (Xml). find ("
Value "). each (function () {// read all value node information from xml to get the current level node
// Concatenates <li> and <a>. attributes are spliced by the attribute id and node text of the value node in xml.
$ (Obj). children (". ULfather"). append ("<li> <a id =" + $ (this). attr ("
Id ") +"> "+ $ (this). text () +" </a> </li> ");
Var alink = "#" + $ (this). attr ("
Id "); // get the current Hyperlink Object
$ (Alink). bind ("
Click ", function () {// superjoin binding click Event
If ($ (alink + "+ ul "). size () <= 0) {// if the data has been bound, you do not need to bind it again. (If the next element of the hyperlink is ul, it indicates that the data has been bound)
Object1 = $ (alink). parent ("
Li ");
LoadXml ($ (this). attr ("
Id "))
}
Else {
GetDisplayOrNot ($ (alink ));
}
});
});
}
// Node display or shadow
Function GetDisplayOrNot (obj ){
If ($ (obj). parent ("
Li "). children ("
Ul "). is (": hidden ")){
$ (Obj). parent ("
Li "). children ("
Ul "developer.css ("
Display ","
Block ");
}
Else {
$ (Obj). parent ("
Li "). children ("
Ul "developer.css ("
Display ","
None ");
}
}
</Script>
Background:
Copy codeThe Code is as follows:
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 ;}
}
}
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
