使用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>

时间: 2024-10-14 14:46:01

使用ztree展示树形菜单结构的相关文章

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

计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎star(收藏) zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree下载链接:http://www.treejs.cn/v3/main.php#_zTreeInfo 角色信息实体类: package org

关于java 展示树形菜单Tree的一些备忘信息。[bootstrap tree]

最近在项目中,需要迭代,显示树形菜单,这里我们使用的是bootstracp,所以使用的是bootstracp多级列表树, 使用的时候,非常简单,只需 <!-- Required Stylesheets --> <link href="./css/bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="./js/jquery

树形菜单结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>实用的多级树级菜单</title>&

使用zTree插件构建树形菜单

zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可

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

使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--导入eas

zTree 从数据库中动态加载树形菜单

这几天做动态菜单用到了这个插件,目前用的很广泛的一个开源框架,最新发布的QUI框架就是用这个插件开发的菜单部分,因此还是很值得深入研究和学习,通过使用感觉功能很丰富,好多函数不用自己开发和编写,官网上有很详尽的API可以参考,用着算顺手但学习使用的过程中也遇到了一些困难,听过反复测试和查资料都理解了,但也在思考一个问题,怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程度? 这个不仅仅是一个树形结构的菜单,每个节点左边可以有一个复选框,看了看也挺简单的,只需要在setting里面配置一个ch

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

在WEB开发中经常需要进行树形菜单的展示,本例通过不同角度的总结了如下三种实现方式: 通过JS的递归实现前端菜单DOM的动态创建 通过JSP的include指令结合JSTL表达式语言递归实现菜单的展示 通过扩展JSP的标签在后端实现菜单的DOM节点并响应给前端展示 针对第一种方法,可以采用JS的相关组件,或者使用JS的递归调用将服务端相应的数据组装成DOM节点内容,动态添加到菜单的Container中,网上的例子较多,在此不再赘述,本例就后两种方案进行讲解. 通过JSP的include指令结合J

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)

一.问题研究的背景和意义 目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一.在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单.TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点.动态生成树有两种思路:一种是一次性生成全部树节点,另一种是逐级加载树节点(利用AJAX,每次点击节点时查询下

菜单数据(树形)结构的使用-- ---数据的列存储转换为行存储

一.菜单数据表中的存储结构 二.转换后的数据结构 三. 转换过程 1.确定菜单数据的最大级别 /// <summary> /// 获得Nature定义的最大目录级别,以便于确定Nature的DataTable表结构中的列数目 /// </summary> /// <returns></returns> public int GetMaxNatureLevel() { if (dtNature == null && dtNature.Rows.