最近工作中会用到一些树形结构的处理，所以就找到了一些处理树的相关东西：
JqueryEasyUI是一个不错的UI设计库，包含了很多。其中有用到combotree，这是对html标签中select的更好，是一个下拉树，显示效果比较好，看起来层次清晰。
JqueryEasyUI中combotree使用：
1. jsp 中加入下拉框：
<select id="imageCatSel" class="easyui-validatebox" style=" 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。