當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
SpringMVC+ZTree实现树形菜单权限配置
生活随笔
收集整理的這篇文章主要介紹了
SpringMVC+ZTree实现树形菜单权限配置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
計劃在開源項目里加入權限配置的功能，打算加入zTree實現樹形結構。
Team的Github開源項目鏈接：https://github.com/u014427391/jeeplatform
歡迎star(收藏)
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
zTree下載鏈接：http://www.treejs.cn/v3/main.php#_zTreeInfo
角色信息實體類：
package org.muses.jeeplatform.core.entity.admin;import javax.persistence.*; import java.io.Serializable; import java.util.HashSet; import java.util.Set;/*** @description 角色信息實體類* @author Nicky* @date 2017年3月16日*/ @Table(name="sys_role") @Entity public class Role implements Serializable{/** 角色Id**/private int roleId;/** 角色描述**/private String roleDesc;/** 角色名稱**/private String roleName;/** 角色標志**/private String role;private Set<Permission> permissions = new HashSet<Permission>();@Id@GeneratedValue(strategy=GenerationType.IDENTITY)public int getRoleId() {return roleId;}public void setRoleId(int roleId) {this.roleId = roleId;}@Column(length=100)public String getRoleDesc() {return roleDesc;}public void setRoleDesc(String roleDesc) {this.roleDesc = roleDesc;}@Column(length=100)public String getRoleName() {return roleName;}public void setRoleName(String roleName) {this.roleName = roleName;}@Column(length=100)public String getRole() {return role;}public void setRole(String role) {this.role = role;}//修改cascade策略為級聯關系@OneToMany(targetEntity=Permission.class,cascade=CascadeType.MERGE,fetch=FetchType.EAGER)@JoinTable(name="sys_role_permission", joinColumns=@JoinColumn(name="roleId",referencedColumnName="roleId"), inverseJoinColumns=@JoinColumn(name="permissionId",referencedColumnName="id",unique=true))public Set<Permission> getPermissions() {return permissions;}public void setPermissions(Set<Permission> permissions) {this.permissions = permissions;}@Overridepublic boolean equals(Object obj) {if (obj instanceof Role) {Role role = (Role) obj;return this.roleId==(role.getRoleId())&& this.roleName.equals(role.getRoleName())&& this.roleDesc.equals(role.getRoleDesc())&& this.role.equals(role.getRole());}return super.equals(obj);} }權限信息實體類：
package org.muses.jeeplatform.core.entity.admin;import java.io.Serializable; import java.util.HashSet; 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.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.JoinTable; import javax.persistence.ManyToMany; import javax.persistence.OneToOne; import javax.persistence.Table;/*** @description 權限操作的Vo類* @author Nicky* @date 2017年3月6日*/ @Table(name="sys_permission") @Entity public class Permission implements Serializable {private int id;private String pdesc;private String name;private static final long serialVersionUID = 1L;private Menu menu;private Set<Operation> operations = new HashSet<Operation>();public Permission() {super();}@GeneratedValue(strategy = GenerationType.IDENTITY)@Idpublic int getId() {return this.id;}public void setId(int id) {this.id = id;}@Column(length=100)public String getPdesc() {return this.pdesc;}public void setPdesc(String pdesc) {this.pdesc = pdesc;}@Column(length=100)public String getName() {return this.name;}public void setName(String name) {this.name = name;}@OneToOne(targetEntity=Menu.class,cascade=CascadeType.REFRESH,fetch=FetchType.EAGER)@JoinColumn(name="menuId",referencedColumnName="menuId")public Menu getMenu() {return menu;}public void setMenu(Menu menu) {this.menu = menu;}@ManyToMany(targetEntity=Operation.class,cascade=CascadeType.MERGE,fetch=FetchType.EAGER)@JoinTable(name="sys_permission_operation",joinColumns=@JoinColumn(name="permissionId",referencedColumnName="id"),inverseJoinColumns=@JoinColumn(name="operationId",referencedColumnName="id"))public Set<Operation> getOperations() {return operations;}public void setOperations(Set<Operation> operations) {this.operations = operations;} }實現菜單信息實體類，用JPA來實現
package org.muses.jeeplatform.core.entity.admin;import javax.persistence.*; import java.io.Serializable; import java.util.List;/*** @description 菜單信息實體* @author Nicky* @date 2017年3月17日*/ @Table(name="sys_menu") @Entity public class Menu implements Serializable {/** 菜單Id**/private int menuId;/** 上級Id**/private int parentId;/** 菜單名稱**/private String menuName;/** 菜單圖標**/private String menuIcon;/** 菜單URL**/private String menuUrl;/** 菜單類型**/private String menuType;/** 菜單排序**/private String menuOrder;/**菜單狀態**/private String menuStatus;private List<Menu> subMenu;private String target;private boolean hasSubMenu = false;public Menu() {super();} @Id@GeneratedValue(strategy=GenerationType.IDENTITY)public int getMenuId() {return this.menuId;}public void setMenuId(int menuId) {this.menuId = menuId;}@Column(length=100)public int getParentId() {return parentId;}public void setParentId(int parentId) {this.parentId = parentId;}@Column(length=100)public String getMenuName() {return this.menuName;}public void setMenuName(String menuName) {this.menuName = menuName;} @Column(length=30)public String getMenuIcon() {return this.menuIcon;}public void setMenuIcon(String menuIcon) {this.menuIcon = menuIcon;} @Column(length=100)public String getMenuUrl() {return this.menuUrl;}public void setMenuUrl(String menuUrl) {this.menuUrl = menuUrl;} @Column(length=100)public String getMenuType() {return this.menuType;}public void setMenuType(String menuType) {this.menuType = menuType;}@Column(length=10)public String getMenuOrder() {return menuOrder;}public void setMenuOrder(String menuOrder) {this.menuOrder = menuOrder;}@Column(length=10)public String getMenuStatus(){return menuStatus;}public void setMenuStatus(String menuStatus){this.menuStatus = menuStatus;}@Transientpublic List<Menu> getSubMenu() {return subMenu;}public void setSubMenu(List<Menu> subMenu) {this.subMenu = subMenu;}public void setTarget(String target){this.target = target;}@Transientpublic String getTarget(){return target;}public void setHasSubMenu(boolean hasSubMenu){this.hasSubMenu = hasSubMenu;}@Transientpublic boolean getHasSubMenu(){return hasSubMenu;}}實現JpaRepository接口
package org.muses.jeeplatform.core.dao.repository.admin;import org.muses.jeeplatform.core.entity.admin.Role; import org.springframework.data.jpa.repository.JpaRepository;/*** Created by Nicky on 2017/12/2.*/ public interface RoleRepository extends JpaRepository<Role,Integer> {}實現JpaRepository接口
package org.muses.jeeplatform.core.dao.repository.admin;import org.muses.jeeplatform.core.entity.admin.Menu; import org.springframework.data.jpa.repository.JpaRepository;/*** Created by Nicky on 2017/6/17.*/ public interface MenuTreeRepository extends JpaRepository<Menu,Integer>{}角色Service類：
package org.muses.jeeplatform.service;import com.google.common.collect.Lists; import org.muses.jeeplatform.core.dao.repository.admin.RolePageRepository; import org.muses.jeeplatform.core.entity.admin.Role; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Sort; import org.springframework.stereotype.Service;import java.util.List;/*** Created by Nicky on 2017/7/30.*/ @Service public class RolePageService {@AutowiredRolePageRepository roleRepository;/*** 構建PageRequest對象* @param num* @param size* @param asc* @param string* @return*/private PageRequest buildPageRequest(int num, int size, Sort.Direction asc,String string) {return new PageRequest(num-1, size,null,string);}/*** 獲取所有的菜單信息并分頁顯示* @param pageNo* 當前頁面數* @param pageSize* 每一頁面的頁數* @return*/public Page<Role> findAll(int pageNo, int pageSize, Sort.Direction dir, String str){PageRequest pageRequest = buildPageRequest(pageNo, pageSize, dir, str);Page<Role> roles = roleRepository.findAll(pageRequest);return roles;}public List<Role> findAllRole(){Iterable<Role> roles = roleRepository.findAll();List<Role> myList = Lists.newArrayList(roles);return myList;}/*** 根據角色id查找角色信息* @param roleId* @return*/public Role findByRoleId(String roleId){return roleRepository.findOne(Integer.parseInt(roleId));}/*** 保存角色信息* @param role*/public void doSave(Role role){roleRepository.save(role);}}菜單Service類：
package org.muses.jeeplatform.service;import org.muses.jeeplatform.annotation.RedisCache; import org.muses.jeeplatform.common.RedisCacheNamespace; import org.muses.jeeplatform.core.dao.repository.admin.MenuTreeRepository; import org.muses.jeeplatform.core.entity.admin.Menu; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional;import java.util.List;/*** Created by Nicky on 2017/6/17.*/ @Service public class MenuTreeService {@AutowiredMenuTreeRepository menuTreeRepository;/*** 查詢所有的菜單* @return*/@Transactional//@RedisCachepublic List<Menu> findAll(){return menuTreeRepository.findAll();}}在Controller類里通過角色id獲取該角色可以查看的菜單：
/*** 跳轉到角色授權頁面* @param roleId* @param model* @return*/@RequestMapping(value = "/goAuthorise" )public String goAuth(@RequestParam String roleId, Model model){List<Menu> menuList = menuTreeService.findAll();Role role = roleService.findByRoleId(roleId);Set<Permission> hasPermissions = null;if(role != null){hasPermissions = role.getPermissions();}for (Menu m : menuList) {for(Permission p : hasPermissions){if(p.getMenu().getMenuId()==m.getMenuId()){m.setHasSubMenu(true);}}}model.addAttribute("roleId" , roleId);JSONArray jsonArray = JSONArray.fromObject(menuList);String json = jsonArray.toString();json = json.replaceAll("menuId","id").replaceAll("parentId","pId").replaceAll("menuName","name").replaceAll("hasSubMenu","checked");model.addAttribute("menus",json);return "admin/role/role_auth";}在前端通過zTree實現樹形菜單展示，通過勾選然后實現角色授權：
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html lang="zh-CN"> <head><base href="<%=basePath %>"><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Insert title here</title><!-- 引入JQuery庫 start --><script type="text/javascript" src="${basePath}static/js/jquery-1.8.3.js"></script><!-- 引入JQuery庫 end --><script type="text/javascript" src="<%=basePath%>plugins/zDialog/zDialog.js"></script><script type="text/javascript" src="<%=basePath%>plugins/zDialog/zDrag.js"></script><script type="text/javascript" src="<%=basePath%>plugins/zDialog/zProgress.js"></script><link rel="stylesheet" href="<%=basePath%>plugins/zTree/3.5/zTreeStyle.css" type="text/css"><script type="text/javascript" src="<%=basePath%>plugins/zTree/3.5/jquery-1.4.4.min.js"></script><script type="text/javascript" src="<%=basePath%>plugins/zTree/3.5/jquery.ztree.core.js"></script><script type="text/javascript" src="<%=basePath%>plugins/zTree/3.5/jquery.ztree.excheck.js"></script><script type="text/javascript"><!--var setting = {check: {enable: true},data: {simpleData: {enable: true}},callback:{onClick: {}}};/*[{ id:1, pId:0, name:"隨意勾選 1", open:true},{ id:11, pId:1, name:"隨意勾選 1-1", open:true},{ id:12, pId:1, name:"隨意勾選 1-2", open:true}];*/var json = ${menus};var zNodes = eval(json);var code;function setCheck() {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),py = $("#py").attr("checked")? "p":"",sy = $("#sy").attr("checked")? "s":"",pn = $("#pn").attr("checked")? "p":"",sn = $("#sn").attr("checked")? "s":"",type = { "Y":py + sy, "N":pn + sn};zTree.setting.check.chkboxType = type;showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');}function showCode(str) {if (!code) code = $("#code");code.empty();code.append("<li>"+str+"</li>");}$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);setCheck();$("#py").bind("change", setCheck);$("#sy").bind("change", setCheck);$("#pn").bind("change", setCheck);$("#sn").bind("change", setCheck);});//-->function dialogClose(){parentDialog.close();}function doSave() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = zTree.getCheckedNodes();var tmpNode;var ids = "";for(var i=0; i<nodes.length; i++){tmpNode = nodes[i];if(i!=nodes.length-1){ids += tmpNode.id+",";}else{ids += tmpNode.id;}}var roleId = ${roleId};var params = roleId +";"+ids;alert(ids);$.ajax({type: "POST",url: 'role/authorise.do',data: {params:params,tm:new Date().getTime()},dataType:'json',cache: false,success: function(data){if("success" == data.result){alert('授權成功!請重新登錄!');parent.location.reload();doDialogClose();}else{alert("授權失敗!");}}});}</script> </head> <body > <div class="content_wrap"><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div> </div> <input type="button" onClick="doSave()" value="保存" class="buttonStyle" /> <input onClick="dialogClose();" class="buttonStyle" type="button" value="關閉" /> </body> </html>Team的Github開源項目鏈接：https://github.com/u014427391/jeeplatform
歡迎star(收藏)
轉載于:https://www.cnblogs.com/mzq123/p/8124389.html
總結
以上是生活随笔為你收集整理的SpringMVC+ZTree实现树形菜单权限配置的全部內容，希望文章能夠幫你解決所遇到的問題。
