笔者，自认为只是学习了一点皮毛，或者说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" >
<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来定位和实现的：
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
