Home > Developer > JavaScript
Jquery zTree asynchronous loading simple example, jqueryztree
The examples in this article illustrate jquery zTree asynchronous loading and share it with you 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.exe dit-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>
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> (); // outermost layer, parent node hm. put ("id", id + I); // id attribute, data transmission hm. put ("name", id + I); // name attribute, displaying the node 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 the jquery zTree asynchronous loading instance. I hope it will be helpful for you to learn about the asynchronous loading technology.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
