一个很简单的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 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Vue异步组件使用详解
Apr 08 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
smarty实例教程
2006/11/19 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
php文档更新介绍
2011/07/22 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
使用python实现BLAST
2018/02/12 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python之生产者消费者模型实现详解
2019/07/27 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
青春无悔演讲稿
2014/05/08 职场文书
2014年共青团工作总结
2014/12/10 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书