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实现类似表单回显功能相关推荐

EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法...
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一.问题截图二. ...
element 表单回显验证_关于vue el-form表单报错的问题
在写el-form表单的时候,遇到了蛮多问题,在这里记录一下. 1.表单验证报错[Element Warn][Form]model is required for validate to work! ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
php 自动验证表单类,thinkPHP 表单自动验证功能
昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对 ...
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...
Html利用函数输入学生的性别,JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)...
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证) 发布时间:2020-10-08 04:15:08 来源:脚本之家阅读:73 作者:水山奇问题:表单怎么在输入后 ...

springmvc+ztree v3实现类似表单回显功能

1、前端代码

2、后端

3、测试

springmvc+ztree v3实现类似表单回显功能相关推荐

最新文章

热门文章