这篇文章主要介绍“怎么用JavaScript实现炫酷组织结构图”，在日常操作中，相信很多人在怎么用JavaScript实现炫酷组织结构图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用JavaScript实现炫酷组织结构图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都网站设计、成都做网站,成都做网站公司-创新互联已向上千多家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。
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 var tmp = data[i]; var obj = {"id":data[i].fullname, "name": "" + data[i].fullname+"("+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(); } }); });以上代码用来控制组织结构图图形展示方向，效果请参考演示。
到此，关于“怎么用JavaScript实现炫酷组织结构图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
