<!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来定位和实现的：
原文：http://blog.51cto.com/13479739/2158577