手写横向组织机构图

最新推荐文章于 2021-06-22 17:36:44 发布

北漂小白菜

最新推荐文章于 2021-06-22 17:36:44 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： -----【前端】

本文链接：https://blog.youkuaiyun.com/moxinjuaner/article/details/51933730

本文介绍了在项目中遇到的横向组织机构图需求，分享了一位网友手写的简单示例，并详细讲述了将此应用于实际项目的过程，包括动态加载分支和HTML结构的构建。作者强调思路清晰、不断学习和调试的重要性，以及在解决问题过程中享受到的乐趣。

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

最近在公司这边上班的时候，遇到一个需求就是要通过组织机构图的样式来展现客户跟经销商的关系，之前我在项目中遇到的更多的类似树这样的第三方控件纵向的体现层级关系。在网上找了很多的资料，发现纵向的层级结构的图很多，类似tree这样的，但是横向的树真的很少。不过百度还是一个挺强大的东西，让我找到了一个自己想要的。

首先来看一个网友手写的一个简单的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>部门组织架构图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body style="overflow:hidden;">
<div class="strt-wrap" id="strtWrap">
<div class="strt-block">
<div class="strt-part">
	<span class="strt-name">组织架构图</span>
	<div class="line-v"><span></span></div>
	<div class="strt-block">
		<div class="strt-part">
			<span class="line-h line-h-r"></span>
			<div class="line-v"><span></span></div>
			<span class="strt-name">软件开发</span>
          
			<div class="line-v"><span></span></div>
			<div class="strt-block">
				<div class="strt-part">
					<span class="line-h line-h-r"></span>
					<div class="line-v"><span></span></div>
					<span class="strt-name">WEB开发</span>
					<div class="line-v"><span></span></div>
					<div class="strt-block">
						<div class="strt-part">
							<span class="line-h line-h-r"></span>
							<div class="line-v"><span></span></div>
							<span class="strt-name">网页设计</span>
						</div>
						<div class="strt-part">
							<span class="line-h line-h-c"></span>
							<div class="line-v"><span></span></div>
							<span class="strt-name">页面重构</span>
						</div>
						<div class="strt-part">
							<span class="line-h line-h-c"></span>
							<div class="line-v"><span></span></div>
							<span class="st