最近在作一个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;
}
}