異步加載 tree，點一下節點，就發一下請求到后台，然后顯示出得到的當前層級節點
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <script type="text/javascript" src="js/jquery-1.8.0.js" ></script> 8 <body> 9 <ul id="myTree"></ul> ///定義ztree要顯示的容器標簽 10 11 </body> 12 <script> 13 var myTreeNodes = []; //定義接收返回集合的容器，為了在后面init真正初始化樹時，作為最后一個參數用 14 var IDMark_A = "_a"; //定義個變量，其實就是為了后面匹配tree自動生成的a標簽（在這里做下說明而已，不定義直接在下面拼也行吧） 15 var mySetting = { 16 view:{ 17 addDivDom: myyAddDivDom //自定義控件，這里是加入了復選框 18 }, 19 data:{ 20 key:title:"name", //設置title提示信息對應的屬性名稱 也就是節點相關的某個屬性 21 children:"childNodes" 22 }, 23 async:{ 24 enable:true, //是否開啟異步加載模式 25 type:'post', 26 url: myGetUrl,//得到請求路徑的方法 27 dataFilter: myFilter //對於請求回來的數據進行預處理的方法 28 } 29 } 30 31 //加入自定義的顯示控件 （這里是文本框） 32 function myAddDivDom(tree,treeNode){ 33 var aObj = $("#"+treeNode.tId+IDMark_A);///這個就是個選擇器，選的是原節點所在的a標簽（這是tree自己生成的a標簽） 34 if(treeNode.myCheck=="1"){///這個是可以自己加判斷，讓指定的對象前加上復選框 35 var editStr = "<input type='checkbox' value='"+treeNode.id+"'onfocus='this.blur();'></input>"; 36 aObj.before(editStr); ///before是jq的方法，意思是在調用者標簽的簽名加入參數（參數也可以是標簽，和html()方法的參數是一樣的） 37 } 38 } 39 40 //得到請求路徑 41 function myGetUrl(treeId,treeNode){ 42 var firstId = "";//第一個節點對象的id 43 var url = ""; 44 if(treeNode==null){ //第一次，加載樹時發的請求 45 url = path+"xxx/loadNextTreeNodes.do?id="+firstId+"&otherParam"+otherParam; 46 }else{//樹加載完成后，點擊某個（有子節點的）節點后發出的請求 47 url = path + "xxx/loadNextTreeNodes.do?id="+treeNode.id+"&otherParam"+otherParam; 48 } 49 return url; 50 } 51 52 //對返回的數據進行預處理 53 function myFilter(treeId,parentNode,childNodes){ 54 for (var i=0,i<childNodes.length;i++) { 55 /* 56 下面等號左邊的 childNodes[i] 的屬性都是在 tree中要顯示的每個節點的屬性， 57 而右邊的childNodes[i]的屬性則表示從后台得到的對象集合中每個對象的真實屬性 58 */ 59 childNodes[i].code=xxxx; 60 childNodes[i].open=true; 61 childNodes[i].name = childNodes[i].xxxName; 62 childNodes[i].xxx = childNodes[i].xxxxx; 63 64 if(childNodes[i].hasChild==1){ 65 childNodes[i].isParent = true;///要顯示成樹，集合中的數據必須要有個boolean類型的 isParent屬性 66 //可以在后台對象屬性上直接加上，也可以在預處理這里的js中根據條件加上這個屬性 67 } 68 } 69 return childNodes; 70 } 71 72 ///上面這些都是為了生成樹的准備信息，下面這句才是真正生成樹的代碼(當然這句可以放在任意位置，比如最上面也可以) 73 $.fn.zTree.init($("#myTree"),mySetting,myTreeNodes);//參數1：容器對象 2：tree的setting設置 3：接收后台返回值的數組 74 /* 75 執行這句的時候，會自動 先執行 myGetUrl 方法，得到 url，然后自動發送這個url到后台請求數據（就和ajax一樣，其實這句話里面就是發了一個ajax請求）， 76 然后請求回來的 數據會自動先傳入myFilter方法的childNodes參數中，並執行myFilter方法， 77 然后在加載tree的同時自動調用myAddDivDom方法，在對應的節點前拼好checkbox復選框，並顯示在頁面上。 78 */ 79 80 </script> 81 82 <script> 83 //下面這些都是java代碼 84 @ResponseBody 85 @RequestMapping("loadNextTreeNodes") 86 public void loadNextTreeNodes(){ 87 List list=[];//假設后台有一個要展示為 tree的list集合 88 for(item:list){ 89 item.setHasChild("0"); 90 if(xxx){ 91 item.setHasChild("1"); 92 } 93 } 94 writeJson(list);//把list轉成json寫到前台 95 } 96 97 //下面這個就是封裝了個寫json到前台的方法，供參考 98 public void writeJson(Object obj){ 99 PrintWriter out = null; 100 try{ 101 response.setContentType(""); 102 response.setHeader(""); 103 response.setHeader(""); 104 out = response.getWriter(); 105 out.print(new Gson().toJson(obj)); 106 }catch(Exception e){ 107 108 }finally{ 109 try{ 110 FileUtil.flushAndCloseWrite(out);//關閉流 111 }catch(e){ 112 } 113 } 114 } 115 116 </script> 117 </html>