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

随机推荐

Net 高效开发
Net 高效开发之不可错过的实用工具工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件,内存 ...
HDU 1051：Wooden Sticks
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
Quartz2D裁剪圆形头像
// 0. 载入原有图片 UIImage *image = [UIImage imageNamed:icon]; // 1.创建图片上下文 CGFloat margin = border; CGSiz ...
effective c++ 条款4 make sure that objects are initialized before they are used
1 c++ 类的数据成员的初始化发生在构造函数前 class InitialData { public: int data1; int data2; InitialData(int a, int b) ...
android imageButton 透明图片
在Android有许多不规则button.例如: 这个时候,我们假设想做成不规则button的话.第一步就是搞一张边缘透明的png图片,然后用src指定到他.这个时候我们会发现,还没有达到要的效果.还 ...
POJ 2152 Fire
算是我的第一个树形DP 的题: 题目意思:N个城市形成树状结构.现在建立一些消防站在某些城市:每个城市有两个树形cost(在这个城市建立消防站的花费),limit : 我们要是每个城镇都是安全的:就是 ...
[LeetCode62]Unique Paths
题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...
iOS_17_控制开关_TabBarController_由storyboard道路
最后效果图: main.storyboard BeyondViewController.m中有一句关键代码,设置tabbarItem图片的样式(30*30) // // BeyondViewContr ...
照片教你eclipse通过使用gradle 打包Android
gradle其他优点不说,在android当应用程序公布.假设你要算一些渠道,gradle 在节目包装散装优势:下面给大家介绍的图形按eclipse当出口选择Android:例如下面的附图一步一 ...
第四-generation音频：互联网智能声音会火
我把声音分成四个年龄:传统的立体声插头线-蓝牙音响-wifi发出声音-智能声音. 传统的立体声插头线:传统的声音,您必须使用电缆和其他输入源.这样的声音是现在市场上最流行的音频上. 蓝牙音响:蓝牙无线 ...

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

1、前端代码

2、后端

3、测试

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

随机推荐

热门专题

　2、后端

　3、测试