一个很简单的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函数的延迟加载实现代码
Oct 11 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
小程序采集录音并上传到后台
Nov 22 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
PHP 变量的定义方法
2010/01/26 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery foreach使用示例
2013/09/12 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python内置模块turtle绘图详解
2017/12/09 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
C#面试题
2016/05/06 面试题
艺术设计专业个人求职信
2014/04/10 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
解放思想演讲稿
2014/09/11 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
廉洁自律证明
2015/06/24 职场文书
js Proxy的原理详解
2021/05/25 Javascript