jquery+servlet动态加载树

AJAX加载DTree示例

最新推荐文章于 2023-12-01 14:15:17 发布

原创最新推荐文章于 2023-12-01 14:15:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #jquery #javascript #tree #json #function

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AJAX动态加载DTree插件，并通过Servlet返回JSON格式的数据。此方法适用于简单的系统导航栏实现，提供了简洁且可控的代码示例。

jsp/servlet使用ajax动态加载dtree， dtree样式/图片修改（java 生成dtree servlet json）

（！！！在IE，refreshTree的

getJSON不刷新的问题，参考：http://www.cnblogs.com/kenkofox/archive/2011/04/02/2004101.html）

本来我想使用jsTree或者treeView这种jquery插件的，这些插件虽然功能很强大，但无奈，太花俏了，需要学习的配置很多。

而且对于我的应用来说，并不需要花俏的功能，例如拖拽，双击重命名，右键菜单等。

耗了2天在学习jsTree和treeView，都发现不太适合，索性用最原始的dtree，效果也不错，而且所有代码简单，能够完全掌握在自己控制之下。

废话不说了。在这里分享一下，我用ajax加载dtree的做法，后台servlet提供json格式的tree数据。这个做法应该可以用到做一个系统的导航栏上。

全部代码：ajax，servlet动态加载dtree.rar

HTML：

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


     <
     html
     >
     
    
     <
     head
     >
     
        
     <
     meta 
     http-equiv
     ="Content-Type"
      content
     ="text/html; charset=UTF8"
     >
     
            
     <
     link 
     rel
     ="StyleSheet"
      href
     ="./dtree/dtree.css"
      type
     ="text/css"
      
     />
     
            
     <
     script 
     type
     ="text/javascript"
      src
     ="./dtree/dtree.js"
     ></
     script
     >
     
            
     <
     script 
     type
     ="text/javascript"
      src
     ="./js/jquery-1.5.1.min.js"
     ></
     script
     >
     
            
     <
     script
     >
     

                
     dtreePath 
     =
      
     '
     ./dtree/
     '
     ;    
     //
     我在dtree.js中加了这个变量，便于调整img路径 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//需要设置为dtree目录位置，底下有img目录

                     
     var
      tree;                       
     //
     tree必须为全局变量
     

                 
                $(document).ready(
     function
     (){
                    refreshTree();
                });
                
     /*
     *
                 * 点击菜单的操作，在后台Servlet返回的json数据中设置了url为javascript:showFolder(dir)
                 
     */
     
                
     function
      showFolder(dir) {
                    alert(dir);
                }
                
     function
      refreshTree() {
                    
     //
     生成新的树，ajax方式获取最新tree，每个json item表示一个节点
     

                         $.getJSON(
     '
     OnlineFileManagerServlet
     '
     ,
     function
     (data){
                        tree 
     =
      
     new
      dTree(
     '
     tree
     '
     );   
     //
     参数tree，表示生成的html代码中id的标记，不影响功能
     

                             tree.add(
     0
     ,
     -
     1
     ,
     '
     网络文件夹
     '
     );     
     //
     树根
     

                             
     //
     遍历JSON中的每个entry
     

                             $.each(data,
     function
     (entryIndex,entry){
                            tree.add(entry[
     '
     id
     '
     ], entry[
     '
     pid
     '
     ], entry[
     '
     name
     '
     ], entry[
     '
     url
     '
     ]);
                        });
                        $(
     "
     #treeDiv
     "
     ).html(tree.toString());
                    });
                }
            
     </
     script
     >
     
    
     </
     head
     >
     

    
     <
     body
     >
     

        
     <
     div 
     class
     ="dtree"
     >
     
            
     <
     p
     ><
     a 
     href
     ="javascript: tree.openAll();"
     >
     open all
     </
     a
     >
      | 
     <
     a 
     href
     ="javascript: tree.closeAll();"
     >
     close all
     </
     a
     ></
     p
     >
     
            
     <
     div 
     id
     ="treeDiv"
     >
     
            
     </
     div
     >
     
        
     </
     div
     >
     
    
     </
     body
     >
     


     </
     html
     >

Servlet：（关于json，参考：http://www.cnblogs.com/kenkofox/archive/2011/03/25/1995436.html）

    
         
     protected
      
     void
      processRequest(HttpServletRequest request, HttpServletResponse response)
            
     throws
      ServletException, IOException {
        response.setCharacterEncoding(
     "
     UTF-8
     "
     );
        PrintWriter out 
     =
      response.getWriter();

        
     try
      {
            
     //
     创建json数据
     

                 JSONArray tree 
     =
      
     new
      JSONArray();
            JSONObject node1 
     =
      
     new
      JSONObject();
            node1.put(
     "
     id
     "
     , 
     "
     1
     "
     );
            node1.put(
     "
     pid
     "
     , 
     "
     0
     "
     );
            node1.put(
     "
     name
     "
     , 
     "
     金属产品检验报告
     "
     );
            node1.put(
     "
     url
     "
     , 
     "
     javascript:showFolder('
     "
      
     +
      
     "
     abc
     "
      
     +
      
     "
     ')
     "
     );
            JSONObject node2 
     =
      
     new
      JSONObject();
            node2.put(
     "
     id
     "
     , 
     "
     2
     "
     );
            node2.put(
     "
     pid
     "
     , 
     "
     0
     "
     );
            node2.put(
     "
     name
     "
     , 
     "
     塑料产品检验报告
     "
     );
            node2.put(
     "
     url
     "
     , 
     "
     javascript:showFolder('
     "
      
     +
      
     "
     abc
     "
      
     +
      
     "
     ')
     "
     );
            JSONObject node3 
     =
      
     new
      JSONObject();
            node3.put(
     "
     id
     "
     , 
     "
     3
     "
     );
            node3.put(
     "
     pid
     "
     , 
     "
     1
     "
     );
            node3.put(
     "
     name
     "
     , 
     "
     阳江海关检验报告
     "
     );
            node3.put(
     "
     url
     "
     , 
     "
     javascript:showFolder('
     "
      
     +
      
     "
     abc
     "
      
     +
      
     "
     ')
     "
     );
            JSONObject node4 
     =
      
     new
      JSONObject();
            node4.put(
     "
     id
     "
     , 
     "
     4
     "
     );
            node4.put(
     "
     pid
     "
     , 
     "
     3
     "
     );
            node4.put(
     "
     name
     "
     , 
     "
     检验报告abc
     "
     );
            node4.put(
     "
     url
     "
     , 
     "
     javascript:showFolder('
     "
      
     +
      
     "
     abc
     "
      
     +
      
     "
     ')
     "
     );
            JSONObject node5 
     =
      
     new
      JSONObject();
            node5.put(
     "
     id
     "
     , 
     "
     5
     "
     );
            node5.put(
     "
     pid
     "
     , 
     "
     2
     "
     );
            node5.put(
     "
     name
     "
     , 
     "
     检验报告2
     "
     );
            node5.put(
     "
     url
     "
     , 
     "
     javascript:showFolder('
     "
      
     +
      
     "
     abc
     "
      
     +
      
     "
     ')
     "
     );

            tree.put(node1);
            tree.put(node2);
            tree.put(node3);
            tree.put(node4);
            tree.put(node5);

            out.write(tree.toString());
            System.out.println(tree.toString());
        } 
     catch
      (JSONException ex) {
            Logger.getLogger(OnlineFileManagerServlet.
     class
     .getName()).log(Level.SEVERE, 
     null
     , ex);
        } 
     finally
      {
            out.close();
        }
    }