使用jOrgChart插件生成树形图

1.场景描述

在项目中，有这样一个需求，需要把组织部门以树形图的形式展现出来，后来在网上查找了一下相关资料，找到了jOrgChart的jQuery控件，基本可以满足需求。

2.使用说明

（1）首先要在页面代码中引入相关文件，主要为以下三个：

jquery.jOrgChart.css，jquery.min.js，jquery.jOrgChart.js；

如果需要拖动效果，需要另外引入jquery-ui.min.js；

插件下载地址：https://download.csdn.net/download/rhx_1989/10532505

（2）html代码

<ul id="org" style="display:none">
<li>
  XX公司
  <ul>
    <li>信息中心</li>
    <li>
      <ul>
        <li>开发部</li>
        <li>产品部</li>
      </ul>
    </li>
    <li>财务部</li>
    <li>客服中心
      <ul>
        <li>售后部</li>
        <li>实施部</li>
      </ul>
    </li>
  </ul>
</li>
</ul>
<div id="chart" class="orgChart"></div>

（3）JS代码

注意：我的代码中是通过chartElement参数指定了具体的展示元素（id="chart"的div）；jOrgChart()方法中可以不需要参数，默认的展示元素是<body>；dragAndDrop参数是用于拖动效果，false禁止拖动，true允许拖动。

<script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({chartElement:'#chart',dragAndDrop:false});
    });
</script>

3.整体页面代码

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>组织结构图</title>
    
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script src="jquery.jOrgChart.js"></script>
    <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',dragAndDrop:true
        });
    });
    </script>
  </head>
  <body style="text-align:center;">
    <ul id="org" style="display:none">
		<li>XX公司
			<ul>
				<li>信息中心
				<ul>
					<li>开发部</li>
					<li>产品部</li>
				</ul>
				</li>
				<li>财务部</li>
				<li>客服中心
				<ul>
					<li>售后部</li>
					<li>实施部</li>
				</ul>
				</li>
			</ul>
		</li>
	</ul>    
    <!--树形图展示-->
    <div id="chart" class="orgChart" style="width:600px;margin: auto;"></div>
</body>
</html>

4.页面效果展示

注意事项：展示样式可自定义，修改css样式文件即可。

使用jOrgChart插件生成树形图

1.场景描述

2.使用说明

3.整体页面代码

4.页面效果展示

猜你喜欢