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 八进制转义字符(8进制)
Apr 08 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jQuery动画与特效详解
Feb 01 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
使用PHP模拟HTTP认证
2006/10/09 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
企业统计员岗位职责
2013/12/13 职场文书
企业消防安全制度
2014/02/02 职场文书
集体婚礼策划方案
2014/02/22 职场文书
感恩寄语大全
2014/04/11 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
军训后的感想
2015/08/07 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
晚会开幕词范文
2016/03/04 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技