尚筹网：菜单维护之在页面显示树形结构的前端部分

最新推荐文章于 2024-02-26 17:28:00 发布

OceanStar的学习笔记

最新推荐文章于 2024-02-26 17:28:00 发布

阅读量585

点赞数

原文链接：https://www.bilibili.com/video/av69857918?p=81

版权

跳转menu-page.jsp

1、创建/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="UTF-8">
<%@ include file="/WEB-INF/include-head.jsp"%>
<body>

	<%@ include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
						<div style="float: right; cursor: pointer;" data-toggle="modal"
							data-target="#myModal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</div>
					</div>
					<div class="panel-body">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

2、/atcrowdfunding-admin-1-webui/src/main/resources/spring-web-mvc.xml配置view-controller跳转到menp-page.jsp

<mvc:view-controller path="/menu/to/page.html" view-name="menu-page"/>

3、将/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-sidebar.jsp中的“许可维护”那一部分替换为：

<li style="height: 30px;"><a href="menu/to/page.html"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a></li>

加入zTree环境

1、
在这里插入图片描述
2、/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp:中

<link rel="stylesheet" href="ztree/zTreeStyle.css" />
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>

显示

1、创建JavaScriptSource File： /atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js

// 由setting.view.addDiyDom属性引用，负责显示自定义图标
// treeId是<ul id="treeDemo" class="ztree"></ul>的id属性值
// treeNode对应每一个树形节点
function showMyIcon(treeId, treeNode) {
	
	// 获取当前节点的id
	var currentNodeId = treeNode.tId;
	
	// 获取新的class值用于替换
	var newClass = treeNode.icon;
	
	// 在当前节点id之后附加“_ico”得到目标span的id
	var targetSpanId = currentNodeId + "_ico";
	
	// 将目标span的旧class移除，添加新class
	$("#"+targetSpanId)
		.removeClass()
		.addClass(newClass)
		.css("background","");
	
	console.log(treeNode);
}

function initWholeTree() {
	// setting对象中包含zTree的设置属性
	var setting = {
		"view": {
			"addDiyDom": showMyIcon,
			"addHoverDom": addHoverDom,
			"removeHoverDom": removeHoverDom
		},
		"data": {
			"key": {
				"url": "notExistsProperty" // 阻止点击节点后跳转
			}
		}
	};

	// 发送Ajax请求获取zNodes数据
	$.ajax({
		"url":"menu/get/whole/tree.json",
		"type":"post",
		"dataType":"json",
		"success":function(response){
			
			var result = response.result;
			
			if(result == "SUCCESS") {
				// 用于显示树形结构的节点数据
				var zNodes = response.data;
				
		
				// 执行树形结构的初始操作
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			}
			
			if(result == "FAILED") {
				layer.msg("加载菜单数据失败！原因是："+response.message);
			}
		},
		"error":function(response){
			layer.msg("加载菜单数据失败！原因是："+response.message);
		}
	});
}

// 在鼠标移入节点范围时添加自定义控件
function addHoverDom(treeId, treeNode) {
	
	// 在执行添加前，先进行判断，如果已经添加过，就停止执行
	// 组装按钮组所在的span标签的id
	var btnGrpSpanId = treeNode.tId + "_btnGrp";
	
	var btnGrpSpanLength = $("#"+btnGrpSpanId).length;
	
	if(btnGrpSpanLength > 0) {
		return ;
	}
	
	// 由于按钮组是放在当前节点中的超链接（a标签）后面，所以先定位到a标签
	// 按id生成规则组装a标签的id
	var anchorId = treeNode.tId + "_a";
	
	// 调用已封装函数生成按钮组
	var $btnGrpSpan = generateBtnGrp(treeNode);
	
	// 在a标签后面追加按钮组
	$("#"+anchorId).after($btnGrpSpan);
	
}

// 在鼠标移出节点范围时删除自定义控件
function removeHoverDom(treeId, treeNode) {
	
	// 组装按钮组所在的span标签的id
	var btnGrpSpanId = treeNode.tId + "_btnGrp";
	
	// 删除对应的元素
	$("#"+btnGrpSpanId).remove();
}

2、/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp的 < body >标签上面：

<script type="text/javascript" src="script/my-menu.js"></script>
<script type="text/javascript">
	$(function(){
		initWholeTree();
	});
</script>

OceanStar的学习笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尚筹网：菜单维护之在页面显示树形结构的前端部分

跳转menu-page.jsp1、创建/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html...
复制链接

扫一扫