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