官网: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展示树形菜单结构的更多相关文章

  1. SpringMVC+ZTree实现树形菜单权限配置

    计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...

  2. zTree增加树形菜单格式

    result为json字符串 //展示树形菜单 function showMenuTree(result) { console.log("页面展示函数:"+result); //属 ...

  3. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

  4. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  5. WEB开发中前后台树形菜单的展示设计

    在WEB开发中经常需要进行树形菜单的展示,本例通过不同角度的总结了如下三种实现方式: 通过JS的递归实现前端菜单DOM的动态创建 通过JSP的include指令结合JSTL表达式语言递归实现菜单的展示 ...

  6. ztree树形菜单demo

    阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...

  7. zTree树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  8. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  9. ztree树形菜单的增加删除修改和换图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...

随机推荐

  1. git学习整理(1)git clone 理解

    1.git clone 的理解 git clone默认会把远程仓库整个给clone下来 ,只能clone远程库的master分支并在本地默认创建一个master分支 ,无法clone所有分支,若想要其 ...

  2. 【转】花开正当时,十四款120/128GB SSD横向评测

    原文地址:http://www.expreview.com/19604-all.html SSD横评是最具消费指导意义的评测文章,也是各类热门SSD固态硬盘的决斗疆场.SSD评测在行业内已经有不少网站 ...

  3. LINUX 笔记-date命令

    显示当前时间: 命令: focus@ubuntu:~$ date Thu Aug 31 03:01:17 PDT 2017 focus@ubuntu:~$ date '+%x' 08/31/2017 ...

  4. RabbitMQ 笔记-基本概念

    ConnectionFactory.Connection.Channel ConnectionFactory.Connection.Channel,这三个都是RabbitMQ对外提供的API中最基本的 ...

  5. AOP的实现的几种方式

    1.静态代理,实现代码如下,实际上是对装饰器模式的一种应用 interface UserManager { public void addUser(); } class UserManagerImpl ...

  6. LeetCode 533. Lonely Pixel II (孤独的像素之二) $

    Given a picture consisting of black and white pixels, and a positive integer N, find the number of b ...

  7. IntentService学习

    IntentService是一个Service,主要就是Service和HandlerThread的结合 一.使用 不用多说和使用Service差不多,但是比Service多个一个方法实现: publ ...

  8. Python CRM项目一

    开发环境: 语言Python3.X以上 MTV WEB框架 Django 前端框架 jQuery+bootstrap 数据库 MySQL 运行环境 安装Python3.x 安装Django 除IE8以 ...

  9. ES6新特性之Symbol使用细节

    在迭代器章节的时候出现过[Symbol.iterator ]的属性,那么到底Symbo到底是什么? 答:Symbol是ES6新定义的一种值,它既不是字符串,也不是对象,而是为javaScript增加的 ...

  10. GCD Again

    GCD Again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...