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

最新推荐文章于 2019-04-05 19:51:54 发布

I_m_you_papa

最新推荐文章于 2019-04-05 19:51:54 发布

阅读量457

点赞数

分类专栏： util JS spring 文章标签： ztree

util 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

11 篇文章 1 订阅

订阅专栏

在做权限管理系统时，可能会用到插件zTree v3,这是一个功能丰富强大的前端插件，应用很广泛，如异步加载菜单制作、下拉选择、权限分配等。在集成SpringMVC中，我分别实现了zTree的添删改查，本节主要实现类似表单回显功能。如图：

1、前端代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

<%@ 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>

<input type="hidden" name="userId" value="${userId }">

<input type="button" value="测试被选中的节点的id" onclick="test();" />

</body>

</body>

</html>

　2、后端

1）实体类(采用JPA注解，mysql数据库)

1

2

3

4

5

6

7

8

//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方法

　　

1

2

3

4

5

6

7

8

9

10

11

12

@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层

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

}

　　

1

2

3

4

5

6

7

8

9

10

11

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层

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

}

　　

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//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;

}

　　

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

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

　https://www.cnblogs.com/hzhh123/p/5419361.html

　

　

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

I_m_you_papa CSDN认证博客专家 CSDN认证企业博客

码龄7年

19: 原创

8921: 周排名

21万+: 总排名

23万+: 访问

: 等级

1761: 积分

1万+: 粉丝

75: 获赞

39: 评论

449: 收藏

私信

关注

热门文章

分类专栏

nginx 1篇
Quartz 1篇
mq 8篇
SonarQube 3篇
优化 2篇
tomcat 1篇
netty 3篇
springsecurity 1篇
Kong 1篇
IDEA
spring 20篇
springboot 34篇
mybatis 3篇
hibernate
JPA 1篇
mysql 9篇
oracle
macPro 1篇
eclipse 2篇
util 22篇
JS 11篇
linux 5篇
bootstrap 2篇
页面 2篇
大数据 2篇
Elasticsearch 4篇

最新评论

flv.js的追帧、断流重连及实时更新的直播优化方案
小畑: flvExtend.js:2928 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().这个问题该如何处理
使用Java实现简单串口通信
CSDN-Ada助手: Python入门技能树或许可以帮到你：https://edu.csdn.net/skill/python?utm_source=AI_act_python
Spring Session & Spring Security 微服务权限控制
miaoniana: 大佬，我将security也放入了公共模块，并且每个微服务都可以使用@PreAuthorize，但是只有一个微服务能正常登录成功并访问其中的接口，其他模块访问接口时就跳转到了登录页面，也无法登录成功，请问这个是什么情况
RabbitMQ动态创建消息队列和消费者，消费者上下线
rorbinxie654321: 有没有完整的代码，邮箱66504493@qq.com
StompJS使用文档总结
I_m_you_papa: 嗯。。将订阅者队列绑定到交换机，通过路由，可以实现一则消息，多人接受。。主要是服务端处理，客户端只要注册到队列上去就可以了。

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。