使用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实现树形菜单
实现后的结果大致是这样的 其具体实现过程呢如下: 首先需要引入几个js和css样式: <link href="../../ext-res/ztree/css/demo.css" ...
- ztree 树形菜单结构转JSON
以layui侧边栏菜单为例,实现java以json形式返回给前端侧边栏菜单 前端很常见的侧边栏菜单展示,但是前端有些控件的格式有自己的风格,只要返回标准json就可以进行转换 从数据库结构开始 常用p ...
- Struts2+Hibernate+Spring+ZTree+Dtree 实现树形菜单
2019独角兽企业重金招聘Python工程师标准>>> 1.第一步配置web.xml <?xml version="1.0" encoding=" ...
- MVC +easyui +json 前后端交互动态生成树形菜单
效果图: 1.view端代码实现,引入jquery.easyui 的js文件,创建树形菜单标签<ul>,如下所示: @{ViewBag.Title = "Home Page&qu ...
- Layui 树形菜单使用
一:如果你的项目中用到了树形菜单,Layui 也许是一个不错的选择:Layui 官方网站链接. 二:使用简介: 1.前端界面,项目中导入Layui 框架 2.前端界面,使用树形菜单控件,由于是Java ...
- ztree树形菜单demo
阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下: HTML引入的方式如下: <!DOCTYPE html><html><head> ...
- easyUI前端框架的tree(树)前台展示(树形菜单二)——java
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 easyUI前端框架的t ...
- 使用ztree异步加载数据库数据形成树形菜单
-搞了好久好久,在此记录一下这个这个胜利的时刻!!!!作为一个合格的程序员,任重而道远啊- 项目环境:thinkphp5+mysql+ztree 项目目标:从MySQL数据库获取小区用户位置信息.用户 ...
最新文章
- 清华大学朱文武团队夺冠AAAI 2021国际深度元学习挑战赛
- 换个角度看“Q币门”事件
- 20201021 《计算感知》第3节课 笔记
- 清北学堂(2019 4 28 ) part 1
- 阿里云未来三年投2000亿“搞基”背后的野心和公心(2020年4月)
- 震惊,CSDN居然可以打出爱心?
- doubanactivity_android activity堆栈创建与查找
- h5页面不随微信字体大小改变
- 一根不均匀的绳子,全部烧完需要1个小时,问怎样烧能计时1个小时15分钟
- 【研究】人大赵鑫老师报告:如何以初学者角度写好一篇国际学术论文?
- 27个常用stata命令(2)
- 第六十一章 方法关键字 - Deprecated
- fxmarket:9月25日黄金、沪深300、恒指策略分析
- 学生成绩排名 (用结构体数组按成绩排名)
- Retrofit 原理篇
- Linux系统中read的用法,Linux系统中read的使用技巧
- ArcMap下去除边界外数据(背景值)的方法(转载)
- 吐槽支付宝红包:逼公鸡下蛋的后果
- 【Wordle】Day9:诶嘿,今天没忘
- ARVE: Augmented Reality Applications in Vehicle to Edge Networks
热门文章
- mendeley 笔记_免费文献管理器 Mendeley,其实比你想象的好用!
- pycharm安装怎么选_安装新风系统,地送风和顶送风哪种?专业师傅分析,不纠结怎么选...
- stm32内部低速rtc_STM32时钟RCC详解
- yum php mysql5.5_CentOS 5.5使用yum来安装LAMP(php运行环境)
- 测试交友软件哪个最好用,陌陌与比邻你觉得哪个好用?陌陌比邻两大交友软件对比...
- 超级警探大战悍匪2java_JavaWeb之会话技术
- mysql unescape解码_python mysql escape\n(简单语法错误)
- 实现前后台数据交互(上传/回传单个JSON数据和上传/回传JSON数组)
- python 利器_python利器之切片
- 20210330:二叉树力扣相关习题复习(上)