未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
组织架构图插件简介

组织架构图定义:

组织结构图是组织架构的直观反映,是最常见的表现雇员、职称和群体关系的一种图表,它形象地反映了组织内各机构、岗位上下左右相互之间的关系。组织架构图是从上至下、可自动增加垂直方向层次的组织单元、图标列表形式展现的架构图,以图形形式直观的表现了组织单元之间的相互关联,并可通过组织架构图直接查看组织单元的详细信息,还可以查看与组织架构关联的职位、人员信息。

下面介绍三种关于组织架构图的插件

第一种:jOrgChart

插件地址:https://github.com/wesnolte/jOrgChart

插件简介:给定一个嵌套无序列表元素很容易使用。
拖放功能允许重新排序树和底层的<ul>结构。
通过点击相应的节点来显示/隐藏树的特定分支。
节点可以包含除<li>和<ul>之外的任何数量的HTML。
简单风格。
您可以指定子树应该开始折叠,这对于非常大的树很有用

插件配置属性:

  1. $.fn.jOrgChart.defaults = {  
  2.   chartElement : 'body',  
  3.   depth      : -1,  
  4.   chartClass : "jOrgChart",  
  5.   dragAndDrop: false  
  6. };  

chartElement - 用于指定要将OrgChart标记附加到哪个HTML元素。 [default ='body']
depth - 告诉代码解析到什么深度。 默认值“-1”[default = -1]
chartClass - 分配给生成的标记的样式类的名称。 [default ='jOrgChart']
dragAndDrop - 确定是否启用树节点元素的拖放功能。 [default = false]

使用方式:

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>  
  3.       
  4.     <script src="jquery.jOrgChart.js"></script>  
  5.   
  6.     <script>  
  7.     jQuery(document).ready(function() {  
  8.         $("#org").jOrgChart({  
  9.             chartElement : '#chart',  
  10.             dragAndDrop  : true  
  11.         });  
  12.     });  
  13.     </script>  
  14.    <ul id="org" style="display:none">  
  15.      <li>  
  16.        Food  
  17.        <ul>  
  18.          <li id="beer">Beer</li>  
  19.          <li>Vegetables  
  20.            <a href="http://wesnolte.com" target="_blank">Click me</a>  
  21.            <ul>  
  22.              <li>Pumpkin</li>  
  23.              <li>  
  24.                 <a href="http://tquila.com" target="_blank">Aubergine</a>  
  25.                 <p>A link and paragraph is all we need.</p>  
  26.              </li>  
  27.            </ul>  
  28.          </li>  
  29.          <li class="fruit">Fruit  
  30.            <ul>  
  31.              <li>Apple  
  32.                <ul>  
  33.                  <li>Granny Smith</li>  
  34.                </ul>  
  35.              </li>  
  36.              <li>Berries  
  37.                <ul>  
  38.                  <li>Blueberry</li>  
  39.                  <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>  
  40.                  <li>Cucumber</li>  
  41.                </ul>  
  42.              </li>  
  43.            </ul>  
  44.          </li>  
  45.          <li>Bread</li>  
  46.          <li class="collapsed">Chocolate  
  47.            <ul>  
  48.              <li>Topdeck</li>  
  49.              <li>Reese's Cups</li>  
  50.            </ul>  
  51.          </li>  
  52.        </ul>  
  53.      </li>  
  54.    </ul>          

第二种插件:jquery-orgchart 

插件地址:https://github.com/caprica/jquery-orgchart

插件简介:

HTML标记,包括可点击的超链接;

源列表中的所有属性都会被编入相应的图表节点(例如,您可以使用自己的“数据”属性注释节点);

可选地向每个图表节点添加“附件”节点(例如,用于“助手到类型”关系);

用于将图表限制为所需级别数量,并在单个堆栈中显示剩余级别的选项;

从源列表(默认都启用)复制CSS样式,类,HTML数据属性和标题属性(对工具提示或外部工具提示插件有用)的选项;

可选的回调来处理点击的图表节点;

通过覆盖少量的CSS样式规则,容易改变图表的外观;

插件配置属性:

  1. $.fn.orgChart.defaults = {  
  2.        container  : $("body"),  
  3.        depth      : -1,  
  4.        levels     : -1,  
  5.        showLevels : -1,  
  6.        stack      : false,  
  7.        chartClass : "orgChart",  
  8.        hoverClass : "hover",  
  9.        nodeText   : function($node) {return $node.clone().children("ul,li").remove().end().html();},  
  10.        interactive: false,  
  11.        fade       : false,  
  12.        speed      : "slow",  
  13.        nodeClicked: function($node) {},  
  14.        copyClasses: true,  
  15.        copyData   : true,  
  16.        copyStyles : true,  
  17.        copyTitle  : true,  
  18.        replace    : true  
  19.    };  

chartClass(s​​tring)用于指定要添加到创建的图表的CSS类。

container(jQuery元素)指定将包含图表的元素。

copyClasses(boolean)指定CSS类是否应该从源列表复制到关联的图表节点。

copyData(boolean)指定是否应将数据属性值从源列表复制到关联的图表节点。

copyStyles(boolean)指定CSS“style”属性值是否应该从源列表复制到关联的图表节点。

copyTitle(boolean)指定是否应该将“title”属性值从源列表复制到关联的图表节点。

深度(整数)与堆栈配合使用,以配置堆叠在什么级别生效。

fade(boolean)用于在显示/隐藏图表节点时启用衰减动画。

hoverClass(s​​tring)用于指定在鼠标悬停时动态添加到图表节点的CSS类。

interactive(布尔)用于启用交互式图表功能,例如单击以显示/隐藏子节点。

levels(整数)指定源列表中深度的多少级别用于创建图表。

当单击图表节点时调用的nodeClicked(function)回调函数:第一个参数是基础节点元素;第二个参数是被点击的可视化组件(一个jQuery对象)。

nodeText(function)回调函数用于提取节点文本上下文。

replace(boolean)true如果图表容器在生成图表之前应该清空。

showLevels(integer)指定最初显示的图表级别。

速度(jQuery速度)指定动画速度(如果启用淡化)。

stack(boolean)用于启用堆叠。


使用方式:

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>Org Chart</title>  
  5.         <link rel="stylesheet" href="demo.css"/>  
  6.         <link rel="stylesheet" href="../jquery.orgchart.css"/>  
  7.          <script src="jquery.js"></script>  
  8.         <script src="../jquery.orgchart.js"></script>  
  9.         <script>  
  10.         $(function() {  
  11.             $("#organisation").orgChart({container: $("#main")});  
  12.         });  
  13.         </script>  
  14.     </head>  
  15.     <body>  
  16.         <div id="left">  
  17.             <ul id="organisation">  
  18.                 <li><adjunct>Alfred</adjunct><em>Batman</em>  
  19.                     <ul>  
  20.                         <li>Batman Begins<br/>  
  21.                             <img class="star" src="star-one.png">  
  22.                             <img class="star" src="star-one.png">  
  23.                             <img class="star" src="star-one.png">  
  24.                             <img class="star" src="star-one.png">  
  25.                             <ul>  
  26.                                 <li>Ra's Al Ghul</li>  
  27.                                 <li>Carmine Falconi</li>  
  28.                             </ul>  
  29.                         </li>  
  30.                         <li>The Dark Knight<br/>  
  31.                             <img class="star" src="star-one.png">  
  32.                             <img class="star" src="star-one.png">  
  33.                             <img class="star" src="star-one.png">  
  34.                             <img class="star" src="star-one.png">  
  35.                             <img class="star" src="star-one.png">  
  36.                             <ul>  
  37.                                 <li>Joker</li>  
  38.                                 <li>Harvey Dent</li>  
  39.                             </ul>  
  40.                         </li>  
  41.                         <li>The Dark Knight Rises<br/>  
  42.                             <img class="star" src="star-one.png">  
  43.                             <img class="star" src="star-one.png">  
  44.                             <img class="star" src="star-one.png">  
  45.                             <img class="star" src="star-one.png">  
  46.                             <img class="star" src="star-half.png">  
  47.                             <ul>  
  48.                                 <li>Bane</li>  
  49.                                 <li>Talia Al Ghul</li>  
  50.                             </ul>  
  51.                         </li>  
  52.                     </ul>  
  53.                 </li>  
  54.             </ul>  
  55.         </div>  
  56.         <div id="content">  
  57.             <h1>JQuery/CSS Organisation Chart</h1>  
  58.             <div id="main">  
  59.             </div>  
  60.             <div class="text">  
  61.                 <h2>JQuery</h2>  
  62.                 <pre>  
  63.                 $("#organisation").orgChart({container: $("#main")});  
  64.                 </pre>  
  65.             </div>  
  66.         </div>  
  67.   </body>  
  68. </html>  



第三种插件:OrgChart

下载地址:https://github.com/dabeng/OrgChart

插件简介:

支持本地数据和远程数据(JSON)。

基于CSS3过渡的平滑展开/折叠效果。

将图表对齐到4个方向。

允许用户通过拖放节点更改组织结构。

允许用户动态编辑组织图并将最终层次结构保存为JSON对象。

支持将图表导出为图片。

支持平移和缩放

用户可以采用多种解决方案构建庞大的组织图(请参考多层或混合布局部分)

触摸启用插件的移动divice

插件配置属性:

  1. var defaultOptions = {  
  2.      'nodeTitle': 'name',  
  3.      'nodeId': 'id',  
  4.      'toggleSiblingsResp': false,  
  5.      'depth': 999,  
  6.      'chartClass': '',  
  7.      'exportButton': false,  
  8.      'exportFilename': 'OrgChart',  
  9.      'parentNodeSymbol': 'fa-users',  
  10.      'draggable': false,  
  11.      'direction': 't2b',  
  12.      'pan': false,  
  13.      'zoom': false  
  14.    };  

