JqueryEasyUI中combotree 載入下拉框中的樹形結構

最近工作中會用到一些樹形結構的處理，所以就找到了一些處理樹的相關東西：

JqueryEasyUI是一個不錯的UI設計庫，包含了很多。其中有用到combotree，這是對html標籤中select的更好，是一個下拉樹，顯示效果比較好，看起來層次清晰。

JqueryEasyUI中combotree使用：

1. jsp 中加入下拉框：

<select id="imageCatSel" class="easyui-validatebox" style="width: 155px;"></select>

2.js中增加處理方法：

var treeUrl = REST.categoryTree.getREST([]);  //獲得查詢樹形json串的url  ，返回拼接好樹形對象的json  註：這裡查詢全部最外層的節點，然後剩餘的節點內容，每次點擊的時候後台再重新查詢$.getJSON(treeUrl,function(json){$("#imageCatSel").combotree({url : treeUrl,onBeforeExpand :function(node){//點擊樹形結構展開時執行的方法，判斷父節點是不是裡面沒有子節點了，如果沒有去按照節點id查詢裡面的子節點var children = $('#imageCatSel').combotree("tree").tree('getChildren', node.target);if(children.length>0){return;}var level = node.attributes.level;var pid = node.id;var childsUrl = REST.subCategoryTree.getParamREST([pid],{level:level});//這裡注意，請查看後面的有關這裡的描述（最後的描述）$('#imageCatSel').combotree("tree").tree("options").url = childsUrl;}});});

3.背景java查詢：

  1） 首次查詢：

setResponseHeader(request, httpServletResponse);Map param = this.getParameterMap(request);param.put("mgmtEntityCategoryTypeId", MgmtEntityCategoryType.IMAGE_CATEGORY.name());out = httpServletResponse.getWriter();JSONObject outObj = new JSONObject();//獲得所有的父節點資訊List<Map> result=imageCategoryService.queryImageCategory(param, this.getContext(request));List<Map> roots = new ArrayList<Map>();for (Map map : result) {//選出父節點if(map.get("parent")==null){roots.add(map);}}//將父節點資訊轉化成json串的樹形結構tranTreeNode(roots, outObj,true,0);JSONArray outArray = new JSONArray();outArray.put(outObj);out.write(outArray.toString());out.flush();

轉化方法 tranTreeNode  ：

private JSONArray tranTreeNode(List<Map> nodes, JSONObject outObj,boolean isRoot,int level) {JSONArray childArray = new JSONArray();level++;if(isRoot){outObj.put("id", 0);outObj.put("text", "鏡像管理");outObj.put("iconCls", "icon-pdc_res_database");outObj.put("state", "closed");JSONObject attr = new JSONObject();attr.put("level",level);outObj.put("attributes", attr);outObj.put("children", childArray);}if(isRoot&&nodes.size()>0){//根節點下存在節點level++;}for (Map map : nodes) {JSONObject imageCategory = new JSONObject();imageCategory.put("id", map.get("categoryId"));imageCategory.put("text", map.get("name"));imageCategory.put("state", "closed");JSONObject attr = new JSONObject();attr.put("parent", map.get("parent"));attr.put("level", level);imageCategory.put("attributes", attr);childArray.put(imageCategory);}return childArray;}

2）單個節點的內容查詢：

setResponseHeader(request, httpServletResponse);Map param = this.getParameterMap(request);param.put("mgmtEntityCategoryTypeId", MgmtEntityCategoryType.IMAGE_CATEGORY.name());param.put("parent", pid);out = httpServletResponse.getWriter();JSONObject outObj = new JSONObject();//根據id查詢此id為父節點的所有子節點資訊List<Map> result=imageCategoryService.queryImageCategory(param, this.getContext(request));int level = 0;if(param.get("level")!=null){level =Integer.parseInt((String) param.get("level")) ;}//將查詢出的子節點資訊組成json串的樹形結構JSONArray outArray = tranTreeNode(result, outObj,false,level);out.write(outArray.toString());out.flush();

以上就可以組裝成功了，效果：

注意：

上面有說要描述修改options裡的url  這裡從網上找到了一些東西，講的還是很明白的：

 首先，以行政區劃為例，combotree，假如我們每次訪問都需要傳入一個上級代碼的areaId，easyui tree，現在我們來設定首次訪問的url。combotree。

   $( '#cc' ).combotree ({

url:"areaTree.ajax?areaId=0",  onBeforeExpand:function(node) {      $('#cc').combotree("tree").tree("options").url = "areaTree.ajax?areaId=" + node.id;}

   }); 

 分析：

      1、url:"areaTree.ajax?areaId=0", 這個ajax表示ajax到後台取資料，easyui tree， areaId = 0，這個表示首先應該是載入 全國 這個根節點      2、 onBeforeExpand ：這個是監聽我每次點擊非末級節點，展開其下級子節點時，easyui numberbox，展開前做什麼事。combotree。查看comboxtree的源碼，easyui tree。
查看源碼可以看出combotree 是繼承 combo  和  tree 兩個控制項。因此，easyui，我們在監聽這個事件時，easyui numberbox，才做了如上寫的代碼，把combotree內建的tree的options選項的url重設成一個動態取選擇值的url。easyui numberbox。注意：這裡不能寫成： $('#cc').combotree("tree").tree（{URL： "areaTree.ajax?areaId=" + node.id }），combotree， 如果這樣寫，combotree，combotree會執行兩次調用，並且把你原來的值給清除，用新的擷取到的值替換，extjs
combotree，相當於做了reload的操作。這個可以從combotree的源碼的reload方法裡面看出來。
easyui tree，combotree在做reload的時候，是把其內建的tree的url直接改變，combotree，而不是改變tree的options。

所以，我在監聽展開節點時，直接改變其內建tree的options，combotree，這樣在tree資料載入的時候調用的時候我們改變後的url，easyui numberbox，但是在combotree自身的url仍然是我們一開始設定的載入  全國 這個根節點的url。這點可以通過onloadsuccess方法進行監聽查看。easyui。