`
allen413
  • 浏览: 95683 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

jQueryAjaxJavaScriptCSSBean 
阅读更多

需求：

   动态加载目录树节点数据。即：树的初始状态为根节点树，当点击其中一个节点时，再从数据库中获取当前节点的子节点。

环境：

   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 = <sp

分享到：
| struts2 标签的使用之二 s:iterator
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics