這幾天因為工作需要，要做一個支持無限級的菜單。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、廣南網(wǎng)絡推廣、重慶小程序開發(fā)、廣南網(wǎng)絡營銷、廣南企業(yè)策劃、廣南品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供廣南建站搭建服務，24小時服務熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
我也是菜鳥一只，能想到的東西不多，所以用了Easy UI的tree組件。
不得不說，easyui確實很強大。
因為是無限級菜單，數(shù)據(jù)量可能有點大，所以考慮采用異步加載。
但是因為后臺默認傳來的數(shù)據(jù)是 一個實體，所以又在后臺進行了JSON字符串拼接。
最后，在網(wǎng)上找了N多代碼，然后又去問了好幾個群里的網(wǎng)友，終于搞出來這個小東西。
一、HTML部分代碼
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){ //判斷當前選中的節(jié)點是否為根節(jié)點
currentId=node.id;
$("#chooseOk").attr( "disabled" , false ); //如果為根節(jié)點 則OK按鈕可用
}else{
$("#chooseOk").attr( "disabled" , true ); //如果不為根節(jié)點 則OK按鈕不可用
}
}
});
}
最后幾句代碼是因為我這個項目需要，只有選擇到最下級節(jié)點的時候，才運行點擊“確定”。否則不允許。
當用戶點擊確定的時候，需要獲取 當前用戶選中節(jié)點 的所有父節(jié)點
var nodes=[]; //定義數(shù)組用來存放各個節(jié)點名稱
var node =$("#MyTree").tree("getSelected"); //當前選中節(jié)點
nodes.push(node.text); //首先放入當前節(jié)點
var pnode = $('#MyTree').tree('getParent',node.target); //獲取當前節(jié)點的父節(jié)點
while(pnode!=null){
nodes.push(pnode.text); //依次放入各個父節(jié)點，直到根節(jié)點為止
pnode = $('#MyTree').tree('getParent',pnode.target);
}
nodes.reverse(); //數(shù)組元素倒序排序
$.each(nodes,function(){ //循環(huán)取值
var html=this;
$("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + ">>" );
}); 其實，主要問題在于后臺對數(shù)據(jù)的處理，即如何能夠轉化為 easyui tree才可以識別的JSON數(shù)據(jù)。
三、后臺代碼（Java）
public ResponseEntityfindBy(Integer Id ) { List 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 cs = getcategorys( category.getId() ); //判斷當前節(jié)點是否還有子節(jié)點 if(cs.size()==0){ //沒有子節(jié)點 設置 state 為空 ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"\"", category.getId() , category.getName()); }else{ // 還有子節(jié)點 設置 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，然后獲取到實體對象，然后對實體進行循環(huán)，然后進行字符串處理這里設置state的意義主要在于讓 easyui 的tree可以知道當前節(jié)點是否為最低級節(jié)點，然后在前面顯示不同的圖標。
總結：
就是這個小東西，折騰了我好幾天，呵呵，因為俺太笨了。不過還好最后搞懂了，也理解了很多東西。
以前一直覺得JSON這東西很神秘，現(xiàn)在覺得它還是有規(guī)律的。
使用easyui tree的重點之一，就是對JSON數(shù)據(jù)的處理，有兩種方式可以實現(xiàn)：第一就是使用String的format方法。這個大家可以去網(wǎng)上參考一下相關的API等等，我第一次寫錯了，字符串的占位符應該是 %s 我寫成了 {0} 找了半天，才知道問題所在。 第二種方式，就是我上面注釋掉的那一行，直接使用字符串拼接。
然后上面獲取當前節(jié)點的所有父節(jié)點的時候，又糾結了半天，去網(wǎng)上找了很多代碼，都不能用，最后還是自己想了一招，才得以解決。
優(yōu)點：可以使用異步加載，支持無限級。
缺點：太繁瑣，對后臺的數(shù)據(jù)格式要求過高。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
