1.首先是下载js包，为了样式展示好看，在js包里有个bootstrap.min.css
https://download.csdn.net/download/weixin_38644118/11245369
2.前端index.html
<html> <head> <meta charset="UTF-8"> <title>jOrgChart异步加载</title> <link href="jOrgChart-master/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href='jOrgChart-master/jquery.jOrgChart.css'/> <style> a { text-decoration: none; color: #fff; font-size: 12px; } .jOrgChart .node { width: 120px; height: 50px; line-height: 50px; border-radius: 4px; margin: 0 8px; } </style> </head> <body> <!--显示组织架构图--> <div id='jOrgChart'></div> <!-- 全局js --> <script src="jOrgChart-master/jquery.min.js"></script> <!--插件js--> <!--jOrgChart--> <script type="text/javascript" src="jOrgChart-master/jquery.jOrgChart.js"></script> <script type='text/javascript'> function getOrgData(){ $.ajax({ url: "testone.php", type: "POST", dataType: 'JSON', data: {action: 'org_select'}, success: function (result) { var showlist = $("<ul id='org' style='display:none'></ul>"); var bianji = $("<div class='click pull-left' ><span class='bianjih hidden'><i class='iconfont icon-iconfontedit'></i></span><span class='shanchuh hidden'><i class='iconfont icon-shanchu'></i></span></div>"); console.log(result); showall(result, showlist); $("#jOrgChart").append(showlist); $("#org").jOrgChart({ chartElement: '#jOrgChart',//指定在某个dom生成jorgchart dragAndDrop: false //设置是否可拖动 }); $(".node").after(bianji); $(".node-cell").mouseenter(function () { var Node=$(this).children('.node').find('a').attr('pid'); if(Node!=0){ $(this).find('span').removeClass('hidden'); } }) $(".node-cell").mouseleave(function () { $(this).find('span').addClass('hidden'); }) } }); } $(document).ready(function(){ getOrgData(); }); 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)' onclick=getOrgId(" + val.id + "); data='"+val.id+"' pid='"+val.pid+"'>" + val.name + "</a>").append("<ul></ul>").appendTo(parent); //递归显示 showall(val.childrens, $(li).children().eq(1)); } else { $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId(" + val.id + "); data='"+val.id+"' pid='"+val.pid+"'>" + val.name + "</a>").appendTo(parent); } }); } </script> </body> </html> 3.php控制器方法
<?php $data = array( 0=>array( 'id'=>1, 'name'=>'皇上', 'pid'=>null, 'childrens'=>array( 0=>array( 'id'=>2, 'name'=>'张三', 'pid'=>1, 'childrens'=>array( 0=>array( 'id'=>3, 'name'=>'张三大儿子', 'pid'=>2, 'childrens'=>array(), ), 1=>array( 'id'=>6, 'name'=>'张三二儿子', 'pid'=>2, 'childrens'=>array(), ), ), ), 1=>array( 'id'=>4, 'name'=>'王五', 'pid'=>2, 'childrens'=>array( 0=>array( 'id'=>5, 'name'=>'王五大儿子', 'pid'=>4, 'childrens'=>array( 0=>array( 'id'=>8, 'name'=>'王五大孙子', 'pid'=>5, 'childrens'=>array(), ), ), ), 1=>array( 'id'=>7, 'name'=>'王五二儿子', 'pid'=>4, 'childrens'=>array(), ), ), ), ), ), ); echo json_encode($data); 4.效果图
文章来源: https://blog.csdn.net/weixin_38644118/article/details/92653576