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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JS原型链怎么理解
Jun 27 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
vue中axios的二次封装实例讲解
Oct 14 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
phpStorm2020 注册码
2020/09/17 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
小程序实现短信登录倒计时
2019/07/12 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python3列表List入门知识附实例
2020/02/09 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
Java如何读取CLOB字段
2013/10/10 面试题
2014新年寄语
2014/01/20 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
话题作文之自信作文
2019/11/15 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
springboot读取resources下文件的方式详解
2022/06/21 Java/Android