springmvc+ztree v3实现类似表单回显功能
生活随笔
收集整理的這篇文章主要介紹了
springmvc+ztree v3实现类似表单回显功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ?在做權限管理系統時，可能會用到插件zTree v3,這是一個功能豐富強大的前端插件，應用很廣泛，如異步加載菜單制作、下拉選擇、權限分配等。在集成SpringMVC中，我分別實現了zTree的添刪改查，本節主要實現類似表單回顯功能。如圖：
1、前端代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>非異步加載節點</title> <link rel="stylesheet"href="${pageContext.request.contextPath }/res/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet"href="${pageContext.request.contextPath }/res/zTree/css/metroStyle/metroStyle.css" type="text/css"> <script type="text/javascript"src="${pageContext.request.contextPath }/res/bootstrap/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/res/bootstrap/js/bootstrap.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/res/zTree/js/jquery.ztree.core.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/res/zTree/js/jquery.ztree.excheck.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/res/zTree/js/jquery.ztree.exedit.js"></script> <script type="text/javascript">var zNodes;var setting = {check: {enable: true},data: {simpleData: {enable: true}}};//當頁面加載完畢，向后臺發送ajax請求，獲取用戶id為1的用戶所擁有的權限//（這里要顯示所有權限，該id用戶的權限回顯時，被自動選中）,這里的用戶id為1僅做測試使用，實際開發中會傳值function loadPower(){$.ajax({type:"post",url:"${pageContext.request.contextPath }/user/role_list.do",data:{"userId":1},async:false,dataType:"json",success:function(data){zNodes=data;}})}//用戶重新選擇權限時，獲取選擇權限的id，此處可以拼接權限id的字符串，到后臺切割成數組。String.split(",")function test(){//獲取被選中的節點集合var treeObj = $.fn.zTree.getZTreeObj("treeDemo");var nodes = treeObj.getCheckedNodes(true);//如果nodes的長度大于0說明ztree中有被選中的節點if(nodes.length>0){for(var i=0;i<nodes.length;i++){var id=nodes[i]["id"];//獲取選中節點的idvar name=nodes[i]["name"];//獲取選中節點的名字alert(id);alert(name);}}else{alert("沒有選中節點");}}//頁面加載完畢時加載此方法$(document).ready(function(){loadPower();$.fn.zTree.init($("#treeDemo"), setting, zNodes);});</script></head><body><ul id="treeDemo" class="ztree"></ul><!-- 傳遞用戶id值 --><input type="hidden" name="userId" value="${userId }"><input type="button" value="測試被選中的節點的id" οnclick="test();" /></body> </body> </html>2、后端
?1）實體類(采用JPA注解，mysql數據庫)
//User.java public class User implements Serializable{private Integer id;private String username;//用戶名private String password;//密碼private Set<Role>roles=new HashSet<Role>();//多對多#get、set方法@Table(name="b_role") @Entity public class Role implements Serializable{private Integer rid;//自增Id序列private Integer id;//本身節點idprivate Integer pId;//父節點id,默認為0，是整個樹的根private String name;//對應zTree樹的name屬性private Boolean isParent;//是否是父節點private Set<User>users=new HashSet<User>();#get、set方法......
2）dao層
package sys.dao; import java.util.List;import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.query.Param;import sys.entity.Role;public interface RoleRepository extends JpaRepository<Role, Integer> {@Query("select r from Role r where pid = ?")List<Role>getRoles(int pid);@Query(value="select * from a_role r where r.id=:id",nativeQuery=true)Role getRoleById(@Param("id")Integer id); }package sys.dao;import org.springframework.data.jpa.repository.JpaRepository;import sys.entity.User;public interface UserRepository extends JpaRepository<User, Integer>{User getByUsernameAndPassword(String username,String password);User getByUsername(String username);}
3）service層
package sys.service;import java.util.List; import java.util.Map; import java.util.Set;import sys.entity.Role;public interface RoleService {void save(Role role);List<Role>getAll();Role getRole(Integer rid);void delete(Integer id);List<Role> findAll();List<Role> getRoles(int pid);Role getRoleById(Integer id);Set<Role> getRolesInId(List<Integer> id_list);List<Map<String, Object>>queryByUserId(Integer userId); }//RoleServiceImpl實現queryByUserId方法 /*** zTree v3回顯* 初始化化權限樹* 拼接treeNode屬性*/@Transactional(readOnly=true)@Overridepublic List<Map<String, Object>> queryByUserId(Integer userId) {//1、查出所有角色List<Role>listAll=roleRepository.findAll();//2、查出指定用戶id的角色Set<Role>listOne=userRepository.getOne(userId).getRoles();//包裝zTreeList<Map<String, Object>>list=new ArrayList<Map<String, Object>>();Map<String, Object>map=null;for(int i=0;i<listAll.size();i++){map=new HashMap<>();Role role=listAll.get(i);map.put("id", role.getId());map.put("pId", role.getpId());map.put("name", role.getName());map.put("isParent", role.getIsParent());//判斷指定用戶的角色是否在所有角色中包含，有則設置checked=true.if(listOne!=null&&listOne.size()>0&&listOne.contains(role)){map.put("checked",true);}else {map.put("checked",false);}list.add(map);}return list;}
package sys.controller;import java.util.List; import java.util.Map;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody;import sys.service.RoleService; @RequestMapping("user") @Controller public class UserController {@Autowiredprivate RoleService roleService;@RequestMapping("getRoles")public String getRoles(){return "treedemo/demo1";}@RequestMapping("getRoles2")public String getRoles2(){return "treedemo/demo2";}/*** 根據用戶id初始化權限樹* @param userId* @return*/@ResponseBody@RequestMapping("role_list")public List<Map<String, Object>> getRolelist(@RequestParam("userId")Integer userId){return roleService.queryByUserId(userId);} }
3、測試
http://localhost:8080/treeDemo/user/getRoles2.do
轉載于:https://www.cnblogs.com/hzhh123/p/5419361.html
總結
以上是生活随笔為你收集整理的springmvc+ztree v3实现类似表单回显功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sessionStorage loca
- 下一篇： YIi2中checkboxOptions