recherche

Maison >interface Web >js tutoriel >jquery zTree chargement asynchrone exemple simple explication_jquery

jquery zTree chargement asynchrone exemple simple explication_jquery

WBOY
WBOYoriginal
2016-05-16 15:13:421176parcourir

L'exemple de cet article explique le chargement asynchrone de jquery zTree et est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

La configuration du Servlet dans web.xml est la suivante : 

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<web-app version="2.4"  
  xmlns="http://java.sun.com/xml/ns/j2ee"  
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee  
  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
   
   
  <servlet> 
    <servlet-name>getDataServlet</servlet-name>;  
    <servlet-class>testTree.TestTree</servlet-class>;  
  </servlet> 
   
  <servlet-mapping> 
  <servlet-name>getDataServlet</servlet-name>;  
  <url-pattern>/getData</url-pattern>;  
  </servlet-mapping> 
 
</web-app>

Page JSP : 

<!DOCTYPE html> 
<HTML> 
<HEAD> 
  <TITLE> ZTREE DEMO - Simple Data</TITLE> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <link rel="stylesheet" href="css/demo.css" type="text/css"> 
  <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> 
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
  <script type="text/javascript" src="js/jquery.ztree.core-3.2.js"></script> 
  <script type="text/javascript" src="js/jquery.ztree.excheck-3.2.js"></script> 
  <script type="text/javascript" src="js/jquery.ztree.exedit-3.2.js"></script> 
  <SCRIPT type="text/javascript"> 
    <!-- 
    var setting = { 
      data: { 
        simpleData: { 
          enable: true 
        } 
      } 
      ,async: { 
        enable: true, 
        url:"/testJQuery/getData", 
        autoParam:["id", "name"], 
        otherParam:{"otherParam":"zTreeAsyncTest"}, 
        dataFilter: filter 
      } 
    }; 
    function filter(treeId, parentNode, childNodes) { 
      if (!childNodes) return null; 
      for (var i=0, l=childNodes.length; i<l; i++) { 
        childNodes[i].name = childNodes[i].name.replace('',''); 
      } 
      return childNodes; 
    } 
    var zNodes =[ 
      { id:1, pId:0, name:"parentNode 1", open:true}, 
      { id:11, pId:1, name:"parentNode 11"}, 
      { id:111, pId:11, name:"leafNode 111"}, 
      { id:112, pId:11, name:"leafNode 112"}, 
      { id:113, pId:11, name:"leafNode 113"}, 
      { id:114, pId:11, name:"leafNode 114"}, 
      { id:12, pId:1, name:"parentNode 12"}, 
      { id:121, pId:12, name:"leafNode 121"}, 
      { id:122, pId:12, name:"leafNode 122"}, 
      { id:123, pId:12, name:"leafNode 123"}, 
      { id:13, pId:1, name:"parentNode 13", isParent:true}, 
      { id:2, pId:0, name:"parentNode 2", isParent:true} 
    ]; 
 
    $(document).ready(function(){ 
      $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
    }); 
    //--> 
  </SCRIPT> 
 </HEAD> 
 
<BODY> 
<h1>最简单的树 -- 简单 JSON 数据</h1> 
<h6>[ 文件路径: core/simpleData.html ]</h6> 
<div class="content_wrap"> 
  <div class="zTreeDemoBackground left"> 
    <ul id="treeDemo" class="ztree"></ul> 
  </div> 
</div> 
</BODY> 
</HTML>

Code d'action : 

public class TestTree extends HttpServlet { 
 
  @Override 
  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
//   System.out.println("--------doGet--------"); 
    this.doPost(request, response); 
  } 
 
  @Override 
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
//   System.out.println("--------doPost--------"); 
    String id = request.getParameter("id"); 
    String name = request.getParameter("name"); 
    String level = request.getParameter("level"); 
    String otherParam = request.getParameter("otherParam"); 
    System.out.println(id + "|" + name + "|" + level + "|" + otherParam); 
     
    JSONObject json = new JSONObject(); 
    List<HashMap<String,Object>> list = new ArrayList<HashMap<String,Object>>(); 
     
    for(int i = 0; i < 5; i++){ 
      HashMap<String,Object> hm = new HashMap<String,Object>();  //最外层，父节点       
      hm.put("id", id + i);//id属性 ，数据传递  
      hm.put("name", id + i); //name属性，显示节点名称  
      hm.put("pId", id); 
       
      list.add(hm); 
    } 
     
    JSONArray arr = new JSONArray(list); 
    json.put("success", true); 
    json.put("arr", arr); 
     
    System.out.println("--------json------" + json.toString()); 
    response.getWriter().write(arr.toString()); 
//   response.getWriter().write(json.toString()); 
//   response.getWriter().write("[{pId:'2',name:'20',id:'20'}]"); 
  } 
 
}

Ce qui précède est un exemple de chargement asynchrone jquery zTree partagé avec tout le monde. J'espère qu'il sera utile pour tout le monde d'apprendre la technologie de chargement asynchrone.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le formulaire jquery obtient le contenu et lie les compétences data_javascriptArticle suivant：Le formulaire jquery obtient le contenu et lie les compétences data_javascript

Articles Liés

Voir plus