這幾天因為工作需要，要做一個支持無限級的菜單。
我也是菜鳥一只，能想到的東西不多，所以用了Easy UI的tree組件。
不得不說，easyui確實很強大。
因為是無限級菜單，數據量可能有點大，所以考慮采用異步加載。
但是因為后臺默認傳來的數據是 一個實體，所以又在后臺進行了JSON字符串拼接。
最后，在網上找了N多代碼，然后又去問了好幾個群里的網友，終于搞出來這個小東西。
一、HTML部分代碼
<div id="categoryChooseDiv" title="請選擇分類" style="width: 650px; height: 300px;"> <ul id="MyTree"></ul> </div>
html部分很簡單，只要放一個ul就可以了。
二、JS部分代碼
function showCategory(){ $('#MyTree').tree({ checkbox: false, url: '/category/getCategorys.java?Id=0', onBeforeExpand:function(node,param){ $('#MyTree').tree('options').url = "/category/getCategorys.java?Id=" + node.id; }, onClick:function(node){ var state=node.state; if(!state){ //判斷當前選中的節點是否為根節點 currentId=node.id; $("#chooseOk").attr( "disabled" , false ); //如果為根節點 則OK按鈕可用 }else{ $("#chooseOk").attr( "disabled" , true ); //如果不為根節點 則OK按鈕不可用 } } }); }最后幾句代碼是因為我這個項目需要，只有選擇到最下級節點的時候，才運行點擊“確定”。否則不允許。
當用戶點擊確定的時候，需要獲取 當前用戶選中節點 的所有父節點
var nodes=[]; //定義數組用來存放各個節點名稱 var node =$("#MyTree").tree("getSelected"); //當前選中節點 nodes.push(node.text); //首先放入當前節點 var pnode = $('#MyTree').tree('getParent',node.target); //獲取當前節點的父節點 while(pnode!=null){ nodes.push(pnode.text); //依次放入各個父節點，直到根節點為止 pnode = $('#MyTree').tree('getParent',pnode.target); } nodes.reverse(); //數組元素倒序排序 $.each(nodes,function(){ //循環取值 var html=this; $("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + ">>" ); }); 其實，主要問題在于后臺對數據的處理，即如何能夠轉化為 easyui tree才可以識別的JSON數據。
三、后臺代碼（Java）
public ResponseEntity<String> findBy(Integer Id ) { List<Category> categorys = getcategorys(Id ); String ss=""; ss+="["; for( Category category : categorys ) { ss+="{"; //ss += "/"id/": /""+category.getId()+"/",/"text/": /""+category.getName().toString()+"/",/"iconCls/": /"icon-ok/",/"state/": /"closed/"";; List<Category> cs = getcategorys( category.getId() ); //判斷當前節點是否還有子節點 if(cs.size()==0){ //沒有子節點 設置 state 為空 ss+=String.format("/"id/": /"%s/", /"text/": /"%s/", /"iconCls/": /"/", /"state/": /"/"", category.getId() , category.getName()); }else{ // 還有子節點 設置 state為closed ss+=String.format("/"id/": /"%s/", /"text/": /"%s/", /"iconCls/": /"/", /"state/": /"closed/"", category.getId() , category.getName()); } ss+="},"; } ss=ss.substring(0, ss.length() - 1); ss+="]"; return super.responseString(ss); //字符編碼轉換 }大致一個流程就是前臺傳來ID，然后獲取到實體對象，然后對實體進行循環，然后進行字符串處理這里設置state的意義主要在于讓 easyui 的tree可以知道當前節點是否為最低級節點，然后在前面顯示不同的圖標。
總結：
就是這個小東西，折騰了我好幾天，呵呵，因為俺太笨了。不過還好最后搞懂了，也理解了很多東西。
以前一直覺得JSON這東西很神秘，現在覺得它還是有規律的。
使用easyui tree的重點之一，就是對JSON數據的處理，有兩種方式可以實現：第一就是使用String的format方法。這個大家可以去網上參考一下相關的API等等，我第一次寫錯了，字符串的占位符應該是 %s 我寫成了 {0} 找了半天，才知道問題所在。 第二種方式，就是我上面注釋掉的那一行，直接使用字符串拼接。
然后上面獲取當前節點的所有父節點的時候，又糾結了半天，去網上找了很多代碼，都不能用，最后還是自己想了一招，才得以解決。
優點：可以使用異步加載，支持無限級。
缺點：太繁瑣，對后臺的數據格式要求過高。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
