Javascript实现超炫组织结构图(Organization Chart)
来源:程序员人生 发布时间:2014-01-26 13:14:02 阅读次数:3637次
最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫不负有心人,经过几天国内国外的搜索,找到了一个非常好的解决方案,这里分享给大家。
Javascript InfoVis tools
这个开源的javascript类库可以生成非常炫酷的结构和图形,我选择了其中的一种spacetree类型做为我的组织结构图基础,这种图形可以支持一下特性:
支持向上下左右四个方向展开图表
支持子节点扩展
支持图表拖放
支持图表缩放
整个类库异常强大,非常合适复杂的图形功能需求,如下:
//Create a new instance
var st = new $jit.ST({
'injectInto': 'orgchart',
//set duration for the animation
duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
levelDistance: 50,
levelsToShow: 1,
Node: {
height: 45,
width: 120,
type: 'nodeline',
color:'#23A4FF',
lineWidth: 2,
align:"center",
overridable: false
},
Edge: {
type: 'bezier',
lineWidth: 2,
color:'#23A4FF',
overridable: true
},
//Retrieve the json data from database and create json objects for org chart
request: function(nodeId, level, onComplete) {
//Generate sample data
if(nodeId!='peter wang'&&nodeId!='William chen'){
var data= [{fullname:'peter wang',title:'engineer'},{fullname:'William chen',title:'senior engineer'}];
var objs = [];
for(var i=0;i<data.length;i++) {
var tmp = data[i];
var obj = {"id":data[i].fullname, "name": "<div class='orgchartnode'>" + data[i].fullname+"</div>("+data[i].title + ")"};
objs.push(obj);
}
var nodeobjs={};
nodeobjs.id = nodeId;
nodeobjs.children = objs;
onComplete.onComplete(nodeId, nodeobjs);
}else{
var nodeobjs={};
onComplete.onComplete(nodeId, nodeobjs);
}
},
以上代码创建一个实例,注意request部分,这段代码用来取出点击节点后需要显示的字节点,在实际应用中,我们把数据库中取出的数据生成json对象后注入这里生成子节点。
//Change chart direction
$("#top").click(function(){
$("#orgchartori").fadeOut();
st.switchPosition($("#top").attr("id"), "animate", {
onComplete: function(){
$("#orgchartori").fadeIn();
}
});
});
$("#bottom").click(function(){
$("#orgchartori").fadeOut();
st.switchPosition($("#bottom").attr("id"), "animate", {
onComplete: function(){
$("#orgchartori").fadeIn();
}
});
});
$("#right").click(function(){
$("#orgchartori").fadeOut();
st.switchPosition($("#left").attr("id"), "animate", {
onComplete: function(){
$("#orgchartori").fadeIn();
}
});
});
$("#left").click(function(){
$("#orgchartori").fadeOut();
st.switchPosition($("#right").attr("id"), "animate", {
onComplete: function(){
$("#orgchartori").fadeIn();
}
});
});
以上代码用来控制组织结构图图形展示方向,效果请参考演示。
在线演示 在线调试
拖放及其缩放特效演示请查看如下应用案例。
应用案例:http://www.triplifes.com
相关资料:http://thejit.org/
文章来源:使用Javascript来实现的超炫组织结构图(Organization Chart)
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