码迷,mamicode.com
首页 > 编程语言 > 详细

EasyUI 树形菜单的显示(SpringMVC+Hibernate)

时间:2015-05-21 10:47:56      阅读:1878      评论:0      收藏:0      [点我收藏+]

标签:easyui   tree   springmvc   

项目中要能够根据系统不同角色分配不同的权限,权限包括菜单和页面上的按钮,我都放到一个类里面,用一个menuOrFunction字段标明是菜单还是按钮。在EasyUI树中,要有它自己的ID,父Id,Url等属性。我把他们都放在一个Operation实体里面:

package com.yang.bishe.entity;

import java.util.HashSet;
import java.util.Set;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.JoinTable;
import javax.persistence.ManyToMany;
import javax.persistence.Table;

import org.hibernate.annotations.DynamicInsert;
import org.hibernate.annotations.DynamicUpdate;
@Entity
@Table(name="T_Operation")
@DynamicInsert(true)
@DynamicUpdate(true)
public class Operation  implements java.io.Serializable {
	@Id
	@Column(name="id")
	private String id;
	@Column(name="text")
	private String text;
	@Column(name="state")
	private String state;
	@Column(name="parentId")
	private String parentId;
	@Column(name="url")
	private String url;
	@Column(name="description")
	private String description;
	@Column(name="target")
	private String target;
	@Column(name="menuOrFunction")
	private String menuOrFunction;
	
	@ManyToMany(fetch = FetchType.LAZY)
	@JoinTable(name ="Role_Operation",   //这涉及到权限,后面文章再论述
	joinColumns ={@JoinColumn(name = "id", referencedColumnName ="id")},
	inverseJoinColumns= {@JoinColumn(name = "RoleId", referencedColumnName ="RoleId")})
	private Set<Role> Roles = new HashSet<Role>(0);
	
	
	
	@Column(name="iconCls", columnDefinition = "String default icon-shape_square_link")
	private String iconCls;
		this.target = target;
	//省略Get Set 方法
}

然后在JSP页面(关键部分)如下,这里注意的是 loadFilter里面的convert函数,在标准的树菜单中,应该是每个节点都包含有自己子节点的集合,但是我们后端没有转换,而是直接把每个节点传过来,节点都包含有父ID,我们就在js里计算每个节点拥有的子节点。convert函数就是这个功能,这个函数是easyui官网上有的。别忘了在jsp页面上弄一个树形菜单标记:<ul id="treeMenu" class="easyui-tree"  animate="true"> </ul>

$(function() {
		$('#treeMenu').tree({
			url: 'operation/getHomeMenu',
			onLoadSuccess:function(node, data){$(this).tree('collapseAll')},
			loadFilter: function(rows){
				return convert(rows);  //
			},
			onClick: function(node){
				if (node.url) {
					addTab(node.text,node.url,node.iconCls); //addTab是系统添加标签页的函数,这里不贴出来
					}
				}
		});
		function convert(rows){
			function exists(rows, parentId){
				for(var i=0; i<rows.length; i++){
					if (rows[i].id == parentId) return true;
				}
				return false;
			}
			var nodes = [];
			// get the top level nodes
			for(var i=0; i<rows.length; i++){
				var row = rows[i];
				if (!exists(rows, row.parentId)){
					nodes.push({
						id:row.id,
						text:row.text,
						target:row.attributes.target,
						url:row.attributes.url,
						iconCls:row.iconCls
					});
				}
			}
			
			var toDo = [];
			for(var i=0; i<nodes.length; i++){
				toDo.push(nodes[i]);
			}
			while(toDo.length){
				var node = toDo.shift();	// the parent node
				// get the children nodes
				for(var i=0; i<rows.length; i++){
					var row = rows[i];
					if (row.parentId == node.id){
						var child = {id:row.id,text:row.text,target:row.attributes.target,url:row.attributes.url,iconCls:row.iconCls};
						if (node.children){
							node.children.push(child);
						} else {
							node.children = [child];
						}
						toDo.push(child);
					}
				}
			}
			return nodes;
		}
	

从函数$(‘#treeMenu‘).tree 中可以看到,请求地址是operation/getHomeMenu,下面是controller的代码:

@	RequestMapping("/getHomeMenu")
	private  void getHomeMenu(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		List<Tree> tree=new ArrayList<Tree>();
		User sessionInfo =  (User)request.getSession().getAttribute("sessionInfo");
		Role role=sessionInfo.getRole();
		List<Operation> op=operationService.findRoleMenu(role);
		//List<Operation> op =(List<Operation>) operationService.find("from Operation where menuOrFunction="+"'menu'");
		for(Operation oper:op){
			Tree node = new Tree();
			BeanUtils.copyNotNullProperties(oper, node);
			Map<String, String> attributes = new HashMap<String, String>();
			attributes.put("url", oper.getUrl());
			attributes.put("target", oper.getTarget());
			node.setAttributes(attributes);
			tree.add(node);
		}
		writeJson(tree,response);
	}
	
其中调用了service的find函数,就是执行HQL语句返回List对象集合而已,上面的Tree是为树形菜单而写的一个实体模型:

package com.yang.bishe.entity.easyui;

import java.util.List;

/**
 * EasyUI tree模型
 * 
 * 
 */
public class Tree implements java.io.Serializable {

	private String id;
	private String text;
	private String state = "open";// open,closed
	private boolean checked = false;
	private Object attributes;
	private List<Tree> children;
	private String iconCls;
	private String parentId;

//省略Get Set 方法

}

效果如图左侧:

技术分享








EasyUI 树形菜单的显示(SpringMVC+Hibernate)

标签:easyui   tree   springmvc   

原文地址:http://blog.csdn.net/yang362046076/article/details/45888177

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!