這幾天因為工作需要，要做一個支持無限級的菜單。

我也是菜鳥一只，能想到的東西不多，所以用了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 + "&gt;&gt;" );});

?? 其實，主要問題在于后臺對數據的處理，即如何能夠轉化為 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} 找了半天，才知道問題所在。 第二種方式，就是我上面注釋掉的那一行，直接使用字符串拼接。

???? 然后上面獲取當前節點的所有父節點的時候，又糾結了半天，去網上找了很多代碼，都不能用，最后還是自己想了一招，才得以解決。

優點：可以使用異步加載，支持無限級。

缺點：太繁瑣，對后臺的數據格式要求過高。

---

??? 剛剛老大又發話了，讓我把它給做成一組件。。在其他地方也可以調用的那種，我覺得目前的難題是：如何用JS把后臺傳來的 實體類型的 list轉換成easyui tree可以識別的JSON數據？ 不知道各位有沒有什么好的辦法，希望可以指點一下小弟，謝謝！
?? PS：無限極菜單，群里有位網友說是 無限級也最大能支持 65535，不知道是不是這樣子的，希望有高手能解答一下我的這個疑惑：無限極菜單到底能支持多少級？

總結

以上是生活随笔為你收集整理的使用EasyUI Tree异步加载JSON数据 生成树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。