一个很简单的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 " } }; } // / <summary> /// 通过父节点读取子节点并且拼接成xml给前台 /// </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:\\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 >
< form id ="form1" runat ="server" >
< input type ="button" value ="text" onclick ="LoadXml(0)" />
< div id ="root" >
</ div >
</ form >
</ body >

 

 

 

前台代码：

1 < script type = " text/javascript " >
2
3
4 var object1 = null ;
5 function LoadXml(id) {
6 $.ajax({
7 type: " post " ,
8 url: " WebForm1.aspx?parentID= " + id,
9 dataType: " xml " ,
10 success: createTree
11
12 });
13
14 }
15
16 // 思路是每个父节点产生一个ul孩子并且ajax读取该父亲的直接儿子，拼接树
17   function createTree(xml) {
18 var obj = object1 == null ? ( " #root " ) : (object1); // 判断是不是第一次加载，如果第一次加载则是最外的div的id,否则是父节点
19   $(obj).append( " <UL class='ULfather' > " ); // 添加ul对象
20  
21 $(xml).find( " value " ).each( function () { // 从xml里读出所有value节点信息，得到当前层次节点
22   // 拼接<li>和<a>,属性通过xml中的value节点的属性id和节点文本进行拼接
23   $(obj).children( " .ULfather " ).append( " <li><a id= " + $( this ).attr( " id " ) + " > " + $( this ).text() + " </a></li> " );
24
25 var alink = " # " + $( this ).attr( " id " ); // 得到当前超链接对象
26  
27 $(alink).bind( " click " , function () { // 超连接绑定点击事件
28  
29 if ($(alink + " +ul " ).size() <= 0 ) { // 如果数据已经绑定则无需再次绑定，（如果超链接下个元素是ul的话，说明数据已经绑过）
30   object1 = $(alink).parent( " li " );
31 LoadXml($( this ).attr( " id " ))
32 }
33 else {
34
35 GetDisplayOrNot($(alink));
36 }
37
38 });
39 });
40 }
41
42
43 // 节点显示或影藏
44   function GetDisplayOrNot(obj) {
45 if ($(obj).parent( " li " ).children( " ul " ).is( " :hidden " )) {
46 $(obj).parent( " li " ).children( " ul " ).css( " display " , " block " );
47 }
48 else {
49 $(obj).parent( " li " ).children( " ul " ).css( " display " , " none " );
50 }
51 }
52
53
54
55
56   < / script>

 

 

 

后台：

 

 

 

 

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" }

           };

        }





        /// <summary>

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

        /// </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:\\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;}

    }

}

 

呵呵，一个很菜鸟的无刷新树，只是给大家一点点写树的思路，谢谢！