使用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

以上代碼調用插件,通常但不總是在文件加載。您需要在這個調用中指定列表的標識。例如:

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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM