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