jsTree （js 实现多级菜单+点击节点页面跳转）

最新推荐文章于 2024-06-13 09:33:09 发布

EVAO

最新推荐文章于 2024-06-13 09:33:09 发布

阅读量2.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_31683033/article/details/100763998

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

如图，通过jsTree实现动态菜单栏

在这里插入图片描述

阅读jsTree的官方文档之后，你会知道，它有很多实现方式，我下面使用的是Ajax请求，从后台获取json数据返回给jsTree。jsTree的官网：https://www.jstree.com/
点击页面的Download按钮，下载并解压之后，将dist下的文件都复制到你自己的项目中

在这里插入图片描述

前端html,只保留了关键代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.7 -->

<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		
		<!-- 侧边栏【开始】 -->
		<aside class="main-sidebar" id="main-sidebar">
			<section class="sidebar">
				<ul class="sidebar-menu" data-widget="tree">
					<li class="header">菜单栏</li>

				</ul>
				<!-- 放置菜单的div -->
				<div class="sidebar-menu box-header" style="margin-top: 10px;"
					id="menu"></div>
				<img id="sidebar-footer" src="vince/images/QRcode.jpg"
					style="position: fixed; bottom: 0; width: 200px; height: 200px; padding: 20px;"
					alt="Logo">
			</section>
		</aside>
		<!-- 侧边栏【结束】 -->
		<div id="content-wrapper"></div>
	</div>

	<!-- jQuery 3 -->
	<!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
	<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
	<!-- Bootstrap 3.3.7 -->
	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- jstree -->
	<script type="application/javascript" src="dist/js/jstree.js"></script>
	<script type="text/javascript">
		
		//加载菜单【开始】
		var url = "menu/select";
		$(function() {
			$('#menu')
					.jstree({
						"core" : {
							'data' : {
								'url' : url,
								'data' : function(node) {
									return node;

								}
							},
							"themes" : {
								"ellipsis" : true
							//文字多时省略
							},

						},

						"plugins" : [ "wholerow", "types", "themes" ]
					})
					.on(
							'select_node.jstree',
							function(event, data) {
									//添加点击标签的方法
								loadMainContent(data.node.original.href);
								
							});

		});
		//加载菜单【结束】
		function loadMainContent(param) {
			if ($("body").hasClass("sidebar-open")) {
				$(".sidebar-toggle").click();
			}
				$("#content-wrapper").load(param);
			
		}
		
	</script>
</body>
</html>

后台返回前台的json格式，根节点的parent一定是“#”否则无法识别，子节点的parent是对应的根节点的id

在这里插入图片描述

数据存储格式

在这里插入图片描述

EVAO

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jsTree （js 实现多级菜单+点击节点页面跳转）

如图，通过jsTree实现动态菜单栏阅读jsTree的官方文档之后，你会知道，它有很多实现方式，我下面使用的是Ajax请求，从后台获取json数据返回给jsTree。jsTree的官网：https://www.jstree.com/点击页面的Download按钮，下载并解压之后，将dist下的文件都复制到你自己的项目中前端html,只保留了关键代码<!DOCTYPE html&g...
复制链接

扫一扫

专栏目录