jQuery学习第6课实现Ajax树形视图

最终结果是一个目录文件查看器，如图所示：。

原理是当用户点击一个目录时，目录的路径被发送到服务器，服务器返回目录中的文件和目录信息。在服务器端，如下定义一个类来表示要传输的文件信息：复制代码如下：公共类文件信息{public string完整路径{ get设置；}公共字符串名称{ get设置；}公共字符串Info { get设置；} public bool IsFolder { get设置；}}其中FullPath是获取其子文件夹/文件的文件的完整路径，Name是要显示的文件的名称，IsFolder是区分这个数据是文件还是用不同图标显示的文件夹，最后的Info是一些附加信息，本例不使用。按照一个路径，获取目录中文件信息的C#代码很简单，顺便贴在这里：复制代码的代码如下： public class文件管理器{ public static listfile information get folder content(字符串完整路径){ listfile information RES=new listfile information()；目录信息=新目录信息(完整路径)；if(信息。存在){ foreach(信息中的目录信息d。getdirectory()){ RES . Add(新文件信息{ FullPath=d.FullName，Name=d.Name，IsFolder=true，Info='任何更多信息都在这里' })；} foreach(Info中的FileInfo f)。GetFiles()) { res.Add(新文件信息{ FullPath=f.FullName，Name=f.Name，IsFolder=false，Info='任何更多信息都在这里' })；} }返回res}}在本例中，使用JSON数据格式来传输此信息。因此，数据应该序列化。英寸Net 3.5，有现成的类将实体类序列化为JSON数据，可以使用如下：公共静态字符串to j sont(t obj){ datacontractjsonserializer d=new datacontractjsonserializer(类型为(t))；系统。内存流=新系统。IO . memory stream()；d.WriteObject(ms，obj)；字符串strJSON=System。text . encoding . utf8 . getstring(ms . to array())；克洛斯女士()；返回strJSON}如果是。net 2.0，可以找一些第三方组件，自己写一个也不麻烦。至此，服务器端的主要工作已经完成。用下面的代码创建一个新的Genric Handler文件，filelist.ashx，并简单地响应请求。输出数据：复制代码如下：公共类文件列表： ihttphandler { public void process request(httpcontext context){ string path=context . request . query string[' path ']；字符串数据=JsonHelper。ToJsonListFileInformation(文件管理器。GetFolderContent(路径))；语境。回应.写(数据)；} public bool IsReuse { get { return false；}}}考虑下面客户端html代码的编译。主要事件有两个，即点击鼠标发送ajax请求，处理返回的json数据生成html代码，再次点击鼠标清除html代码。在这种情况下，ul li用于显示此树形视图。li中有一个不可见的范围，其中包含文件的完整路径。它将被用作参数来启动ajax请求，但是用户看不到它。HTML代码很简单，就四行：复制代码如下： body ul /ul /body。首先，需要初始化一个根目录，比如D:代码如下：复制代码如下： $(function(){ $(' Li class=' folder ' d : \ \ span class=' full path ' d :$('li ')。悬停(function() { $(this))。css('光标'，'指针')；}，function() { $(this)。css('光标'，'默认')；});$('li.folder ')。切换(加载文件，关闭文件夹)；});构造一个li节点并将其添加到ul，然后设置鼠标动作样式，最后为其绑定事件处理程序、LoadFile和CloseFolder。

复制代码如下：函数loadfile (event) {if (this==event。target) {var path=$ (this)。查找(' span ')。html()；var node=$(' ul ')；$(这个)。追加(节点)；$.getJSON('filelist.ashx '，{ path: path }，函数(数据){ $。每个(数据，函数(){ if (this。IsFolder) { node.append($('li ')。addClass('文件夹')。html(这个。姓名)。追加($(“span”)。addClass('fullpath ')。html(这个。full path)))；} else { node.append($('li '))。addClass('文件')。html(这个。姓名)。追加($(“span”)。addClass('fullpath ')。html(这个。full path)))；} });node.find('li.folder ')。切换(加载文件，关闭文件夹)；});}}首先要判断事件的目标和本是否为同一个对象，避免点击子节点事件上升时出现多次触发。首先，使用find和html函数获取完整的路径。构造一个ul节点并将其添加到当前li。此时，ul是空的。接下来，启动一个ajax请求来获取服务器端的数据。为每条数据生成一个li，判断是否是目录，生成一个不同类的li，然后添加到节点。最后，不要忘记为新添加的节点绑定事件处理程序。代码相对简单，关闭目录节点的代码更简单。复制代码如下：函数关闭文件夹(事件){if (this==event。target) $ (this)。查找(' ul ')。移除()；}到目前为止，这个例子已经完成。少了几个css的字，不再列出。这个例子的功能和风格比较粗糙，但在此基础上进行更多的拓展和美化并不难。比如可以添加一点现成的动画效果：复制代码如下：函数关闭文件夹(事件){if (this==event。target) {var node=$ (this)。find(' ul ')；node.hide('slow '，function() { $(this)。查找(' ul ')。移除()；});}}删除前隐藏。同样，它可以在加载后立即隐藏，然后淡出。