JqueryEasyUI中combotree 加载下拉框中的树形结构

JqueryEasyUI中combotree 加载下拉框中的树形结构

最近工作中会用到一些树形结构的处理，所以就找到了一些处理树的相关东西：

JqueryEasyUI是一个不错的UI设计库，包含了很多。其中有用到combotree，这是对html标签中select的更好，是一个下拉树，显示效果比较好，看起来层次清晰。

JqueryEasyUI中combotree使用：

1. jsp 中加入下拉框：

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

2.js中增加处理方法：

[javascript]  view plain copy

1. var treeUrl = REST.categoryTree.getREST([]);  //获得查询树形json串的url  ，返回拼接好树形对象的json  注：这里查询全部最外层的节点，然后剩余的节点内容，每次点击的时候后台再重新查询  
2. $.getJSON(treeUrl,function(json){  
3.     $("#imageCatSel").combotree({  
4.         url : treeUrl,  
5.         onBeforeExpand :function(node){  
6.             //点击树形结构展开时执行的方法，判断父节点是不是里面没有子节点了，如果没有去按照节点id查询里面的子节点  
7.             var children = $('#imageCatSel').combotree("tree").tree('getChildren', node.target);  
8.             if(children.length>0){  
9.                 return;  
10.             }  
11.             var level = node.attributes.level;  
12.             var pid = node.id;  
13.             var childsUrl = REST.subCategoryTree.getParamREST([pid],{level:level});   
14.             //这里注意，请查看后面的有关这里的描述（最后的描述）  
15.             $('#imageCatSel').combotree("tree").tree("options").url = childsUrl;  
16.               
17.         }  
18.     });  
19. });  

3.后台的java查询：

  1） 首次查询：

[java]  view plain copy

1. setResponseHeader(request, httpServletResponse);  
2. Map param = this.getParameterMap(request);  
3. param.put("mgmtEntityCategoryTypeId", MgmtEntityCategoryType.IMAGE_CATEGORY.name());  
4.   
5. out = httpServletResponse.getWriter();  
6. JSONObject outObj = new JSONObject();  
7. //获得所有的父节点信息  
8. List<Map> result=imageCategoryService.queryImageCategory(param, this.getContext(request));  
9. List<Map> roots = new ArrayList<Map>();  
10. for (Map map : result) {//选出父节点  
11.     if(map.get("parent")==null){  
12.         roots.add(map);                   
13.     }  
14. }  
15. //将父节点信息转化成json串的树形结构  
16. tranTreeNode(roots, outObj,true,0);  
17. JSONArray outArray = new JSONArray();  
18. outArray.put(outObj);  
19. out.write(outArray.toString());  
20. out.flush();  

转化方法 tranTreeNode  ：

[java]  view plain copy

1. private JSONArray tranTreeNode(List<Map> nodes, JSONObject outObj,boolean isRoot,int level) {  
2.     JSONArray childArray = new JSONArray();  
3.     level++;  
4.     if(isRoot){  
5.         outObj.put("id", 0);  
6.         outObj.put("text", "镜像管理");  
7.         outObj.put("iconCls", "icon-pdc_res_database");  
8.         outObj.put("state", "closed");  
9.         JSONObject attr = new JSONObject();  
10.         attr.put("level",level);  
11.         outObj.put("attributes", attr);  
12.         outObj.put("children", childArray);  
13.     }  
14.     if(isRoot&&nodes.size()>0){//根节点下存在节点  
15.         level++;  
16.     }  
17.     for (Map map : nodes) {  
18.         JSONObject imageCategory = new JSONObject();  
19.         imageCategory.put("id", map.get("categoryId"));  
20.         imageCategory.put("text", map.get("name"));  
21.         imageCategory.put("state", "closed");  
22.         JSONObject attr = new JSONObject();  
23.         attr.put("parent", map.get("parent"));  
24.         attr.put("level", level);  
25.         imageCategory.put("attributes", attr);  
26.         childArray.put(imageCategory);  
27.     }  
28.     return childArray;  
29. }  

2）单个节点的内容查询：

[java]  view plain copy

1. setResponseHeader(request, httpServletResponse);  
2. Map param = this.getParameterMap(request);  
3. param.put("mgmtEntityCategoryTypeId", MgmtEntityCategoryType.IMAGE_CATEGORY.name());  
4. param.put("parent", pid);  
5. out = httpServletResponse.getWriter();  
6. JSONObject outObj = new JSONObject();  
7. //根据id查询此id为父节点的所有子节点信息  
8. List<Map> result=imageCategoryService.queryImageCategory(param, this.getContext(request));  
9. int level = 0;  
10. if(param.get("level")!=null){  
11.     level =Integer.parseInt((String) param.get("level")) ;  
12. }  
13. //将查询出的子节点信息组成json串的树形结构  
14. JSONArray outArray = tranTreeNode(result, outObj,false,level);  
15. out.write(outArray.toString());  
16. 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。