一个很简单的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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js表格分页实现代码
2009/09/18 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
基于python实现微信模板消息
2015/12/21 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python如何实现异步调用函数执行
2019/07/08 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
PyTorch中的Variable变量详解
2020/01/07 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
python网络编程之五子棋游戏
2020/05/14 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
爱国主义演讲稿
2014/05/07 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
社区低保工作总结2015
2015/07/23 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python