一個很簡單的jquery+xml+ajax的無刷新樹結(jié)構(無css,后臺是c#)
更新時間:2010年06月02日 03:10:13 作者:
一個很簡單的jquery+xml+ajax的無刷新樹結(jié)構(無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>
/// 通過父節(jié)點讀取子節(jié)點并且拼接成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 > 的方式,局部讀取一節(jié)點下的所有直屬子節(jié)點,每次點擊讀取,讀取過的話,則進入GetDisplayOrNot()方法判斷顯示和隱藏節(jié)點)html代碼: < body > <form id = "form1"
runat = "server" > <input type = "button"
value = "text"
onclick = "LoadXml(0)" / ><div id = "root" > </div>
</form >
</body>
前臺代碼:
復制代碼 代碼如下:
<script type="text/javascript">
var object1 = null;
function LoadXml(id) {
$.ajax({
type: "
post ",
url:"
WebForm1.aspx ? parentID = "+id,
dataType:"
xml ",
success: createTree
});
}
// 思路是每個父節(jié)點產(chǎn)生一個ul孩子并且ajax讀取該父親的直接兒子,拼接樹
function createTree(xml) {
var obj = object1 == null ? ("#root ") : (object1);//判斷是不是第一次加載,如果第一次加載則是最外的div的id,否則是父節(jié)點
$(obj).append(" < UL class = 'ULfather' > ");//添加ul對象
$(xml).find("
value ").each(function() {//從xml里讀出所有value節(jié)點信息,得到當前層次節(jié)點
//拼接<li>和<a>,屬性通過xml中的value節(jié)點的屬性id和節(jié)點文本進行拼接
$(obj).children(".ULfather ").append(" < li > <a id = " + $(this).attr("
id ") + " > " + $(this).text() + " < /a></li > ");
var alink = "#" + $(this).attr("
id "); //得到當前超鏈接對象
$(alink).bind("
click ", function() { //超連接綁定點擊事件
if ($(alink + " + ul ").size() <= 0) {//如果數(shù)據(jù)已經(jīng)綁定則無需再次綁定,(如果超鏈接下個元素是ul的話,說明數(shù)據(jù)已經(jīng)綁過)
object1 = $(alink).parent("
li ");
LoadXml($(this).attr("
id "))
}
else {
GetDisplayOrNot($(alink));
}
});
});
}
//節(jié)點顯示或影藏
function GetDisplayOrNot(obj) {
if ($(obj).parent("
li ").children("
ul ").is(": hidden ")) {
$(obj).parent("
li ").children("
ul ").css("
display ", "
block ");
}
else {
$(obj).parent("
li ").children("
ul ").css("
display ", "
none ");
}
}
</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>
/// 通過父節(jié)點讀取子節(jié)點并且拼接成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;}
}
}
相關文章
jQuery Attributes(屬性)的使用(二、類篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,我將以實例方式進行講述,以簡單,全面為基礎,不會涉及很深,我的學習方法:先入門,后進階!2009-12-12jquery 利用show和hidden實現(xiàn)級聯(lián)菜單示例代碼
級聯(lián)菜單的實現(xiàn)方法有很多,在本文為大家介紹下使用show和hidden輕松實現(xiàn)下級聯(lián)效果,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08jquery 查找select ,并觸發(fā)事件的實現(xiàn)代碼
項目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關鍵代碼,需要的朋友可以參考下。2011-03-03jquery結(jié)合html實現(xiàn)中英文頁面切換
這篇文章主要為大家詳細介紹了jquery結(jié)合html實現(xiàn)中英文頁面切換,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11