欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【jQuery 学习第六课 实现一个Ajax的TreeView】，下面是详细的讲解！
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(); });
}
}
先隐藏，再删除。类似地，可以加载完毕后立刻隐藏，再淡出。
关于jQuery 学习第六课 实现一个Ajax的TreeView的用户互动如下：
相关问题：jquery有没有一个按顺序执行ajax的方法
答：首先代码都是按顺序由上往下执行的。 但是ajax方法是个例外。 ajax方法是指一种创建交互式网页应用的网页开发技术。 ajax方法默认是异步执行的，即不管有没返回结果都可以继续往下执行 要想等ajax方法返回结果再执行下面的方法，需要设置为同步a... >>详细
相关问题：jquery ajax从一个网站向另一个网站请求，怎么实现
答：ajax jsonp 就可以了，你百度下很简单的和普通的ajax没区别就多带一个参数 var qsData = "123454"; $.ajax({ url: "jsonp.php", type: "POST", dataType: 'jsonp', jsonp: 'callback', data: qsData, timeout: 2000, success: function (json) {... >>详细
相关问题：jquery ajax从一个网站向另一个网站请求，怎么实现
答：ajax不能跨域，你可以自己写一个后台，通过java跨域访问，然后将数据返回给自己的页面。 这样，你的页面只需要ajax请求自己项目的java方法，来得到其他网站的相关数据。 >>详细
- 【Ajax】jQuery 学习第六课 实现一个Ajax的TreeVi
- 【extjs】extjs每个组件要设置唯一的ID否则会出错
- 【bootstrap3】基于bootstrap3和jquery的分页插件
- 【hover】jQuery控制图片的hover效果（smartRollo
- 【div】div浮层 滚动条移动 位置保持不变的4种方
- 【Cookie】Cookie 小记
- 【arguments】JavaScript的arguments对象应用示例
- 【ECMAScript5】ECMAScript5中的对象存取器属性：
- 【function】JavaScript function 的 length 属性
- 【ExtJs】ExtJs动态生成treepanel的Json格式-tree
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-