首页 > 代码库 > 使用jOrgChart插件， 异步加载生成组织架构图

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

2024-08-31 02:55:13   220人阅读

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

以上代码调用插件，通常但不总是在文件加载。您需要在这个调用中指定列表的标识。例如：

jQuery(document).ready(function() {
    $("#org").jOrgChart();
});

这个调用将追加标记OrgChart默认<body>元，但您可以指定这个选项的一部分。

配置参数

只有3个配置选项：

  1. chartElement – 用于指定的HTML元素要添加组织结构图的标记。[default=’body’]
  2. depth – 告诉代码该解析的深度。默认值为“1”，它指示它要解析它的1999。 [default=-1]
  3. chartClass – 分配给生成标记的样式类的名称。[default=’jOrgChart’]
  4. dragAndDrop – 确定是否启用树节点元素的拖放功能。[default=false]

技术分享

 

3.使用jOrgChart插件，根据返回的数据将其子节点加入到相应的<li></li>中。

三、后台数据数组结构表

首先数据表应该要有id(节点），pid(父节点的id), name的字段。

/**
 * 将一个有父类id和子类id关联的二维数组转化树状数组
 * @author holly
 * @since 2016/10/23
 * @param array $array          有关联的二维数组
 * @param string $parentId      父类id的名称
 * @param string $sonId         子类id的名称
 * @param number $pid           父类id的值，默认为0
 * @return array $arr           多维数组
 */
function FormatTree($array,$parentId,$sonId, $pid = 0)
{
    $arr = array();
    $tem = array();
    foreach ($array as $v) {
        if ($v[$parentId] == $pid) {
            $tem = FormatTree($array,$parentId,$sonId,$v[$sonId]);//递归，调用自身
            // 判断是否存在子数组
            $v[‘son‘] = $tem;
            $arr[] = $v;
        }
    }
    return $arr;
}
/**
    public function ajaxOrganize(){
        $JavaApiData = array(
            ‘SqlCondition‘ => ‘‘,//查询条件
            ‘pageIndex‘ => 1,//页数
            ‘pageSize‘ => 1000000,//每页纪录数
        );
        $url = C("URL")."deptorganmanage.do";//接口地址
        $result = json_decode(post($url, json_encode($JavaApiData),10),JSON_UNESCAPED_UNICODE);//请求接口，得到结果
        $OrganizeList = FormatTree($result[‘data‘],‘pr_deptid‘,‘id‘);
        die(json_encode($OrganizeList));
    }
}

通过后台查询数据将数组通过json_encode转化为json格式的字符串返回前端页面。

技术分享 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组织架构图</title>
  <link rel="stylesheet" href="__PUBLIC__/Admin/css/jquery.jOrgChart.css"/>
<style type="text/css">
/*  .jOrgChart{width: calc(100% - 60px);}
  .jOrgChart .node{writing-mode: horizontal-tb;padding: 0 5px;width: auto;}*/
</style>
</head>
<body  >

  <!--显示组织架构图-->  
  <div id=‘jOrgChart‘></div>

  <!-- jQuery includes -->
  <script type="text/javascript" src="__PUBLIC__/Admin/js/jquery.min.js"></script>
  <script src="__PUBLIC__/Admin/js/jquery.jOrgChart.js"></script>
  <script src="__PUBLIC__/Admin/js/jquery-ui.min.js"></script>
  <script>
    $(function(){  
      //数据返回  
      $.ajax({  
        url: "__APP__/Data/Dept/ajaxOrganize",  
        type: ‘POST‘,  
        dataType: ‘JSON‘,  
        data: {},  
        success: function(result){
            var showlist = $("<ul id=‘org‘ style=‘display:none‘></ul>");  
            showall(result, showlist);  
            $("#jOrgChart").append(showlist);  
            $("#org").jOrgChart( {  
                chartElement : ‘#jOrgChart‘,//指定在某个dom生成jorgchart  
                dragAndDrop : false //设置是否可拖动  
            });
          }  
        });  
    }); 
  //menu_list为json数据  
  //parent为要组合成html的容器 
  var count = 0;
  function showall(menu_list, parent) { 
    count ++; 
    //最多显示10层
    if (count <= 10) {
      $.each(menu_list, function(index, val) {  
        if(val.son.length > 0){ 
          var li = $("<li></li>");  
          li.append("<a href=‘javascript:void(0)‘ onclick=getOrgId("+val.id+");>"+val.deptname+"</a>").append("<ul></ul>").appendTo(parent);  
          //递归显示  
          showall(val.son, $(li).children().eq(1));  
        }else{  
          $("<li></li>").append("<a href=‘javascript:void(0)‘ onclick=getOrgId("+val.id+");>"+val.deptname+"</a>").appendTo(parent);  
        }  
      });
    }

  }  
</script>
</body>
</html>
View Code

 技术分享

 

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


联系
我们