笔者，自认为只是学习了一点皮毛，或者说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来定位和实现的：
原文地址：http://blog.51cto.com/13479739/2158577
时间： 2024-11-05 01:30:40