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

本文实例讲解了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异步加载实例分享给大家，希望对大家学习异步加载技术有所帮助。