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

随机推荐

ufldl学习笔记和编程作业：Softmax Regression（softmax回报）
ufldl学习笔记与编程作业:Softmax Regression(softmax回归) ufldl出了新教程.感觉比之前的好,从基础讲起.系统清晰,又有编程实践. 在deep learning高质量 ...
小米2S 中文和英文支持TWRP，真实双系统支持
经过我几天的努力小米2S的TWRP 的功能已经完美了. 支持功能 : 中文和英文显示能相互切换真实双系统功能已经完成95%. 刷入手机方法.由于时间原因我只制作了img文件.没有制作成卡刷包格式. ...
Nginx——事件驱动机制(雷霆追风问题，负载均衡)
事件处理框架所有的worker进程都在ngx_worker_process_cycle方法中循环处理事件,处理分发事件则在ngx_worker_process_cycle方法中调用ngx_proce ...
Godaddy Drupal Update
Godaddy对Drupal默认安装仅仅支持到7.22,眼下Drupal已经升级到7.28,安装完Drupal 7.22后,仅仅能手工升级. 安装Drupal在:https://hostingconn ...
javascript有用小技巧—实现分栏显示
记得给师哥师姐測试考试系统的时候,看到他们的考试页面能够实现隐藏左边的考生信息部分,当时认为好高大上.好人性化. 如今学了javascript,我也能实现这个功能了,以下来显摆一下. 1.页面设计: ...
ezjailserver备份和恢复方法
FreeBSD通过使用ezjail管理jails虚拟机非常方便.公司有多台ezjailsserver,执行n许多jails虚拟机,硬盘故障,做一个整体恢复.感性的方法如以下: 备份就绪: 暗示ezja ...
Android UI设计规则
Android UI技巧 1.1 不该做什么 l 不要照搬你在其他平台的UI设计,应该让用户使用感觉是在真正使用一个Android软件,在你的LOGO显示和平台总体观感之间做好平衡 l 不要过度使 ...
微信电脑版（Mac和Windows）安装
内容简介 1.微信Windows版 2.微信Mac版 3.总结优势微信电脑版众所周知,腾讯公司(马化腾先生执掌的巨头公司)开发的超成功App:微信.一经推出便引发业界轰动,使用人数更是直逼QQ. ...
Java Enum使用演示样品枚举
package cn.edu.shu.web.util; /** * * <p> * ClassName FileType * </p> * <p> * Descr ...
开源Math.NET基础数学类库使用(08)C#进行数值积分
原文:[原创]开源Math.NET基础数学类库使用(08)C#进行数值积分本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4 ...

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

1、前端代码

2、后端

3、测试

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

随机推荐

热门专题

　2、后端

　3、测试