jquery zTree異步加載簡單實例講解
更新時間:2016年02月25日 10:30:56 投稿:lijiao
這篇文章主要為大家詳細介紹了jquery zTree異步加載簡單實例,ztree采用了延遲加載技術,上萬節(jié)點輕松加載,即使在 IE6 下也能基本做到秒殺,感興趣的小伙伴們可以參考一下
本文實例講解了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 數(shù)據(jù)</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>(); //最外層,父節(jié)點 hm.put("id", id + i);//id屬性 ,數(shù)據(jù)傳遞 hm.put("name", id + i); //name屬性,顯示節(jié)點名稱 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異步加載實例分享給大家,希望對大家學習異步加載技術有所幫助。
相關文章
10款新鮮出爐的 jQuery 插件(Ajax 插件,有幻燈片、圖片畫廊、菜單等)
這篇文章與大家分享的是10款新鮮出爐的基于 jQuery 開發(fā)的 Ajax 插件,有幻燈片、圖片畫廊、菜單等很多有用的插件。這些作者的想法特別新穎,希望你能從中找到自己需要的插件。2011-06-06jquery實現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了jquery實現(xiàn)Ctrl+Enter提交表單的方法,涉及jquery針對鍵盤按鍵的響應與表單操作相關技巧,非常簡單實用,需要的朋友可以參考下2015-07-07jQuery中slideUp 和 slideDown 的點擊事件
這篇文章主要介紹了jQuery中slideUp 和 slideDown 的點擊事件的相關資料,需要的朋友可以參考下2015-02-02jquery中郵箱地址 URL網(wǎng)站地址正則驗證實例代碼
QQ網(wǎng)站有一個網(wǎng)站舉報的功能,看了一些js代碼覺得寫得很不錯,我就拿下來了,下面是一個email驗證與url網(wǎng)址驗證js代碼,分享給大家2013-09-09jQuery中closest和parents的區(qū)別分析
本文給大家介紹jquery中parents()和closest()用法與區(qū)別介紹,在jquery中parents()查找父級元素刪除的時候,發(fā)現(xiàn)它不包含根元素,于是用了closest(),效果不錯,下面我來給大家具體的介紹一下2015-05-05