easyui combotree 集成在web开发

easyui combotree 使用

需求:    1. 加载树状结构的数据

            2. 要实现页面刷新后，树形节点回显的效果

            3. 输入可以实现自动模糊查询到对应的节点

具体实现的代码:

首先引入easyUI依赖的文件:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyuitree.js"></script>

在html中写入:

<select id="branch_id" class="easyui-combotree" method="get" style="width:160px;" ></select>

Javascript中实现点击下拉框，才 加载数据的效果;

  $('#branch_id').combotree
		            ({ 	
// 		                data:window.parent.jsonBranchData,(如果想要页面载入就加载数据的话)
                        panelWidth:200,
                        panelHeight:300,
		                valueField: 'id',
		                textField: 'text',
		                required: false,
		                editable: true,
		                onShowPanel:function(){//点击下拉框，才去加载数据
		                	 if(($("#branch_id").combotree('tree').tree('getRoots').length)==0){
		              		  	$("#branch_id").combotree({data:window.parent.jsonBranchData});
		                	 }
		                },
		                onLoadSuccess: function (node, data) {
		                	//回显时，默认选中的值
			            $("#branch_id").combotree('setValue','${param.branchId}');
		                    $('#branch_id').combotree('tree').tree("collapseAll"); 
		                }
		        });

实现输入模糊查询节点 ,将editable属性设为true

 $(".combo-text").bind("input propertychange", function() {  
				 $('#branch_id').combotree('tree').tree("search",$(this).val());  
		            if($(this).val()=="" || null==$(this).val()){  
		                $('#branch_id').combotree('tree').tree("expandAll");  
		            }  
		        });  

关于如何加载数据的说明:

我的方法是在用户登录的时候，将json数据加载到main页面上,main页面上使用ajax的get请求到后台，建议使用get请求加载，查询页面时子页面，子页面获取父页面的数据，使用：

window.parent.父页面变量名

$("#branch_id").combotree({data:window.parent.jsonBranchData});

json数据是后台返回的， 后台定义如下:

package flink.net.util;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.util.WebUtils;

import com.ylink.mfo.action.form.UserInfo;
import com.ylink.mfo.msg.rsp.RspA9011;

import flink.consant.Constants;

public class MyBranchUtils {
	//获取role树形结构
	public static Map<String, Object> getCombotreeInfo(List<RspA9011> list,HttpServletRequest request){
		Map<String,Object> map = new HashMap<String, Object>();
		UserInfo userInfo = (UserInfo)WebUtils.getSessionAttribute(request, Constants.SESSION_USER);
		for (RspA9011 rspA9011 : list) {
			if(rspA9011.getBranch_id().equals(userInfo.getBranchId())){
				map.put("id", rspA9011.getBranch_id());
				map.put("text", rspA9011.getBranch_name());
				map.put("children", MyBranchUtils.getChildrenRoleInfo(rspA9011.getBranch_id(), list));
			}
		}
		return map;
	}
	
	//递归获取树形结构的数据
	public static List<Map<String,Object>>  getChildrenRoleInfo(String parentId,List<RspA9011> list){
		List<Map<String,Object>> total = new ArrayList<Map<String,Object>>();
		for (RspA9011 rspA9011 : list) {
			if(rspA9011.getParent_branch_id().equals(parentId)){
				Map<String,Object> map = new HashMap<String, Object>();
				map.put("id", rspA9011.getBranch_id());
				map.put("text", rspA9011.getBranch_name());
				map.put("children", getChildrenRoleInfo(rspA9011.getBranch_id(), list));
				total.add(map);
			}
		}
		return total;
	}
}

需要确认的json数据的格式必须是:

1. json格式 [{"id":..,"text":...,"children":...},{},{}] 后台定义为Map<String,List<Map<String,Object>>>

2. list为节点对象的集合

3. 最后将map转json到前台