Spring mvc jquery esayui tree使用概要
7392 ワード
最近、tree表示エリア機能を作成し、jquery esayui Treeを使用して、後で自分で参考にします.
jsは変数タイプalert(typeof(a))を表示します.
バックグラウンド
spring Controller
Entityエンティティクラス、主にgetParent()およびgetChildren()の@JsonIgnore寸法とgetState()の@Transient寸法に注目
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;
}
}