spring mvc jquery esayui tree 使用总结

最近在作一个tree显示地区功能,使用的是 jquery esayui Tree ,做个暂时性总结，供以后自己参考。

 js查看变量类型
alert(typeof(a));

<!--前台JPS页面 需要引入的css文件，具体请参考esayui官方文档-->
//spring mvc jquery esayui tree 使用总结
//采用springside搭建项目
//系统架构jquery bootstrap jquery esayui tree spring jpa hibernate maven
//代码初步实现地区动态加载展示，点击父节点时动态获取其子节点，难点在于后台返回的JSON数据需要经过转换，
//以及hibernate返回级联菜单数据时后台Entity类的children get方法必须为@JSONIgnore否则报错
<!--前台JPS页面 引入的CSS和jquery代码-->
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<link href="${ctx}/static/esayui/themes/default/easyui.css" type="text/css" rel="stylesheet"/>
<link href="${ctx}/static/esayui/themes/icon.css" type="text/css" rel="stylesheet"/>	
<script src="${ctx}/static/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>				
					
<!--前台JPS页面 html代码-->
<div class="tab-pane" id="regions_tab"  style="height: 500px;overflow:auto;">
	<aa:zone name="regionsPermissionForm">
			<form id="regionsPermissionForm" name="regionsPermissionForm" method="post">
					<ul id="tt" class="easyui-tree"></ul>
			</form>
	</aa:zone>
</div>
					
	<!--前台JPS页面 esayui tree代码-->				
	<script src="${ctx}/static/esayui/jquery.easyui.min.js" type="text/javascript"></script>
	<script type="text/javascript">  
//esayui tree不需要编写动态添加子节点到tree中的代码，
//只要服务器返回了子节点数据，插件会自己实现添加，很好很强大。
    $(function(){
        $("#tt").tree({
        	url:'${ctx}/permission/getRegion',
        	checkbox:true,//是否显示checkbox
        	method:'post',//http方法get或者post
        	animate:true,//是否显示动画效果
        	cascadeCheck:true,//是否支持选中父节点级联选中其字节点
        	loadFilter:function(data,parent){//加载数据时进行转换
        		return convert(data);
        	}
        });
        
        //转换服务器返回的json为tree数据源
        //服务器返回的JSON数据格式为：[{"id":"086","name":"中国","code":"086","state":"closed"}]
        //esayui的JSON数据格式为：[{"id":"086","text":"中国","state":"closed"}]
        //state为是否叶子节点closed表示父节点，open表示叶子节点此时节点无法再展开
         function convert(rows){
        	   var nodes = [];
        	   for(var i=0; i<rows.length; i++){
        	   		var row = rows[i];
        	   		nodes.push({
        	   			id:row.id,
        	   			text:row.name,
        	   			state:row.state
					});
        	   }
        	  return nodes;
		}
   });

    //获取已选择的节点
    function getCheckedNoeds(){
    	var nodes = $('#tt').tree('getChecked');
		var reNodes =[];
		for (var i=0; i<nodes.length; i++){
			node =nodes[i];
			reNodes.push(node.id.toString());
		}
    	alert(typeof(reNodes));
    	return reNodes;
    }
    //设置节点状态为已选中状态
    function setNodeChecked(){
    	var node = $('#tt').tree('find', '086');
    	alert(node);
    	$('#tt').tree('check', node.target);

    }
    </script>
</body>
</html>

后台部分

spring Controller

// 获取地区信息
	@RequestMapping(value = "getRegion",method=RequestMethod.POST)
	public @ResponseBody List<Region> getRegion(
			@RequestParam(value = "id", required = false) String id,
			Model model) {
		List<Region> regions=null;
		//请求参数id 是esayui tree默认发送请求时携带的参数
		//前台页面第一次加载esayui tree时请求根节点时为null或者空,所有需要判断一下
		if("".equals(id)||id==null){
			regions=permissionService.getRegions(null);
		}else{
			regions=permissionService.getRegions(id);
		}	
		for (Region r : regions) {
			//判断是否含有子节点
			//entity属性state标注为@Transient，这个属性只是来判断是否为根节点以供前台tree展示
			if(r.getChildren().size()>0)
				
				r.setState("closed");
			else
				r.setState("open");
			r.setChildren(null);
		}
		return regions;
	}

 Entity实体类，主要关注 getParent() 及 getChildren() 的@JsonIgnore标注和getState()的@Transient标注

import java.util.Set;
import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import javax.persistence.Transient;

import org.hibernate.annotations.GenericGenerator;

import com.fasterxml.jackson.annotation.JsonIgnore;

@Entity
@Table(name="APP_REGION")
public class Region {
	private String id;
	private String name;		//区域名称
	private String code;		//区域代码
	private Region parent;
	private Set<Region> children ;
	private String state;
	
	@Id
	@Column(length=100)
	@GeneratedValue(generator = "RegionGenerator")
	@GenericGenerator(name = "RegionGenerator", strategy="org.springside.examples.quickstart.entity.StringSequenceGenerator")
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	@Column(length=200)
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Column(length=100)
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	//必须添加@JsonIgnore标注，否则Controller类中处理时会报堆栈溢出错误
	//@JsonIgnore对属性进行忽略，不参与序列化，避免获取json对象时无限递归问题
	@JsonIgnore
	@ManyToOne
    @JoinColumn(name="parent_id")
	public Region getParent() {
		return parent;
	}
	public void setParent(Region parent) {
		this.parent = parent;
	}
	//
	@JsonIgnore
	@OneToMany(cascade=CascadeType.ALL,fetch=FetchType.LAZY)
	@JoinColumn(name="parent_id")
	public Set<Region> getChildren() {
		return children;
	}
	public void setChildren(Set<Region> children) {
		this.children = children;
	}
	@Transient //表示此数据不在数据库表里建立属性,是暂时性的属性与表没有对应关系
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	
}