前端根据json数据,生成树形组织图
接收的json数据结构
test.json(文件示例):
[
{
"children": [
{
"children": [],
"id": "3",
"orgName": "汽车营销业",
"pid": "root"
},
{
"children": [
{
"children": [],
"id": "12",
"orgName": "公司名称12",
"pid": "2"
},
{
"children": [],
"id": "11",
"orgName": "公司名称11",
"pid": "2"
}
],
"id": "2",
"orgName": "物流业",
"pid": "root"
},
{
"children": [
{
"children": [],
"id": "123",
"orgName": "公司名称1",
"pid": "1"
}
],
"id": "1",
"orgName": "客运业",
"pid": "root"
}
],
"id": "root",
"orgName": "总体",
"pid": ""
}
]
前端处理
1.引入js文件及css样式
前端生成树形结构需要的所有js文件总结:
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<script src="layui/layui.js"
charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/aboutLayui.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/html2canvas.min.js"></script>
<script type='text/javascript' src="js/jquery.jOrgChart.js"></script>
2.html结构
html代码结构部分,装载树形组织结构图的容器。
<!-- 树状组织结构图 -->
<div id='jOrgChart' class='test'></div>
3. js代码渲染画面
使用ajax获取json文件的内容,递归解析json数据,使用前端自带的框架生成组织结构图
$.ajax({
url: "test.json",
type: 'GET',
dataType: 'json',
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(JSON.parse(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.children.length > 0){
var li = $("<li></li>");
li.append("<a href='javascript:void(0)' οnclick=getOrgId("+val+");>"+val.orgName+"</a>").append("<ul></ul>").appendTo(parent);
//递归显示
showall(val.children, $(li).children().eq(1));
}else{
$("<li></li>").append("<a href='javascript:void(0)' οnclick=getOrgId("+val+");>"+val.orgName+"</a>").appendTo(parent);
}
});
}
效果图
展示效果: