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最新动画教程+iso光盘下载
Jan 22 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 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
mysql 全文搜索 技巧
2007/04/27 PHP
php合并js请求的例子
2013/11/01 PHP
浅谈php扩展imagick
2014/06/02 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JavaScript入门基础
2015/08/12 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python深入06——python的内存管理详解
2016/12/07 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Django REST 异常处理详解
2020/07/15 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
兴趣小组活动总结
2014/05/05 职场文书
死亡证明书样本说明
2014/10/18 职场文书
政风行风评议工作总结
2014/10/21 职场文书
旷工检讨书大全
2015/08/15 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript