jQuery 学习第六课 实现一个Ajax的TreeView


Posted in Javascript onMay 17, 2010

最终实现的效果是一个目录文件查看器,如图所示: 
jQuery 学习第六课 实现一个Ajax的TreeView 
其原理是,当用户单击一个目录的时候,将这个目录的路径发送给服务器端,服务器端返回这个目录中的文件和目录信息。在服务器端,定义一个如下的类来表示要传递的文件信息:

public class FileInformation 
{ 
public string FullPath 
{ 
get; set; 
} 
public string Name 
{ 
get; set; 
} 
public string Info 
{ 
get; set; 
} 
public bool IsFolder 
{ 
get; set; 
} 
}

其中FullPath是文件的完整路径,用于获取它的子文件夹/文件用,Name是文件的名字,用于显示,IsFolder是区分这条数据是一个文件还是文件夹,以便用不同的图标来显示,最后一个Info是一些附加信息,在此例中没有用到。根据一个路径获得目录中的文件信息的C#代码很简单,顺便就贴在这里:
public class FileManager 
{ 
public static List<FileInformation> GetFolderContent(string fullpath) 
{ 
List<FileInformation> res = new List<FileInformation>(); 
DirectoryInfo info = new DirectoryInfo(fullpath); 
if (info.Exists) 
{ 
foreach (DirectoryInfo d in info.GetDirectories()) 
{ 
res.Add(new FileInformation 
{ 
FullPath = d.FullName, Name = d.Name,IsFolder = true, 
Info = "Any More Information goes here" 
}); 
} 
foreach (FileInfo f in info.GetFiles()) 
{ 
res.Add(new FileInformation 
{ 
FullPath = f.FullName,Name = f.Name,IsFolder = false, 
Info = "Any More Information goes here" 
}); 
} 
} 
return res; 
} 
}

此例中采用JSON数据的格式来传递这些信息。因此要将这些数据序列化。在.Net 3.5中,有现成的将实体类序列化成JSON数据的类,使用方法如下
public static string ToJson<T>(T obj) 
{ 
DataContractJsonSerializer d = new DataContractJsonSerializer(typeof(T)); 
System.IO.MemoryStream ms = new System.IO.MemoryStream(); 
d.WriteObject(ms, obj); 
string strJSON = System.Text.Encoding.UTF8.GetString(ms.ToArray()); 
ms.Close(); 
return strJSON; 
}

如果是.net 2.0,则可以寻找一些第三方的组件,自己写一个也不麻烦。
至此,服务器端的主要工作已经完成了。新建一个Genric Handler文件,filelist.ashx,代码如下,简单的响应下请求,输出数据即可:
public class FileList : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
string path = context.Request.QueryString["path"]; 
string data = JsonHelper.ToJson<List<FileInformation>>(FileManager.GetFolderContent(path)); 
context.Response.Write(data); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

下面考虑客户端html代码的编写。最主要的就是两个事件,也就是鼠标点击发送ajax请求,处理返回的json数据生成html代码,鼠标再次点击将html代码清空。在这里,采用ul li来显示这个treeview,在li中有一个不可见的span,里面包含了文件完整的路径,它将用作发起ajax请求的参数,但是对用户是不可见的。
HTML代码很简单,就4行:
<body> 
<ul> 
</ul> 
</body>

首先需要初始化一个根目录,例如D:,代码如下:
$(function() { 
$('<li class="folder">D:\\<span class="fullpath">D:\\</span></li>').appendTo('ul'); 
$('li').hover(function() { 
$(this).css('cursor', 'pointer'); 
}, 
function() { $(this).css('cursor', 'default'); }); 
$('li.folder').toggle(LoadFile, CloseFolder); 
});

构造好一个li结点,添加到ul中去,然后设置下鼠标动作的样式,最后为其绑定事件处理程序,LoadFile和CloseFolder。
function LoadFile(event) { 
if (this == event.target) { 
var path = $(this).find('span').html(); 
var node = $('<ul>'); 
$(this).append(node); 
$.getJSON('filelist.ashx', { path: path }, function(data) { 
$.each(data, function() { 
if (this.IsFolder) { 
node.append($('<li>').addClass('folder').html(this.Name).append($('<span>').addClass('fullpath').html(this.FullPath))); 
} 
else { 
node.append($('<li>').addClass('file').html(this.Name).append($('<span>').addClass('fullpath').html(this.FullPath))); 
} 
}); 
node.find('li.folder').toggle(LoadFile, CloseFolder); 
}); 
} 
}

首先要判断event的target和this是否是同一个对象,以避免点击子节点事件浮升的时候造成多次触发。首先利用find和html函数获得完整的路径。构造好一个ul节点并把它添加到当前的li中。此时ul是空的,接下来发起ajax请求,获得服务器端的数据。对每条数据生成一个li,其中对于是否是目录加以判断,生成带有不同class的li,再加到node中。最后,不要忘记为新增的节点也绑定事件处理程序。代码还是比较简单的,至于关闭目录节点的代码就更加简单了,
function CloseFolder(event) { 
if (this == event.target) 
$(this).find('ul').remove(); 
}

至此此范例已经完成了。还少了几句css,不再列出。
这个例子实现的功能和样式都比较粗糙,不过在此基础上做更多的扩展和美化已经不是难事。例如可以加上一点现成的动画效果:
function CloseFolder(event) { 
if (this == event.target) { 
var node = $(this).find('ul'); 
node.hide('slow', function() { $(this).find('ul').remove(); }); 
} 
}

先隐藏,再删除。类似地,可以加载完毕后立刻隐藏,再淡出。
Javascript 相关文章推荐
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 #Javascript
jQuery实现的立体文字渐变效果
May 17 #Javascript
jQuery实现的类flash菜单效果代码
May 17 #Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 #Javascript
JQuery select标签操作代码段
May 16 #Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JavaScript版代码高亮
2006/06/26 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python实现计算倒数的方法
2015/07/11 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python批量下载抖音视频
2019/06/17 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
测量实习生自我鉴定
2013/09/19 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
读书心得体会
2013/12/28 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
诉前财产保全担保书
2014/05/20 职场文书
党性分析自查总结
2014/10/14 职场文书
2015元旦感言
2015/12/09 职场文书
六年级作文之预言作文
2019/10/25 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
小程序自定义轮播图圆点组件
2022/06/25 Javascript