Spring mvc jquery esayui tree使用概要

7392 ワード

最近、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;
	}
	
}