Ajax动态加载目录树（jquery-treeview）

allen413 · 发表于 2013-2-8 00:01:32

需求：
动态加载目录树节点数据。即：树的初始状态为根节点树，当点击其中一个节点时，再从数据库中获取当前节点的子节点。
环境：
Struts1+Hibernate3.0+jQuery+treeview
解决方案：
1.我自己的项目需求是：获取linux的FTP目录，以动态加载的方式取得该FTP上的所有目录及文件生成js树，点击文件获取该文件在FTP上的路径，目录不能点击。
2.准备工作：

以上各引用文件可以从网上下载的treeview 包里得到，下载地址：http://jquery.bassistance.de/treeview/jquery.treeview.zip。注意js文件的引用顺序，黄色部分是异步加载必须的js文件。具体应用时根据自己情况决定，上面的文件不一定全得有。以下是我的jsp的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ include file="/general/common.jsp" %>

<head>

<%

response.setHeader("Cache-Control","no-cache");

response.setHeader("Pragma","no-cache");

response.setDateHeader("Expires",0);

%>

$(document).ready(function(){

$("#black").treeview({

url: "source.do"

})

});

function returnID(Path)

{

if(Path!="undefined")

document.getElementById("Path").value=Path;

else document.getElementById("Path").value="";

}

</script>

</head>

<body>

<br/>

</td>

<bean:message key="Content.ListFile"/><bean:message key="Colon" bundle="common"/>

<br/>

</div>

</center>

</div>

</td>

</tr>

</table>

function onSubmit()

{

var Path = document.getElementById("Path").value;

var myString = new Array();

myString[0]=Path;

return return2parent(btn.ok,myString);

}

function back2list()

{

return return2parent(btn.back);

}

</script>

</body>

</html>

我自己的公用文件里已经有jquery的js了，所以没有引用treeview自带的文件，jquery.cookie.js说是用来保存树的状态的，但我用后就觉得很不爽。因为我要在父页面选择一个FTP服务器，然后在上面这个dialog页面里显示其目录结构，加上jquery.cookie.js，后无论选择哪个服务器，新弹出的页面中的树总是第一次生成树的内容（这里可能表达的不是很清楚，说白了就是不刷新）。无奈去掉它，再加上jsp页面禁用缓存的经典代码，问题解决。
上面是完整的代码，为了给大家一个整体感觉，但其实生成树所用的代码只有一行：
<ul id="black" class="filetree treeview-famfamfam"></ul>
把标签与treeview连接的js如下：

$(document).ready(function(){

$("#black").treeview({

url: "source.do"

})

});

</script>

看起来很简单。<ul>是要节点生成的位置，id随便取，与上面js一致就行，class是treeview自带的样式（自带了三种）。Js中的url是js树获得数据的数据源，可以是php页面、jsp页面或者是从后台action传递过来的数据。但因为treeview是Jquery的插件，所以无论哪种方式，传递时都必须用json串来通讯。
Struts中配置数据源与页面关联：

[table][tr][td=1,1,568]

<action

path="/source"

scope="request"

type=<sp

		自动登录	找回密码
密码			立即注册

Ajax动态加载目录树（jquery-treeview）

浏览过的版块