Javascript实现超炫组织布局图(Organization Chart)
发布时间：2018-10-13 02:12:06 所属栏目：创业 来源：站长网
导读：最近有个内部项目必要行使组织布局图(organization chart)， 探求了一些开源的项目及其类库，发明竟然没有现成的JS类库可以行使，找到一些简朴的JS实现，不外界面及其操纵及其简朴，不外工夫不负有意人，颠末几天海内海外的搜刮，找到了一个很是好的办理方
|
最近有个内部项目必要行使组织布局图(organization chart)， 探求了一些开源的项目及其类库，发明竟然没有现成的JS类库可以行使，找到一些简朴的JS实现，不外界面及其操纵及其简朴，不外工夫不负有意人，颠末几天海内海外的搜刮，找到了一个很是好的办理方案，这里分享给各人。 Javascript InfoVis tools 这个开源的javascript类库可以天生很是炫酷的布局和图形，我选择了个中的一种spacetree范例做为我的组织布局图基本，这种图形可以支持一下特征： 支持向上下阁下四个偏向睁开图表 支持子节点扩展 支持图表拖放 支持图表缩放 整个类库非常强盛，很是吻合伟大的图形成果需求，如下：
 引用的内容：[www.veryhuo.com]
//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工具后注入这里天生子节点。 Copy to Clipboard引用的内容：[www.veryhuo.com]
//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) （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读