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

最新推荐文章于 2024-12-27 11:16:09 发布

原创

最新推荐文章于 2024-12-27 11:16:09 发布 · 1.4w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jOrgChart #异步加载 #组织架构图

本文介绍如何使用jOrgChart插件结合后台数据，异步加载生成组织架构图。首先，从数据库获取数据并转化为树形结构，接着详细展示了将数据转换为树形数组的代码，并提供了异步加载数据到前端页面的示例，最后给出了包含jOrgChart插件的DEMO链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

（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,
            'p