使用ztree展示树形菜单结构
官网:http://www.treejs.cn/v3/main.php#_zTreeInfo
一、功能简介
在权限系统中,实现给角色指定菜单权限的功能。主要包括以下几点:
读取全部菜单项,并以树形结构展现;
勾选角色拥有的菜单权限,保存入库;
重新编辑角色权限时,默认选中角色已有的菜单权限。
二、界面
三、实现过程
1.在服务端获取全部菜单资源,并转换为json字符串。
@RequestMapping("/edit")
public String edit(Integer roleId, Model model) {
……
//树形菜单资源
List<Map<String, Object>> allResources = resourceService.getTreeMap();
//当前角色已有资源,设置checked和open属性
if (roleId != null) {
Set<CmsResource> roleResources = resourceService.findByRoleId(roleId);
if (roleResources != null && !roleResources.isEmpty()) {
for (Map<String, Object> resource : allResources) {
Integer id =(Integer)resource.get("id");
for (CmsResource roleResource : roleResources) {
if (roleResource.getResourceId().equals(id)) {
resource.put("checked", true);
resource.put("open", true);
break;
}
}
}
}
}
//转换为json字符串
String resourceJson = new Gson().toJson(allResources);
model.addAttribute("resourceJson", resourceJson);
return "/role/edit";
}
其中resourceService.getTreeMap()方法用来获取全部菜单资源,主要包括这几个字段:id,name,pId,open。
2.在view页面引入tree控件,并初始化设置。
<link rel="stylesheet" th:href="@{/static/zTree_v3/css/zTreeStyle/zTreeStyle.css}”>
<script th:src="@{/static/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/zTree_v3/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/static/zTree_v3/js/jquery.ztree.excheck.js}"></script>
3.在view页面中读取服务端传过来的resourceJson字符串,并使用ztree控件加载树形结构。
<script th:inline="javascript">
/*<![CDATA[*/
var zTreeObj;
var setting = {
data: {
simpleData: {
enable: true
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {"Y": "ps", "N": "ps"}
}
};
//加载菜单
$().ready(function () {
var zNodes = eval(/*[[${resourceJson}]]*/);
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
});
//保存之前调用该方法,获取菜单当前选中项
function fillResourceIds(){
var resourceIds=new Array();
var treeObj = $.fn.zTree.getZTreeObj("ztree");
var nodes = treeObj.getCheckedNodes(true);
if(nodes){
for(var i in nodes){
resourceIds.push(nodes[i].id);
}
}
return resourceIds;
}
/*]]>*/
</script>
使用ztree展示树形菜单结构的更多相关文章
- SpringMVC+ZTree实现树形菜单权限配置
计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...
- zTree增加树形菜单格式
result为json字符串 //展示树形菜单 function showMenuTree(result) { console.log("页面展示函数:"+result); //属 ...
- 使用zTree插件构建树形菜单
zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
- WEB开发中前后台树形菜单的展示设计
在WEB开发中经常需要进行树形菜单的展示,本例通过不同角度的总结了如下三种实现方式: 通过JS的递归实现前端菜单DOM的动态创建 通过JSP的include指令结合JSTL表达式语言递归实现菜单的展示 ...
- ztree树形菜单demo
阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...
- zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- ztree树形菜单的增加删除修改和换图标
首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...
随机推荐
- git学习整理(1)git clone 理解
1.git clone 的理解 git clone默认会把远程仓库整个给clone下来 ,只能clone远程库的master分支并在本地默认创建一个master分支 ,无法clone所有分支,若想要其 ...
- 【转】花开正当时,十四款120/128GB SSD横向评测
原文地址:http://www.expreview.com/19604-all.html SSD横评是最具消费指导意义的评测文章,也是各类热门SSD固态硬盘的决斗疆场.SSD评测在行业内已经有不少网站 ...
- LINUX 笔记-date命令
显示当前时间: 命令: focus@ubuntu:~$ date Thu Aug 31 03:01:17 PDT 2017 focus@ubuntu:~$ date '+%x' 08/31/2017 ...
- RabbitMQ 笔记-基本概念
ConnectionFactory.Connection.Channel ConnectionFactory.Connection.Channel,这三个都是RabbitMQ对外提供的API中最基本的 ...
- AOP的实现的几种方式
1.静态代理,实现代码如下,实际上是对装饰器模式的一种应用 interface UserManager { public void addUser(); } class UserManagerImpl ...
- LeetCode 533. Lonely Pixel II (孤独的像素之二) $
Given a picture consisting of black and white pixels, and a positive integer N, find the number of b ...
- IntentService学习
IntentService是一个Service,主要就是Service和HandlerThread的结合 一.使用 不用多说和使用Service差不多,但是比Service多个一个方法实现: publ ...
- Python CRM项目一
开发环境: 语言Python3.X以上 MTV WEB框架 Django 前端框架 jQuery+bootstrap 数据库 MySQL 运行环境 安装Python3.x 安装Django 除IE8以 ...
- ES6新特性之Symbol使用细节
在迭代器章节的时候出现过[Symbol.iterator ]的属性,那么到底Symbo到底是什么? 答:Symbol是ES6新定义的一种值,它既不是字符串,也不是对象,而是为javaScript增加的 ...
- GCD Again
GCD Again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...