需求:
动态加载目录树节点数据。即:树的初始状态为根节点树,当点击其中一个节点时,再从数据库中获取当前节点的子节点。
环境:
Struts1+Hibernate3.0+jQuery+treeview
解决方案:
1. 我自己的项目需求是:获取 linux 的 FTP 目录,以动态加载的方式取得该 FTP 上的所有目录及文件生成 js 树,点击文件获取该文件在 FTP 上的路径,目录不能点击。
2. 准备工作:
< link rel = "stylesheet" href = "css/jquery.treeview.css" /> < link rel = "stylesheet" href = "css/screen.css" /> < script src = "js/jquery.js" type = "text/javascript" ></ script > < script src = "js/jquery.cookie.js" type = "text/javascript" ></ script > < script src = "js/jquery.treeview.js" type = "text/javascript" ></ script > <script src="js/jquery.treeview.async.js" type="text/javascript"></script>
|
以上各引用文件可以从网上下载的 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" > < html xmlns = "http://www.w3.org/1999/xhtml" > <%@ include file = "/general/common.jsp" %> < head > <% response.setHeader( "Cache-Control" , "no-cache" ); response.setHeader( "Pragma" , "no-cache" ); response.setDateHeader( "Expires" ,0); %> < link rel = "stylesheet" href = "css/jquery.treeview.css" />
< script src = "javascript/jquery.treeview.js" type = "text/javascript" ></ script > < script src = "javascript/jquery.treeview.async.js" type = "text/javascript" ></ script > < script type = "text/javascript" > $(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 >
< h1 >< bean:message key = "ProgramMediacontent.SourceFileName" /></ h1 > < br /> < br /> < br /> < table align = "center" > < tr align = "left" >
< td width = "60%" valign = "top" > < ul id = "black" class = "filetree treeview-famfamfam" ></ ul > </ td >
< td width = "40%" valign = "bottom" align = "center" > < div class = "content_panel" id = "div_function_panel" > < center > < bean:message key = "Content.ListFile" />< bean:message key = "Colon" bundle = "common" /> < input id = "Path" style = "overflow-x:visible;width:60;" type = "text" ></ input > < br /> < div style = "text-align:center " class = "buttons" > < button type = "button" onclick = "return onSubmit();" >< bean:message key = "Button.OK" bundle = "common" /> </ button > < button type = "button" onclick = "return back2list();" >< bean:message key = "Button.Cancel" bundle = "common" /></ button > </ div > </ center > </ div > </ td >
</ tr > </ table >
< script type = "text/javascript" > 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 如下:
< script type = "text/javascript" > $(document).ready( function () { $( "#black" ).treeview( { url: "source.do" } ) } ); </ script > |
看起来很简单。 <ul> 是要节点生成的位置, id 随便取,与上面 js 一致就行, class 是 treeview 自带的样式(自带了三种)。 Js 中的 url 是 js 树获得数据的数据源,可以是 php 页面、 jsp 页面或者是从后台 action 传递过来的数据。但因为 treeview 是 Jquery 的插件,所以无论哪种方式,传递时都必须用 json 串来通讯。
Struts 中配置数据源与页面关联:
< action path = "/source" scope = "request" type = |