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


Posted in Javascript onJune 02, 2010
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>

前台代码:
<script type="text/javascript"> 
var object1 = null; 
function LoadXml(id) { 
$.ajax({ 
type: " 
post ", 
url:" 
WebForm1.aspx ? parentID = "+id, 
dataType:" 
xml ", 
success: createTree 
}); 
} 
// 思路是每个父节点产生一个ul孩子并且ajax读取该父亲的直接儿子,拼接树 
function createTree(xml) { 
var obj = object1 == null ? ("#root ") : (object1);//判断是不是第一次加载,如果第一次加载则是最外的div的id,否则是父节点 
$(obj).append(" < UL class = 'ULfather' > ");//添加ul对象 
$(xml).find(" 
value ").each(function() {//从xml里读出所有value节点信息,得到当前层次节点 
//拼接<li>和<a>,属性通过xml中的value节点的属性id和节点文本进行拼接 
$(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) {//如果数据已经绑定则无需再次绑定,(如果超链接下个元素是ul的话,说明数据已经绑过) 
object1 = $(alink).parent(" 
li "); 
LoadXml($(this).attr(" 
id ")) 
} 
else { 
GetDisplayOrNot($(alink)); 
} 
}); 
}); 
} 
//节点显示或影藏 
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> 
/// 通过父节点读取子节点并且拼接成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;} 
} 
}
Javascript 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
js倒计时简单实现代码
Aug 11 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
JQuery index()方法使用代码
Jun 02 #Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 #Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 #Javascript
一些经常会用到的Javascript检测函数
May 31 #Javascript
jquery URL参数判断,确定菜单样式
May 31 #Javascript
javascript 全等号运算符使用说明
May 31 #Javascript
js的逻辑运算符 ||
May 31 #Javascript
You might like
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
js实现小时钟效果
2020/03/25 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
python实现学生管理系统
2018/01/11 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python 进程池pool使用详解
2020/10/15 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
个人素质的自我评价分享
2013/12/16 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
小区停车场管理制度
2014/01/27 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android