Heim > Artikel > Web-Frontend > jquery zTree asynchrones Laden einfaches Beispiel erklärt_jquery

jquery zTree asynchrones Laden einfaches Beispiel erklärt_jquery

WBOYOriginal: 2016-05-16 15:13:421102Durchsuche

Das Beispiel in diesem Artikel erklärt das asynchrone Laden von jquery zTree und wird als Referenz für alle freigegeben. Der spezifische Inhalt ist wie folgt

Die Servlet-Konfiguration in web.xml lautet wie folgt:

<&#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>

JSP-Seite:

<!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>

Aktionscode:

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'}]"); 
  } 
 
}

Das Obige ist ein Beispiel für das asynchrone Laden von jquery zTree, das mit allen geteilt wird. Ich hoffe, es wird für alle hilfreich sein, die Technologie des asynchronen Ladens zu erlernen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das JQuery-Formular ruft Inhalte ab und bindet data_javascript-FähigkeitenNächster Artikel：Das JQuery-Formular ruft Inhalte ab und bindet data_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen