jQuery異步生成樹

這個樹是用zTree這個插件搞定的!代碼如下
頁面代碼:
Jsp代碼 
<%@ page language="java"  pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
    <title>jQuery Tree </title>  
      
    <link rel="stylesheet" href="zTree/demoStyle/demo.css" type="text/css">  
    <link rel="stylesheet" href="zTree/zTreeStyle/zTreeStyle.css" type="text/css">  
    <script type="text/javascript" src="zTree/jquery-1.4.2.js"></script>  
    <script type="text/javascript" src="zTree/jquery.ztree-2.6.js"></script>  
      
    <SCRIPT LANGUAGE="JavaScript">  
        var zTree1;  
        var setting  = {  
            checkable: false,  
            async: true,  
            asyncUrl: "Tree",                               //獲取節點數據的URL地址  
            asyncParam: ["name", "id"],             //獲取節點數據時,必須的數據名稱,例如:id、name  
            asyncParamOther: ["test","true"] ,      //其它參數 ( key, value 鍵值對格式)  
            callback : {  
                click: function (event, treeId, treeNode){  
                     // zTree1.expandNode(treeNode, true, false);  
                } ,  
                expand : function (event, treeId, treeNode){  
                },  
                collapse:function (event, treeId, treeNode){  
                }  
            }   
        };  
        function refreshTree() {   
            zTree1 = $("#treeDemo").zTree(setting );  
        }       
        $(document).ready(function(){  
            refreshTree();  
        });  
  </SCRIPT>  
 </HEAD>  
<BODY>  
            <ul id="treeDemo" class="tree" style="height:500px;width:300px;"></ul>  
 </BODY>  
</HTML> 

<%@ page language="java"  pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>jQuery Tree </title>
   
    <link rel="stylesheet" href="zTree/demoStyle/demo.css" type="text/css">
   <link rel="stylesheet" href="zTree/zTreeStyle/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="zTree/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="zTree/jquery.ztree-2.6.js"></script>
   
    <SCRIPT LANGUAGE="JavaScript">
  var zTree1;
  var setting  = {
   checkable: false,
   async: true,
   asyncUrl: "Tree",          //獲取節點數據的URL地址
   asyncParam: ["name", "id"],         //獲取節點數據時,必須的數據名稱,例如:id、name
   asyncParamOther: ["test","true"] ,   //其它參數 ( key, value 鍵值對格式)
   callback : {
         click: function (event, treeId, treeNode){
           // zTree1.expandNode(treeNode, true, false);
         } ,
         expand : function (event, treeId, treeNode){
         },
         collapse:function (event, treeId, treeNode){
         }
      }
  };
  function refreshTree() {
   zTree1 = $("#treeDemo").zTree(setting );
  }    
  $(document).ready(function(){
   refreshTree();
  });
  </SCRIPT>
 </HEAD>
<BODY>
   <ul id="treeDemo" class="tree" style="height:500px;width:300px;"></ul>
 </BODY>
</HTML>

 

java代碼:
Java代碼 
package com;  
 
import java.io.IOException;  
import java.io.PrintWriter;  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
 
@SuppressWarnings("serial")  
public class Tree extends HttpServlet {  
    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        this.doPost(request, response);  
    }  
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
       try {  
            String pId      = request.getParameter("id");  
            String pName    = request.getParameter("name");  
            //延遲,讓loading 顯示出來  
            for (int i = 0; i < 9999; i++) { }  
              
              
            //構造數據,可以從數據庫中查詢  
            String str = "[" ;  
            if (pId == null  || pName == null){  
                pId = "0";  
                pName = "";  
                str  += "{'id':'root','name':'根節點','icon':'"+request.getContextPath()+"/zTree/logout.jpg','isParent':true},";   
            }else {  
                for (int i = 1; i < 3 ; i++) {  
                    String nId      = pId + i;  
                    String nName  =  nId;  
                    str  += "{'id':'"+nId + "','name':'"+nName + "','icon':''" + ",'isParent':" + (i % 2 == 0 ? false:true) + "},";   
                }                      
            }  
            str = str.substring(0,str.length()-1) + "]";  
            reponse(request,response,str );  
       } catch (Exception e) {  
           e.printStackTrace();  
       }  
    }  
      
    public void reponse(HttpServletRequest request, HttpServletResponse response,Object msg) throws Exception{  
        response.setContentType("text/plain");  
        response.setCharacterEncoding("UTF-8");  
        PrintWriter out = response.getWriter();  
        out.write(msg.toString());  
        out.flush();  
        out.close();  
    }  

package com;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class Tree extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  this.doPost(request, response);
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
    try {
      String pId   = request.getParameter("id");
   String pName  = request.getParameter("name");
   //延遲,讓loading 顯示出來
   for (int i = 0; i < 9999; i++) { }
   
   
   //構造數據,可以從數據庫中查詢
   String str = "[" ;
   if (pId == null  || pName == null){
    pId = "0";
    pName = "";
    str  += "{'id':'root','name':'根節點','icon':'"+request.getContextPath()+"/zTree/logout.jpg','isParent':true},";
   }else {
    for (int i = 1; i < 3 ; i++) {
     String nId   = pId + i;
     String nName  =  nId;
     str  += "{'id':'"+nId + "','name':'"+nName + "','icon':''" + ",'isParent':" + (i % 2 == 0 ? false:true) + "},";
    }     
   }
   str = str.substring(0,str.length()-1) + "]";
      reponse(request,response,str );
    } catch (Exception e) {
     e.printStackTrace();
    }
 }
 
 public void reponse(HttpServletRequest request, HttpServletResponse response,Object msg) throws Exception{
  response.setContentType("text/plain");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  out.write(msg.toString());
  out.flush();
  out.close();
 }
}


這篇博客是因為以為網友提出的,所以就做瞭這個demo,這個也是根據zTree例子中的一個改寫的,同志們如果這個插件感興趣,可以仔細閱讀源碼、例子和api文檔!

作者“80後的辛酸”

You May Also Like