jquery zTree asynchronous loading simple example explanation

jquery zTree asynchronous loading simple example explanation_jquery

WBOY

Release： 2016-05-16 15:13:42

Original

1155 people have browsed it

The example in this article explains jquery zTree asynchronous loading and is shared with everyone for your reference. The specific content is as follows

The Servlet configuration in web.xml is as follows:

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

Copy after login

JSP page:

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

Copy after login

Action code:

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

Copy after login

The above is a jquery zTree asynchronous loading example shared with everyone. I hope it will be helpful for everyone to learn asynchronous loading technology.