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>
$(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(); });
}
}
先隐藏，再删除。类似地，可以加载完毕后立刻隐藏，再淡出。
相关推荐
-
jQuery 学习第六课 实现一个Ajax的TreeView
最终实现的效果是一个目录文件查看器,如图所示: 其原理是,当用户单击一个目录的时候,将这个目录的路径发送给服务器端,服务器端返回这个目录中的文件和目录信息.在服务器端,定义一个如下的类来表示要传递的文件信息: 复制代码 代码如下: public class FileInformation { public string FullPath { get; set; } public string Name { get; set; } public string Info { get; set; }
-
jQuery 学习第五课 Ajax 使用说明
jQuery提供了若干个ajax函数,他们大同小异,只是为了处理不同类型的数据而分开来.最简单的是get(url,parameters,callback),这个函数发起一个GET请求,将服务器返回的数据传递给callback处理. 下面的例子实现了当鼠标悬浮在超链接上的时候,就发起一个ajax请求,从服务器端返回关于此超链接的更多介绍的效果.先看服务器端代码,新建一个ajaxload.ashx,仅作为示例,获得查询参数为word的值,并返回: 复制代码 代码如下: <%@ WebHandler
-
jQuery 学习第七课 扩展jQuery的功能 插件开发
jQuery的主体如下: (function(){ --})(); 对于Javascript基础不太好好的人来说比较奇怪.实际上,这个表达式声明了一个匿名函数(第一个括号),然后再执行它(第二个括号).在这个函数中,完成了jQuery一系列方法和对象的定义.第24行很关键, 复制代码 代码如下: jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually
-
jQuery学习笔记之Ajax用法实例详解
本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.
-
使用jquery+iframe做一个ajax上传效果(实例)
html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>利用j
-
jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jQuery,MySQL 和 Ajax创建简单和有吸引力的 Ajax 搜索,这是继<使用jQuery打造一个实用的数据传输模态弹出窗体>第二篇jquery项目实际运用的教程,希望大家在开发项目的时候能够根据自己的实际情况灵活运用 点击搜索默认显示所有的结果 输入A之后显示的搜索结果 输入 p之后显示的
-
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样"write less ,do more".Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力. 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载. 这次通信用的是jquery的jQuery.post(url,[data], [callback],[type
-
jQuery学习心得总结(必看篇)
jQuery 对象 •jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象. •jQuery 对象是 jQuery 独有的. •只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法. •约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $ •jQuery 对象中封装了多个 DOM 对象,同时 jQuery 对象是类数组对象 •数组与类数组对象的区别
-
JQuery 学习技巧总结
一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度.jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建
-
jQuery如何跳转到另一个网页 就这么简单
平时我们在Javaweb的开发的过程中,现在还是大都使用jQuery,毕竟当时红极一时,虽然现在有点跟不上时代了,但毕竟还是很主流的.程序员最爱的一张图. 所以了,今天我们就来说一说如何在jQuery中跳转到另外一个网页HTML. 其实下面我列举的几种方法也不一定都是用jQuery,也有的使用了Javascript的原生的方法,所以也算是前端跳转的一个总结吧. 我们可以利用http的重定向来跳转 window.location.replace("http://www.jb51.net"