jquery 树结构 ajax,一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)

一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)

复制代码 代码如下:

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 = "jjjjjjj8"

},

new Product() {

Id = 10,

ParentId = 0,

HasChild = 0,

Name = "yyyyyyyy9"

}

};

} ///

/// 通过父节点读取子节点并且拼接成xml给前台

///

///

public void GetXML(int parentId) {

List 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:\\kissnana.xml");

XmlDocument xdocument = new XmlDocument();

xdocument.Load("d:\\kissnana.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;}

}}

思路很简单，后台利用xml送往前台通过jquery接收处理拼接ul,

li原理(利用 < li > 中嵌套 < ul > 的方式，局部读取一节点下的所有直属子节点，每次点击读取，读取过的话，则进入GetDisplayOrNot()方法判断显示和隐藏节点)html代码： < body >

runat = "server" >

value = "text"

onclick = "LoadXml(0)" / >