一个很简单的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 判断undefined的实现代码
Nov 26 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
详解vue项目打包步骤
Mar 29 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php自动加载机制的深入分析
2013/06/08 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
Python实现数据库编程方法详解
2015/06/09 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
利用Python如何生成便签图片详解
2018/07/09 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python读文件的步骤
2019/10/08 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
新学期红领巾广播稿
2014/10/04 职场文书