一、說明
（1）通過后台查詢數據庫，生成樹形數組結構，返回到前台。
（2）需要引入的js插件和css文件：
①jquery.jOrgChart.css
②jquery.min.js
③jquery.jOrgChart.js
（3）使用jOrgChart插件，根據返回的數據將其子節點加入到相應的<li></li>中。
首先，我們的數據表應該要有 id（節點），pid（父節點的id），name的字段，
那么我們要把這個數組轉為樹形數組結構，即將各個元素放在 pid 父類元素的 childrens字段中，下面就是簡單生成樹形數組的代碼。至於展示出來的樣式，可以在html頁面中添加自定義樣式覆蓋它之前的樣式。
注意：
后台返回的數據格式必須如下，其中id，pid字段為必須要有。childrens字段也為必須的，不過字段名可以自己定義，name字段是根據自己業務需求的字段，在這里以name字段作為要顯示的文本內容：
{
"data": [{
"id": 1,
"name": "企業主體信用得分",
"pid": null,
"childrens": [
{
"id": 2,
"name": "企業素質",
"pid": 1,
"childrens": [
{
"id": 5,
"name": "基本信息",
"pid": 2,
"childrens": [
{
"id": 10,
"name": "企業主體信息識別",
"pid": 5,
"childrens": [
]
},
{
"id": 11,
"name": "企業持續注冊時間",
"pid": 5,
"childrens": [
]
},
{
"id": 12,
"name": "注冊資本",
"pid": 5,
"childrens": [
]
}
]
},
{
"id": 6,
"name": "管理認證",
"pid": 2,
"childrens": [
{
"id": 13,
"name": "國際性管理認證",
"pid": 6,
"childrens": [
]
}
]
}
]
},
{
"id": 3,
"name": "履約記錄",
"pid": 1,
"childrens": [
{
"id": 7,
"name": "稅務執行情況",
"pid": 3,
"childrens": [
{
"id": 14,
"name": "是否按時繳納稅款",
"pid": 7,
"childrens": [
]
}
]
},
{
"id": 8,
"name": "網貸情況",
"pid": 3,
"childrens": [
{
"id": 15,
"name": "網貸逾期",
"pid": 8,
"childrens": [
]
}
]
}
]
},
{
"id": 4,
"name": "公共監督",
"pid": 1,
"childrens": [
{
"id": 9,
"name": "行政處罰",
"pid": 4,
"childrens": [
{
"id": 16,
"name": "處罰信息",
"pid": 9,
"childrens": [
]
}
]
}
]
}
]
}
]
}
二、實例：
1、json文件（test.json）（即后台接口返回的json格式的數據）
{
"data": [{
"id": 1,
"name": "企業主體信用得分",
"pid": null,
"childrens": [
{
"id": 2,
"name": "企業素質",
"pid": 1,
"childrens": [
{
"id": 5,
"name": "基本信息",
"pid": 2,
"childrens": [
{
"id": 10,
"name": "企業主體信息識別",
"pid": 5,
"childrens": [
]
},
{
"id": 11,
"name": "企業持續注冊時間",
"pid": 5,
"childrens": [
]
},
{
"id": 12,
"name": "注冊資本",
"pid": 5,
"childrens": [
]
}
]
},
{
"id": 6,
"name": "管理認證",
"pid": 2,
"childrens": [
{
"id": 13,
"name": "國際性管理認證",
"pid": 6,
"childrens": [
]
}
]
}
]
},
{
"id": 3,
"name": "履約記錄",
"pid": 1,
"childrens": [
{
"id": 7,
"name": "稅務執行情況",
"pid": 3,
"childrens": [
{
"id": 14,
"name": "是否按時繳納稅款",
"pid": 7,
"childrens": [
]
}
]
},
{
"id": 8,
"name": "網貸情況",
"pid": 3,
"childrens": [
{
"id": 15,
"name": "網貸逾期",
"pid": 8,
"childrens": [
]
}
]
}
]
},
{
"id": 4,
"name": "公共監督",
"pid": 1,
"childrens": [
{
"id": 9,
"name": "行政處罰",
"pid": 4,
"childrens": [
{
"id": 16,
"name": "處罰信息",
"pid": 9,
"childrens": [
]
}
]
}
]
}
]
}
]
}
2、html頁面(test.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jOrgChart異步加載</title>
<link rel="stylesheet" href='jquery.jOrgChart.css'/>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jquery.jOrgChart.js'></script>
<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>
<script type='text/javascript'>
$(function(){
//數據返回
$.ajax({
url: "test.json",
type: 'GET',
dataType: 'JSON',
data: {action: 'org_select'},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result.data, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某個dom生成jorgchart
dragAndDrop : false //設置是否可拖動
});
}
});
});
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+");>"+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+");>"+val.name+"</a>").appendTo(parent);
}
});
}
</script>
</body>
</html>
Tp3admin的html代碼
{extend name='admin@public/content'}
{block name="content"}
<head>
<meta charset="utf-8">
<title>jquery組織架構插件-jOrgChart.js | jQuery特效|手機微信網站特效| 網頁特效庫</title>
<link rel="stylesheet" href="/static/jorgcharts/css/jquery.jOrgChart.css"/>
<link href="/static/jorgcharts/css/prettify.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="/static/jorgcharts/css/cus.css"/>
<script type="text/javascript" src="/static/jorgcharts/prettify.js"></script>
<script type="text/javascript" src="/static/jorgcharts/jquery-ui.min.js"></script>
<script src="/static/jorgcharts/jquery.jOrgChart.js"></script>
<script>
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
});
</script>
<style>
</style>
</head>
<!--顯示組織架構圖-->
<div id='jOrgChart'></div>
<script type='text/javascript'>
$(function(){
//數據返回
$.ajax({
url: '{:url("$classuri/return_json")}',
type: 'GET',
dataType: 'JSON',
data: {action: 'org_select'},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
console.log(result.data);
showall(result.data, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某個dom生成jorgchart
dragAndDrop : false //設置是否可拖動
});
}
});
});
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)' >"+val.id+val.user_name+"</a>").append("<ul></ul>").appendTo(parent);
//遞歸顯示
showall(val.childrens, $(li).children().eq(1));
}else{
$("<li></li>").append("<a href='javascript:void(0)' >"+val.id+val.user_name+"</a>").appendTo(parent);
}
});
}
</script>
</body>
{/block}
3、效果圖
