項目要做組織架構圖，要把它做成自上而下的樹形結構，于是決定

（1）通過后臺查詢數據庫，生成樹形數組結構，返回到前臺。

（2）使用jOrgChart插件，根據返回的數據將其子節點加入到相應的<li></li>中。

首先，我們的數據表應該要有 id（節點），pid（父節點的id），name的字段，

那么我們要把這個數組轉為樹形數組結構，即將各個元素放在 pid 父類元素的 childrens字段中，下面就是簡單生成樹形數組的代碼，測試數組如下：

<?php header('Content-type:text/html;charset:utf-8'); /** * 將數組格式array('id'=> , 'pid'=> , 'name'=> )生成樹形數組格式 * array('id'=> , 'pid'=> , 'name'=> , childrens => array() ) */ function returnArray($result){$newResult = array();if( !empty($result) ){foreach ($result as $k => $v) {$arrTep = $v;$arrTep['childrens'] = array();//父類ID是0時，代表沒有父類ID，為根節點if( 0 == $v['pid'] ){$newResult[] = $arrTep;continue;}if( 0 != $v['pid']){//添加不入數組中的子節點，可能是沒有父類節點，那么將其當成根節點if(false === updateArray($newResult, $arrTep) ){$arrTep = array('id'=> $arrTep['id'], 'pid'=>0, 'name'=>$arrTep['name'], 'childrens'=>array($arrTep));$newResult[] = $arrTep;}}}}//測試數組是否生成樹形數組//return $newResult;echo json_encode($newResult); }/** * 將當前節點插入到新的樹形數組中 * @param $newResult 樹形數組地址 * @param $arrTep 當前節點 */ function updateArray( &$newResult, $arrTep ){if( !empty($newResult) ){foreach ($newResult as $k => $v) {//查詢當前節點的id是否與新的樹形數組的id一致，如果是，那么將當前節點存放在樹形數組的childrens字段中if( $v['id'] == $arrTep['pid']){$newResult[$k]['childrens'][] = $arrTep;return true;}elseif( !empty($v['childrens']) ){//遞歸調用，查詢樹形數組的子節點與當前節點的關系if(true === updateArray( $newResult[$k]['childrens'], $arrTep )){return true;}}}}return false;}//測試 $result = Array (0 => Array('id' => 1,'pid' => 0,'name' => '董事長'),1 => Array('id' => 2,'pid' => 1,'name' => '總經理'),2 => Array('id' => 3,'pid' => 1,'name' => '綜合管理部'),3 => Array('id' => 4,'pid' => 2,'name' => '人力行政中心'),4 => Array('id' => 5,'pid' => 2,'name' => '教練技術培訓部'),5 => Array('id' => 6,'pid' => 2,'name' => '財務部'),6 => Array('id' => 7,'pid' => 2,'name' => '客服部'),7 => Array('id' => 8,'pid' => 2,'name' => '業務管理中心'),8 => Array('id' => 9,'pid' => 4,'name' => '人力資源部'),9 => Array('id' => 10,'pid' => 4,'name' => '行政部'),10 => Array('id' => 11,'pid' => 4,'name' => '企劃部'),11 => Array('id' => 12,'pid' => 5,'name' => '培訓專員'),12 => Array('id' => 13,'pid' => 6,'name' => '內帳會計'),13 => Array('id' => 14,'pid' => 6,'name' => '外帳會計'),14 => Array('id' => 15,'pid' => 6,'name' => '出 納'),15 => Array('id' => 16,'pid' => 7,'name' => '客服專員'),16 => Array('id' => 17,'pid' => 8,'name' => '業務管理部'),17 => Array('id' => 18,'pid' => 8,'name' => '信息部'),18 => Array('id' => 19,'pid' => 8,'name' => '一區'),19 => Array('id' => 20,'pid' => 8,'name' => '二區'),20 => Array('id' => 21,'pid' => 9,'name' => '人力資源專員'),21 => Array('id' => 22,'pid' => 10,'name' => '前 臺'),22 => Array('id' => 23,'pid' => 10,'name' => '行政專員'),23 => Array('id' => 24,'pid' => 11,'name' => '企劃專員'),24 => Array('id' => 25,'pid' => 17,'name' => '業務助理'),25 => Array('id' => 26,'pid' => 18,'name' => 'IT專員'),26 => Array('id' => 27,'pid' => 19,'name' => '區域助理'),27 => Array('id' => 28,'pid' => 19,'name' => '分行經理'),28 => Array('id' => 29,'pid' => 28,'name' => '經理助理'),29 => Array('id' => 30,'pid' => 28,'name' => '經紀人')); /*echo "測試結果"; echo '<pre>'; print_r( returnArray($result) );*/ if('org_select' == $_POST['action']){returnArray($result); }?>

運行測試數據，則得到的樹形數組為：

Array ([0] => Array([id] => 1[pid] => 0[name] => 董事長[childrens] => Array([0] => Array([id] => 2[pid] => 1[name] => 總經理[childrens] => Array([0] => Array([id] => 4[pid] => 2[name] => 人力行政中心[childrens] => Array([0] => Array([id] => 9[pid] => 4[name] => 人力資源部[childrens] => Array([0] => Array([id] => 21[pid] => 9[name] => 人力資源專員[childrens] => Array())))[1] => Array([id] => 10[pid] => 4[name] => 行政部[childrens] => Array([0] => Array([id] => 22[pid] => 10[name] => 前 臺[childrens] => Array())[1] => Array([id] => 23[pid] => 10[name] => 行政專員[childrens] => Array())))[2] => Array([id] => 11[pid] => 4[name] => 企劃部[childrens] => Array([0] => Array([id] => 24[pid] => 11[name] => 企劃專員[childrens] => Array())))))[1] => Array([id] => 5[pid] => 2[name] => 教練技術培訓部[childrens] => Array([0] => Array([id] => 12[pid] => 5[name] => 培訓專員[childrens] => Array())))[2] => Array([id] => 6[pid] => 2[name] => 財務部[childrens] => Array([0] => Array([id] => 13[pid] => 6[name] => 內帳會計[childrens] => Array())[1] => Array([id] => 14[pid] => 6[name] => 外帳會計[childrens] => Array())[2] => Array([id] => 15[pid] => 6[name] => 出 納[childrens] => Array())))[3] => Array([id] => 7[pid] => 2[name] => 客服部[childrens] => Array([0] => Array([id] => 16[pid] => 7[name] => 客服專員[childrens] => Array())))[4] => Array([id] => 8[pid] => 2[name] => 業務管理中心[childrens] => Array([0] => Array([id] => 17[pid] => 8[name] => 業務管理部[childrens] => Array([0] => Array([id] => 25[pid] => 17[name] => 業務助理[childrens] => Array())))[1] => Array([id] => 18[pid] => 8[name] => 信息部[childrens] => Array([0] => Array([id] => 26[pid] => 18[name] => IT專員[childrens] => Array())))[2] => Array([id] => 19[pid] => 8[name] => 一區[childrens] => Array([0] => Array([id] => 27[pid] => 19[name] => 區域助理[childrens] => Array())[1] => Array([id] => 28[pid] => 19[name] => 分行經理[childrens] => Array([0] => Array([id] => 29[pid] => 28[name] => 經理助理[childrens] => Array())[1] => Array([id] => 30[pid] => 28[name] => 經紀人[childrens] => Array())))))[3] => Array([id] => 20[pid] => 8[name] => 二區[childrens] => Array())))))[1] => Array([id] => 3[pid] => 1[name] => 綜合管理部[childrens] => Array()))))

以上的數組，將通過json_encode返回前臺，現在我們寫前臺頁面：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>jOrgChart異步加載</title><link rel="stylesheet" href='bootstrap.min.css'/><link rel="stylesheet" href='jquery.jOrgChart.css'/></head><body><!--顯示組織架構圖--><div id='jOrgChart'></div><script type='text/javascript' src='jquery-1.10.2.min.js'></script><script type='text/javascript' src='jquery.jOrgChart.js'></script><script type='text/javascript'>$(function(){//數據返回$.ajax({url: "ajaxReturn1.php",type: 'POST',dataType: 'JSON',data: {action: 'org_select'},success: function(result){var showlist = $("<ul id='org' style='display:none'></ul>");showall(result, showlist);$("#jOrgChart").append(showlist);$("#org").jOrgChart( {chartElement : '#jOrgChart',//指定在某個dom生成jorgchartdragAndDrop : false //設置是否可拖動});}});});//menu_list為json數據//parent為要組合成html的容器function showall(menu_list, parent) {$.each(menu_list, function(index, val) {if(val.childrens.length > 0){var li = $("<li></li>");li.append("<a href='javascript:void(0)' οnclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);//遞歸顯示showall(val.childrens, $(li).children().eq(1));}else{$("<li></li>").append("<a href='javascript:void(0)' οnclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);}});}</script></body></html>
在前臺界面中，接收到的樹形結構json數組，要根據childrens來遞歸顯示，執行結果如下：

利用jorgchart插件異步加載數據，生成組織架構圖，簡單的demo上傳到 http://download.csdn.net/detail/linruonan90/7780381

總結

以上是生活随笔為你收集整理的使用jOrgChart插件， 异步加载生成组织架构图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。