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

随机推荐

c++堆栈实现
A Stack is a data-structure that You can only add an element to the top of the Stack, andYou can onl ...
Ising模型（伊辛模型）
Ising模型(伊辛模型)是一个最简单且能够提供非常丰富的物理内容的模型.可用于描写叙述非常多物理现象,如:合金中的有序-无序转变.液氦到超流态的转变.液体的冻结与蒸发.玻璃物质的性质.森林火灾.城市 ...
log4j 日志大小限制　分成30一个　不按日期分日志　按大小分成　按生产日期
首先说说生成按日期.不解释,大家都懂的,这种方法的缺点是很吃硬盘空间 log4j.rootLogger=INFO,logfile,stdout log4j.logger.java.sql=DEBUG, ...
checkbox的attr("checked")一直以来，undefined问题解决
最近,屌丝要项目开发的需要,需要一个完整的选checkbox特征. 该死的~~这不是很easy什么东西,共checkbox,N多个子的checkbox,总checkbox一旦选定,儿checkbox所 ...
jvm调音
jvm性能调优的目地:1)控制jvm的堆栈大小.比方当你的程序年轻代对象在某个时间段产生的比較多的时候,就须要控制年轻代的堆大小. 同一时候还要控制总的JVM大小避免内存溢出 2)控制GC的行为. G ...
linux基础知识1
1. 硬盘分区分区类型:主分区,扩展分区.逻辑分区: 分区规则: 一个硬盘仅仅能有1到4个主分区: 一个硬盘仅仅能有1个扩展分区: 一个硬盘的主分区和扩展分区最多仅仅能有4个. 扩展分区仅仅能用来包 ...
[渣译文] SignalR 2.0 系列：开始使用SignalR 2.0
原文:[渣译文] SignalR 2.0 系列: 开始使用SignalR 2.0 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP ...
Apple Watch 1.0 开发介绍 1.4 简介使用iOS技术
WatchKit extension可以使用iOS app同样的技术,但是由于他是extension,使用有些技术的时候会有限制,有些不推荐使用.下面是一些介绍以及什么时候使用什么技术: 有些需要权限 ...
Android - 支持不同的设备 - 支持不同的语言
把app的字符串放到另外一个文件中是一个好习惯.Android用android工程中的资源文件夹让这件事变的很简单. 如果使用Android SDK Tools创建工程,这个工具会在工程的根目录下创建 ...
开源Math.NET基础数学类库使用(06)数值分析之线性方程组直接求解
原文:[原创]开源Math.NET基础数学类库使用(06)数值分析之线性方程组直接求解开源Math.NET基础数学类库使用系列文章总目录: 1.开源.NET基础数学计算组件Math.NET(一) ...

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

1、前端代码

2、后端

3、测试

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

随机推荐

热门专题

　2、后端

　3、测试