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

项目要做组织架构图，要把它做成自上而下的树形结构，于是决定

（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插件， 异步加载生成组织架构图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。