使用Javascript来实现的超炫组织结构图(Organization Chart)
2011-09-29 19:06
295 查看
最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫不负有心人,经过几天国内国外的搜索,找到了一个非常好的解决方案,这里分享给大家。
支持向上下左右四个方向展开图表
支持子节点扩展
支持图表拖放
支持图表缩放
整个类库异常强大,非常合适复杂的图形功能需求,如下:
以上代码创建一个实例,注意request部分,这段代码用来取出点击节点后需要显示的字节点,在实际应用中,我们把数据库中取出的数据生成json对象后注入这里生成子节点。
以上代码用来控制组织结构图图形展示方向,效果请参考演示。
在线演示 在线调试
拖放及其缩放特效演示请查看如下应用案例。
应用案例:http://www.triplifes.com
相关资料:http://thejit.org/
文章来源:使用Javascript来实现的超炫组织结构图(Organization Chart)
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)
相关文章推荐
- 使用Javascript来实现的超炫组织结构图(Organization Chart)
- 使用Javascript来实现的超炫组织结构图(Organization Chart)
- 使用 RxJS 实现 JavaScript 的 Reactive 编程
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用Javascript 实现 分享到 新浪微博 QQ 空间等
- 使用javascript实现手机上的touchmove效果
- 使用JAVASCRIPT实现弹出框,过一段时间自动消失
- 使用CSS3实现超炫的Loading(加载)动画效果
- 使用JavaScript实现点击循环切换图片效果
- html使用javascript实现图片滚动无缝拼接
- JavaScript使用原型和原型链实现对象继承的方法详解
- 使用原生javascript实现ajax提交form表单
- 使用JavaScript实现一个“字节码解释器”,并用它重新实现JS科学计算器的后端(后续3)中间休息思考
- 使用SeaJS实现模块化JavaScript开发
- 使用 CSS3 实现超炫的 Loading(加载)动画效果以及cs3的在线制作工具
- javascript中使用replaceAll()函数实现字符替换的方法
- 使用 JavaScript File API 实现文件上传
- IOS中 使用JavaScriptCore 实现OC与JS的交互
- 使用javascript实现json数据以csv格式下载
- javascript实现的下彩色泡泡及下雪(使用了某位大侠分享的继承机制)