nodeTitle: 标题[deafult=name]  
nodeId:id[deafult=id],  
toggleSiblingsResp:点击左/右箭头分别显示/隐藏左/右兄弟节点[default='false']
depth: 指定最初显示的图表级别[deafult=999],  
chartClass:节点样式[default=''],  
exportButton: 是否显示导出按钮[default='false'],  
exportFilename:导出图片名称 [default='OrgChart'],  
parentNodeSymbol:折叠图标 [default='fa-users'],  
draggable: 是否可以拖动[default='false'],  
direction:显示方向 [default='t2b'],  
pan:移动图形[default='false'] 
zoom:缩放图形[default='false']

插件使用方式:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   
  8.     <title>Organization Chart Plugin</title>  
  9.   
  10.     <link rel="icon" type="image/x-icon" href="../img/logo.ico">  
  11.     <link rel="stylesheet" href="../css/font-awesome.min.css">  
  12.     <link rel="stylesheet" href="../css/jquery.orgchart.css">  
  13.     <link rel="stylesheet" href="../css/style.css">  
  14.   
  15. </head>  
  16. <body>  
  17.   <div id="chart-container"></div>  
  18.   <div class="home-link">  
  19.     <a href="https://github.com/dabeng/OrgChart" >More orgcharts</a>  
  20.     <i class="fa fa-star"></i>  
  21.   </div>  
  22.   <script type="text/javascript" src="../js/jquery.min.js"></script>  
  23.   <script type="text/javascript" src="../js/jquery.mockjax.min.js"></script>  
  24.   <script type="text/javascript" src="../js/jquery.orgchart.js"></script>  
  25.   <script type="text/javascript" src="scripts.js"></script>  
  26.   </body>  
  27. </html>  

数据源:
  1. <pre name="code" class="plain">'use strict';  
  2.   
  3. (function($){  
  4.   
  5.   $(function() {  
  6.   
  7.     $.mockjax({  
  8.       url: '/orgchart/initdata',  
  9.       responseTime: 1000,  
  10.       contentType: 'application/json',  
  11.       responseText: {  
  12.         'name': 'Lao Lao',  
  13.         'title': 'general manager',  
  14.         'children': [  
  15.           { 'name': 'Bo Miao', 'title': 'department manager' },  
  16.           { 'name': 'Su Miao', 'title': 'department manager',  
  17.             'children': [  
  18.               { 'name': 'Tie Hua', 'title': 'senior engineer' },  
  19.               { 'name': 'Hei Hei', 'title': 'senior engineer',  
  20.                 'children': [  
  21.                   { 'name': 'Pang Pang', 'title': 'engineer' },  
  22.                   { 'name': 'Xiang Xiang', 'title': 'UE engineer' }  
  23.                 ]  
  24.               }  
  25.             ]  
  26.           },  
  27.           { 'name': 'Yu Jie', 'title': 'department manager' },  
  28.           { 'name': 'Yu Li', 'title': 'department manager' },  
  29.           { 'name': 'Hong Miao', 'title': 'department manager' },  
  30.           { 'name': 'Yu Wei', 'title': 'department manager' },  
  31.           { 'name': 'Chun Miao', 'title': 'department manager' },  
  32.           { 'name': 'Yu Tie', 'title': 'department manager' }  
  33.         ]  
  34.       }  
  35.     });  
  36.   
  37.     $('#chart-container').orgchart({  
  38.       'data' : '/orgchart/initdata',  
  39.       'depth': 2,  
  40.       'nodeContent': 'title'  
  41.     });  
  42.   
  43.   });  
  44.   
  45. })(jQuery);  

注意事项:

截图属性时外层div设置为可见的:$("div").css("overflow","visible");

createNote可以调用函数在content添加节点

例如:

  1. 'createNode': function($node, data) {  
  2.    var secondMenuIcon = $('<i>', {  
  3.      'class': 'fa fa-info-circle second-menu-icon',  
  4.      click: function() {  
  5.        $(this).siblings('.second-menu').toggle();  
  6.      }  
  7.    });  
  8.    var secondMenu = '<div class="second-menu"><img class="avatar" src="../img/avatar/' + data.id + '.jpg"></div>';  
  9.    $node.append(secondMenuIcon).append(secondMenu);  
  10.  }  
改变上下左右箭头可以修改源码
替换上下右左icon-chevron-up icon-chevron-down icon-chevron-right icon-chevron-left

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
jQuery实现图片放大预览效果
jQuery选择器
FlexSlider
jQuery开发常用
锋利的jQuery学习笔记(4)-DOM操作
Jquery元素追加和删除
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!