最近工作中会用到一些树形结构的处理,所以就找到了一些处理树的相关东西:
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 这里从网上找到了一些东西,讲的还是很明白的:
$( '#cc' ).combotree ({
url:"areaTree.ajax?areaId=0",});
分析:
1、url:"areaTree.ajax?areaId=0", 这个ajax表示ajax到后台取数据,easyui tree, areaId = 0,这个表示首先应该是加载 全国 这个根节点所以,我在监听展开节点时,直接改变其内置tree的options,combotree,这样在tree数据加载的时候调用的时候我们改变后的url,easyui numberbox,但是在combotree自身的url仍然是我们一开始设置的加载 全国 这个根节点的url。这点可以通过onloadsuccess方法进行监听查看。easyui。