您的位置：首页 > 运维架构 > 网站架构

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

2017-01-07 17:08 483 查看

jOrgChart插件是一个用来实现组织结构图的Jquery的插件-

一、特点

1.支持拖拽修改子节点；

2.支持节点缩放展示；

3.方便修改css定义样式；

4.超轻量型；

5.兼容性好，基本支持所有浏览器。

二、异步加载生成自上而下的组织结构图前期准备

1.通过后台查询数据库，生成树形数组结构，返回前台；

2.需要引入js 插件和css 文件

a.jquery.jOrgChart.css（插件样式自行修改）

b.jquery.jOrgChart.js

c. jquery.min.js

d.jquery-ui.min.js (想要拖拽布局的结构，需要引入jQuery UI插件)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组织架构图</title>
<link rel="stylesheet" href="__PUBLIC__/Admin/css/jquery.jOrgChart.css"/>
<style type="text/css">
/*  .jOrgChart{width: calc(100% - 60px);}
.jOrgChart .node{writing-mode: horizontal-tb;padding: 0 5px;width: auto;}*/
</style>
</head>
<body  >

<!--显示组织架构图-->
<div id='jOrgChart'></div>

<!-- jQuery includes -->
<script type="text/javascript" src="__PUBLIC__/Admin/js/jquery.min.js"></script>
<script src="__PUBLIC__/Admin/js/jquery.jOrgChart.js"></script>
<script src="__PUBLIC__/Admin/js/jquery-ui.min.js"></script>
<script>
$(function(){
//数据返回
$.ajax({
url: "__APP__/Data/Dept/ajaxOrganize",
type: 'POST',
dataType: 'JSON',
data: {},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
dragAndDrop : false //设置是否可拖动
});
}
});
});
//menu_list为json数据
//parent为要组合成html的容器
var count = 0;
function showall(menu_list, parent) {
count ++;
//最多显示10层
if (count <= 10) {
$.each(menu_list, function(index, val) {
if(val.son.length > 0){
var li = $("<li></li>");
li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.deptname+"</a>").append("<ul></ul>").appendTo(parent);
//递归显示
showall(val.son, $(li).children().eq(1));
}else{
$("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.deptname+"</a>").appendTo(parent);
}
});
}

}
</script>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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