利用JOrgChart只需2分钟即可配置简单组织机构图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用JOrgChart只需2分钟即可配置简单组织机构图相关的知识，希望对你有一定的参考价值。
笔者，自认为只是学习了一点皮毛，或者说JOrgChart就是这么简单。需要修改方法、样式直接修改jquery.jOrgChart.js与jquery.jOrgChart.css即可。配置也是那么的简单。
那么这里我们，实现一个简单的横向分布的组织结构吧，原理就是<ul>与<li>的嵌套关系实现组织机构的分布图示。配置的简单代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jOrgChart配置简单的组织结构</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script src="./jquery.jOrgChart.js"></script>
<link rel="stylesheet" href="./jquery.jOrgChart.css"><!--样式-->
</head>
<body >
<ul id="org" style="display:none">
<li>
20180812主一级位置
<ul>
<li>下属二级菜单位置</li>
<li>下属二级
<ul>
<li>三级 </li>
<li>三级
<ul>
<li>四级</li>
<li>四级</li>
</ul>
</li>
</ul>
</li>
<li>下属二级</li>
<li>下属二级</li>
<li>下属二级</li>
<li>下属二级
<ul>
<li>三级
<ul>
<li>四级</li>
</ul>
</li>
<li>三级
<ul>
<li>四级
<ul>
<li>五级</li>
<li>五级</li>
<li>五级</li>
<li>五级</li>
</ul>
</li>
<li>四级</li>
<li>四级</li>
<li>四级</li>
</ul>
</li>
</ul>
</li>
<li>下属二级 </li>
</ul>
</li>
</ul>
<div id="chart" class="orgChart">
<div class="jOrgChart">
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#org").jOrgChart({
chartElement: ‘#chart‘,
dragAndDrop: true
});
});
</script>
</html>运行效果演示：
通过开发人员调试，我们可以看出。JOrgChart的实现原理是通过table来定位和实现的：
以上是关于利用JOrgChart只需2分钟即可配置简单组织机构图的主要内容，如果未能解决你的问题，请参考以下文章