<link rel="stylesheet" href='/jquery.jOrgChart.css'/>
<link rel="stylesheet" href='/prettify.css'/>
<link rel="stylesheet" href='/custom.css'/>
<script type='text/javascript' src='jOrgChart/js/jquery.jOrgChart.js'>
<script type='text/javascript' src='jOrgChart/js/prettify.js'>
上面都是插件需要的引入文件 自定义css样式可以在prettify.css和custom.css里面修改
<!--显示组织架构图-->
<div id='jOrgChart' style="width:100%;">
</div>
$(function(){
//请求组织架构图数据
$.ajax({
url:'',
type:'GET',
dataType:'JSON',
data:{},
success:function(result){
var showlist =$("<ul id='org' style='display:none'></ul>");//把自动生成的ul列表隐藏掉
showall(result, showlist);//遍历循环数据插入到ul列表里
$("#jOrgChart").append(showlist);//把ul列表插入到指定容器DIV里
$("#org").jOrgChart( {//这个#org不用在页面新建div 插件方法里就是这样写的 就照着这样写
chartElement :'#jOrgChart',//指定在某个dom生成jorgchart
dragAndDrop :false //设置是否可拖动
});
}
});
});
//遍历循环数据生成节点树
function showall(menu_list, parent) {
$.each(menu_list, function(index, val) {
var li =$("<li></li>");
//判断有没有下级菜单 如果有在次循环遍历
if(val.children!=undefined && val.children.length >0){
if(val.level<=2){//可以根据需求自己选择要不要点击dom树跳转 我这需要跳转所以添加上a标签
li.append("<a class=\"titlecont\" onclick=getOrgId('"+val.name+"','"+val.id+"'); title="+val.name+" href='javascript:void(0)'>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
}else{
li.append("<a href='javascript:void(0)' onclick=getOrgId('"+val.name+"','"+val.id+"'); title="+val.name+">"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
}
if(val.warning){
li.append("<div class=\"container\"><div class=\"dot\"></div><div class=\"pulse\"></div></div>");
}
//递归显示
showall(val.children, $(li).children().eq(1));
}else{
if(val.level<=2){
li.append("<a class=\"titlecont\" title="+val.name+" href='javascript:void(0)' onclick=getOrgId('"+val.name+"','"+val.id+"');>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
}else{
li.append("<a title="+val.name+" href='javascript:void(0)' onclick=getOrgId('"+val.name+"','"+val.id+"');>"+val.name+"</a>").append(" <ul></ul>").appendTo(parent);
}
if(val.warning){
li.append("<div class=\"container\"><div class=\"dot\"></div><div class=\"pulse\"></div></div>");
}
}
});
//添加定时器防止代码不生效 这个是因为我写的样式在dom节点没生成前就执行了 所以没生效 这段代码可以不写
setTimeout(function(){
$(".titlecont").closest("div").css({"width":"140px","height":"43px","line-height":"24px"});
$(".titlecont").next().css({"top":"7px","right":"0px"});
},0)
}
//下边是a标签的跳转到详情
function getOrgId(org_name,org_id){
//判断是否已经打开
if($('#homeTabs').tabs('exists', '详情' )){
//存在则关闭
$('#homeTabs').tabs('close', '详情' );
}
//没打开就跳转到详情下边写具体跳转方法
}
