使用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插件，异步加载生成组织架构图相关推荐

webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结为什么是webpack webpack一下自己就?了,这绝对是一个重要的原因. 然后我之前项目中都是通过requ ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
artdialog 异步加载页面生成验证码
artdialog 异步加载一个页面需求:例如现在好多网站的登录或注册都是点击弹出一个层出来然后在上面登录.注册这个登录可能在网站的每个页面都会有,但是我们又不能在每个页面都这一段html加 ...
php ajax 下载图片路径,JavaScript_批量下载对路网图片并生成html的实现方法，对路使用ajax实现异步加载内容 - phpStudy...
批量下载对路网图片并生成html的实现方法对路使用ajax实现异步加载内容,在它的js代码中找到了相关代码 type : 'POST', url : '/index.php/request/new_ ...
java ztree 异步加载_插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
react实现异步插件_React-loadable实现组件进行异步加载
React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长.所有,可以对组件进行异步加载处理,可以使 ...
浏览器svg插件_Archer-svgs: 异步加载svg方案
Github地址: ShanaMaid/archer-svgs 哇哦!无限的svgs!你可以使用archer-svgs去异步加载svg并将它缓存在localStorage里,当你再次使用已经加载过的s ...
轮播图插件Swiper的使用（懒加载+异步加载数据）
效果 HTML 引入swiper-bundle.css.swiper-bundle.js <head><link rel="stylesheet" href=&q ...
webpack 异步加载配置文件_Webpack 是怎样运行的？
在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具.它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率. 我们知道一份Webpack配置文件主要包含入口(ent ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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