項(xiàng)目要做組織架構(gòu)圖，要把它做成自上而下的樹(shù)形結(jié)構(gòu)，于是決定

（1）通過(guò)后臺(tái)查詢數(shù)據(jù)庫(kù)，生成樹(shù)形數(shù)組結(jié)構(gòu)，返回到前臺(tái)。

（2）使用jOrgChart插件，根據(jù)返回的數(shù)據(jù)將其子節(jié)點(diǎn)加入到相應(yīng)的<li></li>中。

首先，我們的數(shù)據(jù)表應(yīng)該要有 id（節(jié)點(diǎn)），pid（父節(jié)點(diǎn)的id），name的字段，

那么我們要把這個(gè)數(shù)組轉(zhuǎn)為樹(shù)形數(shù)組結(jié)構(gòu)，即將各個(gè)元素放在 pid 父類元素的 childrens字段中，下面就是簡(jiǎn)單生成樹(shù)形數(shù)組的代碼，測(cè)試數(shù)組如下：

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

運(yùn)行測(cè)試數(shù)據(jù)，則得到的樹(shù)形數(shù)組為：

Array ([0] => Array([id] => 1[pid] => 0[name] => 董事長(zhǎng)[childrens] => Array([0] => Array([id] => 2[pid] => 1[name] => 總經(jīng)理[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] => 前 臺(tái)[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] => 教練技術(shù)培訓(xùn)部[childrens] => Array([0] => Array([id] => 12[pid] => 5[name] => 培訓(xùn)專員[childrens] => Array())))[2] => Array([id] => 6[pid] => 2[name] => 財(cái)務(wù)部[childrens] => Array([0] => Array([id] => 13[pid] => 6[name] => 內(nèi)帳會(huì)計(jì)[childrens] => Array())[1] => Array([id] => 14[pid] => 6[name] => 外帳會(huì)計(jì)[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] => 業(yè)務(wù)管理中心[childrens] => Array([0] => Array([id] => 17[pid] => 8[name] => 業(yè)務(wù)管理部[childrens] => Array([0] => Array([id] => 25[pid] => 17[name] => 業(yè)務(wù)助理[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] => 一區(qū)[childrens] => Array([0] => Array([id] => 27[pid] => 19[name] => 區(qū)域助理[childrens] => Array())[1] => Array([id] => 28[pid] => 19[name] => 分行經(jīng)理[childrens] => Array([0] => Array([id] => 29[pid] => 28[name] => 經(jīng)理助理[childrens] => Array())[1] => Array([id] => 30[pid] => 28[name] => 經(jīng)紀(jì)人[childrens] => Array())))))[3] => Array([id] => 20[pid] => 8[name] => 二區(qū)[childrens] => Array())))))[1] => Array([id] => 3[pid] => 1[name] => 綜合管理部[childrens] => Array()))))

以上的數(shù)組，將通過(guò)json_encode返回前臺(tái)，現(xiàn)在我們寫(xiě)前臺(tái)頁(yè)面：

<!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><!--顯示組織架構(gòu)圖--><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(){//數(shù)據(jù)返回$.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',//指定在某個(gè)dom生成jorgchartdragAndDrop : false //設(shè)置是否可拖動(dòng)});}});});//menu_list為json數(shù)據(jù)//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>
在前臺(tái)界面中，接收到的樹(shù)形結(jié)構(gòu)json數(shù)組，要根據(jù)childrens來(lái)遞歸顯示，執(zhí)行結(jié)果如下：

利用jorgchart插件異步加載數(shù)據(jù)，生成組織架構(gòu)圖，簡(jiǎn)單的demo上傳到 http://download.csdn.net/detail/linruonan90/7780381

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。