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"];//获取选中节点的id

                    var 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" onclick="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;//本身节点id

	private 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)

	@Override

	public List<Map<String, Object>> queryByUserId(Integer userId) {

		//1、查出所有角色

		List<Role>listAll=roleRepository.findAll();

		//2、查出指定用户id的角色

		Set<Role>listOne=userRepository.getOne(userId).getRoles();

		//包装zTree

		List<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 {

	@Autowired

	private 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

springmvc+ztree v3实现类似表单回显功能的更多相关文章

EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...
ajax form表单回显
/* * 表单自动回显js * 依赖JQURY * 使用参考:$("#form1").form("load",{"id":"112 ...
jsp 表单回显
1.在表单各个字段中添加value属性,如:value="${user.reloginpass }" 2.在表单提交对应的servlet中封装数据到uer中,如:req.setAt ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
学习SpringMVC必知必会（7）~springmvc的数据校验、表单标签、文件上传和下载
输入校验是 Web 开发任务之一,在 SpringMVC 中有两种方式可以实现,分别是使用 Spring 自带的验证框架和使用 JSR 303 实现, 也称之为 spring-validator 和 ...
AnjularJS系列2 —— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
ThinkPHP表单令牌验证功能详细介绍
注:TP版本为3.1.3 在ThinkPHP框架下,两次提交同一个表单,比如提交信息后在浏览器点击后退退回上次的页面,重新点击提交按钮,就会提示“表单令牌错误”的信息. ThinkPHP新版内置了表单 ...
thinkPHP 表单自动验证功能
昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对 ...
【AnjularJS系列2 】— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

随机推荐

POJ--2923--Relocation--如压力DP
Relocation Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2288 Accepted: 950 Descrip ...
【C语言】推断一个数的奇偶（位操作）
//推断一个数的奇偶 #include <stdio.h> int is_signal(int num) { if (num & 1) return 1; else return ...
poj 3662 Telephone Lines spfa算法灵活运用
意甲冠军: 到n节点无向图,它要求从一个线1至n路径.你可以让他们在k无条,的最大值.如今要求花费的最小值. 思路: 这道题能够首先想到二分枚举路径上的最大值,我认为用spfa更简洁一些.spfa的本 ...
c#中 uint--byte[]--char[]--string相互转换汇总
原文:c#中 uint--byte[]--char[]--string相互转换汇总在在做一些互操作的时候往往需要一些类型的相互转换,比如用c#访问win32api的时候往往需要向api中传入DWOR ...
Linux开机自启动
永久打开或则关闭 chkconfig iptables on chkconfig iptables off 即时生效,重启后还原 service iptables start service ipta ...
c++学籍管理系统v1.10
//////////////新增添加学生和成绩录入系统 #include<iostream> #include <string> #include<conio.h> ...
Vim经常使用技巧总结1
我的主力博客:半亩方塘 1. 反复上次的操作在普通模式下用 . 命令 2. 取消上次的操作在普通模式下用 u 命令 3. 整行删除在普通模式下用 dd 命令,此命令在删除行后不进入插入模式 4. 整 ...
《TCP/IP作品详细解释2：达到》注意事项--IP地址
1.接口和地址如下面的图全部本文中讨论的接口和地址的结构看一个示例配置: 上图中显示了我们三个接口样例:以太网接口,SLIP接口和环回接口. 它们都有一个链路层地址作为地址列表中的第一个结点. 显示 ...
hibernate在地图的方法之一协会
[Hibernate]之关于多对一单向关联映射在项目的开发中多对一的单向关联映射是最常见的关联映射! 这个着重具体解说一下! 比如,我们如今一个组(Group)和人(Person) id name ...
Maven聚合和继承的详细解释
说到聚合与继承我们都非常熟悉,maven相同也具备这种设计原则.以下我们来看一下Maven的pom怎样进行聚合与继承的配置实现. 一.为什么要聚合? 随着技术的飞速发展和各类用户对软件的要求越来越高. ...

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

1、前端代码

2、后端

3、测试

springmvc+ztree v3实现类似表单回显功能的更多相关文章

随机推荐

热门专题

　2、后端

　3、测试