利用json数据做父子二级菜单

最新推荐文章于 2023-04-24 11:09:03 发布

Mchange

最新推荐文章于 2023-04-24 11:09:03 发布

阅读量5.8k

点赞数

分类专栏： jquery 前端

本文链接：https://blog.csdn.net/Mchange/article/details/9816505

版权

本文介绍了如何利用JSON数据创建父子二级菜单，避免了数据库层的递归操作。通过将一级菜单和二级菜单分别排序，然后遍历一级菜单并结合二级菜单生成HTML，实现了这一功能。文中提供了HTML、JavaScript和CSS的实现代码，并展示了最终效果。

摘要由CSDN通过智能技术生成

最近做“点滴”的时候，需要用到二级菜单，就是那种二级菜单的pid指向一级菜单的id的那种。

所以自己动手写了一个。

优势是：（可能是我见得少了，自以为优势的地方）：

1.不用在数据库层做递归。只需要把数据查出来即可。（就是为了这点才写的，我用python，返回json比较容易，也比较舒服）

2.参见第一条。

思路：

[
{"name":"Java Book", "id":"3", "pid":"1"},
{"name":"C", "id":"2", "pid":"0"},
{"name":"Java", "id":"1", "pid":"0"},
{"name":"Java Code", "id":"4", "pid":"1"}
];

json数据如上，可以很混乱，符合特殊场景的需要。目标结构如下

Java

--Java Book

--Java Code

1.首先，将一级菜单放入新的json数组中，并按id排序。

2.将剩余的二级菜单放入新的json数组中，并按pid排序。

3.遍历一级菜单的json数组，生成html，并检查二级菜单的json数组，是否有该一级菜单的子菜单，如果有，生成html，

4.完成。

上代码：

html部分：

<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>树形菜单</title>
	<link rel="stylesheet" href="jquery.jmenutree.css">
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.jmenutree.js" type="text/javascript"></script>
	<style>
		
	</style>
	
</head>
<body>
	
	<div id="menuWrapper">
		
	</div>

</bo