JSON描述组织架构关系并显示

最新推荐文章于 2023-03-23 16:42:28 发布

_(_^_)_

最新推荐文章于 2023-03-23 16:42:28 发布

阅读量313

点赞数

本文链接：https://blog.csdn.net/weixin_42916254/article/details/90040773

版权

本文介绍如何利用JSON数据结构来描述和在页面上呈现组织架构关系，强调递归方法的应用，类似于遍历树形节点的过程。

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

JSON描述组织架构关系并显示

如果要按Json的结构显示在页面，要使用递归的方式。
思想跟遍历结点树一样

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>公司组织架构</title>
	<!-- 1.	请用JSON描述该公司组织架构关系，并简要说明。
		2.	页面显示出该组织架构
 	-->
 	<!-- date:2019/5/5 -->
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	h2{
		text-align: center;
		padding: 20px;
	}
	#organization{
		width: 800px;
		height: 500px;
		margin: 0 auto;
		background: #eee;
	}
	ul{
		padding: 0;
		width: 150px;
		margin: 0 auto;
		font-size: 1.5rem;
	}
	li{
		margin:0 20px;
		font-size: 1rem;
		transition: all 0.5s ease;
	}
	img{
		position: absolute;
		width: 50px;
		display: none;
	}
</style>
<body>
	<div id="organization">
		<h2>组织架构图</h2>
	</div>
</body>
<script type="text/javascript">
	/*某公司是一个大对象，相当于一棵树&#x