EasyUI 树形菜单的显示（SpringMVC+Hibernate）

项目中要能够根据系统不同角色分配不同的权限，权限包括菜单和页面上的按钮，我都放到一个类里面，用一个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 nodesfor(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 nodesfor(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,closedprivate boolean checked = false;private Object attributes;private List<Tree> children;private String iconCls;private String parentId;//省略Get Set 方法}

效果如图左侧: