jQuery实现层级显示

最新推荐文章于 2023-01-13 09:49:14 发布

qq_32504001

最新推荐文章于 2023-01-13 09:49:14 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前台页面文章标签：多级联动父子级数据递归调用

本文链接：https://blog.youkuaiyun.com/qq_32504001/article/details/88850750

本文介绍如何利用jQuery处理JSON数据，实现多层级数据的递归展示。通过绑定点击事件，初次加载第一级数据，点击后展开下级机构，支持返回上级机构的功能。实现思路包括进入下级机构的递归逻辑和返回上级机构的判断处理，适用于具有父子级关系的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据特点：为JSON数据处理，多层级，存在父子级关系。

方法特点:递归取值

实现功能：初始展现第一级数据，点击后若有下级机构展示下级机构，点击返回可返回到上级机构

思路：

1.该功能主要分为两部分，一是进入下级机构，二是返回上级机构

2.进入下级机构

2.1 首先加载第一级，并绑定一个点击事件

2.2 当父级为第一级时，获取父级ID，循环数据，获取该级数据的children信息，清空当前页面数据，循换添加children信息，

2.3当父级不是第一级，获取父级ID，循环children信息，判断id是否为父级id，若是结束，否则递归执行

3.返回上级

3.1 父级ID为第一级：循环数据，判断父级ID为第一级数据，加载第一级数据

3.2 父级ID不为第一级：从第二级开始循环，循环匹配children信息，若当前id为父级，则不进入子级循环，否则进入子级进行循环判断

注：页面为简单静态页，引入jquery.min.js即可。

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQueryDEMO演示</title>



</head>
<body>
<div class="tbtree">
	<div class="tbtrees">
		<div id="tree">
			

		</div>
	</div>
	
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>


var retObj = 
[{"children":[],"id":"20180822151103835002","pid":"-1","text":"市场经营部"},
{"children":[{"children":[{"children":[{"children":[{"children":[],"id":"20190322170137232006","pid":"20190322170103732005","text":"自由000001"}],"id":"20190322170103732005","pid":"2