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控 ...

随机推荐

sql语句中单引号嵌套问题
在sql语句中,我们难免会用到单引号嵌套的时候,但是直接嵌套肯定是不行的,java中用反斜杠做转义符也是不行的,在sql中是用单引号来做转义符的. 比如下面例子是存储过程里查询时的语句示例 exec ...
oracle 优化or 更换in、exists、union all几个字眼，测试没有问题！
oracle 优化or 更换in.exists.union几个字眼.测试没有问题! 根据实际情况选择相应的语句是.假设指数,or全表扫描,in 和not in 应慎用.否则会导致全表扫描. sele ...
cidaemon.exe过程cpu入住率和关闭cidaemon.exe加工方法
问题叙述性说明: 这个时间机器始终是一个奇怪的问题:cidaemon.exe这个过程需要CUP率98%以上,大大影响了正常使用电脑.多个资源管理器出现cidaemon.exe过程,cpu率最高的一 ...
阿里游戏大数据sesson2_RF&GBRT（上）
----------一个小的游戏体验,对于不太熟悉Xlab RF和GBRT同学们都叫参考,不喜勿喷,大神绕道,米姆达. . .. .---------- 6月初的时候LR 做到4.9后一直上不去,看群 ...
DapperLambda发布
DapperLambda发布引言:因为接触过多个ORM,但使用的时候都遇到了各自的一些不够理想的地方,从最早开始开始公司自己分装的,到后面用EF,以及Dapper和DapperExtensions ...
WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...
多功能截图工具(WinSnap)4.5.6 绿色汉化版(附注册码)
http://www.uzzf.com/Soft/9840.html 注册名:www.uzzf.com 注册码:FGE5ML-XD2C0G33-GCMDLRB5
Codeforces 437E The Child and Polygon(间隔DP)
题目链接:Codeforces 437E The Child and Polygon 题目大意:给出一个多边形,问说有多少种切割方法.将多边形切割为多个三角形. 解题思路:首先要理解向量叉积的性质,一 ...
crm操作观点
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; /// <summary> ...
rhel6使用的版本数部分intel xeon处理器时间bug
可惜在总前几天"oracle操作和维护的高级别小组"于.BBQ 上帝说,大量RHEL的bug.这bug在这个例子中,下面的URL: https://access.redhat.co ...

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

1、前端代码

2、后端

3、测试

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

随机推荐

热门专题

　2、后端

　3、测试