jquery zTree异步加载简单实例讲解

前端技术 2023/08/10 JavaScript

本文实例讲解了jquery zTree异步加载，分享给大家供大家参考，具体内容如下

web.xml中Servlet配置如下：

<?xml version=\"1.0\" encoding=\"UTF-8\"?> 
<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页面：

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

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

以上就是jquery zTree异步加载实例分享给大家，希望对大家学习异步加载技术有所帮助。

本文地址：https://www.stayed.cn/item/808

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案