一個(gè)很簡單的jquery+xml+ajax的無刷新樹結(jié)構(gòu)（無css，后臺(tái)是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() { returnnew 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> /// 通過父節(jié)點(diǎn)讀取子節(jié)點(diǎn)并且拼接成xml給前臺(tái) /// </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;} }}

思路很簡單，后臺(tái)利用xml送往前臺(tái)通過jquery 接收處理拼接ul,li

原理（利用<li>中嵌套<ul>的方式，局部讀取一節(jié)點(diǎn)下的所有直屬子節(jié)點(diǎn)，每次點(diǎn)擊讀取，讀取過的話，

則進(jìn)入GetDisplayOrNot（）方法判斷顯示和隱藏節(jié)點(diǎn)）

html代碼：

前臺(tái)代碼：

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 // 思路是每個(gè)父節(jié)點(diǎn)產(chǎn)生一個(gè)ul孩子并且ajax讀取該父親的直接兒子，拼接樹
17 function createTree(xml) {
18 var obj = object1 ==null? ("#root") : (object1);//判斷是不是第一次加載，如果第一次加載則是最外的div的id,否則是父節(jié)點(diǎn)
19 $(obj).append("<UL class='ULfather' >");//添加ul對(duì)象
20
21 $(xml).find("value").each(function() {//從xml里讀出所有value節(jié)點(diǎn)信息，得到當(dāng)前層次節(jié)點(diǎn)
22 //拼接<li>和<a>,屬性通過xml中的value節(jié)點(diǎn)的屬性id和節(jié)點(diǎn)文本進(jìn)行拼接
23 $(obj).children(".ULfather").append("<li><a id="+ $(this).attr("id") +">"+ $(this).text() +"</a></li>");
24
25 var alink ="#"+ $(this).attr("id"); //得到當(dāng)前超鏈接對(duì)象
26
27 $(alink).bind("click", function() { //超連接綁定點(diǎn)擊事件
28
29 if ($(alink +"+ul").size() <=0) {//如果數(shù)據(jù)已經(jīng)綁定則無需再次綁定，（如果超鏈接下個(gè)元素是ul的話，說明數(shù)據(jù)已經(jīng)綁過）
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 //節(jié)點(diǎn)顯示或影藏
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>

后臺(tái)：

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>
        /// 通過父節(jié)點(diǎn)讀取子節(jié)點(diǎn)并且拼接成xml給前臺(tái)
        /// </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;}
    }
}

呵呵，一個(gè)很菜鳥的無刷新樹，只是給大家一點(diǎn)點(diǎn)寫樹的思路，謝謝！

posted @ 2010-06-01 17:43 逆時(shí)針の風(fēng) 閱讀(1998) 評(píng)論(1) 收藏舉報(bào)

刷新頁面返回頂部

一個(gè)很簡單的jquery+xml+ajax的無刷新樹結(jié)構(gòu)（無css，后臺(tái)是c#）

公告