使用jOrgChart插件，异步加载生成组织架构图

jOrgChart插件是一个用来实现组织结构图的Jquery的插件-

一、特点

1.支持拖拽修改子节点；

2.支持节点缩放展示；

3.方便修改css定义样式；

4.超轻量型；

5.兼容性好，基本支持所有浏览器。

二、异步加载生成自上而下的组织结构图前期准备

1.通过后台查询数据库，生成树形数组结构，返回前台；

2.需要引入js 插件和css 文件

a.jquery.jOrgChart.css（插件样式自行修改）

b.jquery.jOrgChart.js

c. jquery.min.js

d.jquery-ui.min.js (想要拖拽布局的结构，需要引入jQuery UI插件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"  type="text/css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.jOrgChart.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>
<body>
<ul id="org" style="display:none">
<li>
  Food
  <ul>
    <li>Beer</li>
    <li>Vegetables
      <ul>
        <li>Pumpkin</li>
        <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
      </ul>
    </li>
    <li>Bread</li>
    <li>Chocolate
      <ul>
        <li>Topdeck</li>
        <li>Reese's Cups</li>
      </ul>
    </li>
  </ul>
</li>
</ul>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    $("#org").jOrgChart();
});
    
    </script>
</body>
</html>

View Code