Javascript實(shí)現(xiàn)超炫組織結(jié)構(gòu)圖(Organization Chart)
來(lái)源：程序員人生 發(fā)布時(shí)間：2014-01-26 13:14:02 閱讀次數(shù)：3828次
最近有個(gè)內(nèi)部項(xiàng)目需要使用組織結(jié)構(gòu)圖(organization chart)， 尋找了一些開(kāi)源的項(xiàng)目及其類庫(kù)，發(fā)現(xiàn)竟然沒(méi)有現(xiàn)成的JS類庫(kù)可以使用，找到一些簡(jiǎn)單的JS實(shí)現(xiàn)，不過(guò)界面及其操作及其簡(jiǎn)單，不過(guò)功夫不負(fù)有心人，經(jīng)過(guò)幾天國(guó)內(nèi)國(guó)外的搜索，找到了一個(gè)非常好的解決方案，這里分享給大家。
Javascript InfoVis tools
這個(gè)開(kāi)源的javascript類庫(kù)可以生成非常炫酷的結(jié)構(gòu)和圖形，我選擇了其中的一種spacetree類型做為我的組織結(jié)構(gòu)圖基礎(chǔ)，這種圖形可以支持一下特性：
支持向上下左右四個(gè)方向展開(kāi)圖表
支持子節(jié)點(diǎn)擴(kuò)展
支持圖表拖放
支持圖表縮放
整個(gè)類庫(kù)異常強(qiáng)大，非常合適復(fù)雜的圖形功能需求，如下：
//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);
}
},
以上代碼創(chuàng)建一個(gè)實(shí)例，注意request部分，這段代碼用來(lái)取出點(diǎn)擊節(jié)點(diǎn)后需要顯示的字節(jié)點(diǎn)，在實(shí)際應(yīng)用中，我們把數(shù)據(jù)庫(kù)中取出的數(shù)據(jù)生成json對(duì)象后注入這里生成子節(jié)點(diǎn)。
//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();
}
});
});
以上代碼用來(lái)控制組織結(jié)構(gòu)圖圖形展示方向，效果請(qǐng)參考演示。
在線演示 在線調(diào)試
拖放及其縮放特效演示請(qǐng)查看如下應(yīng)用案例。
應(yīng)用案例：http://www.triplifes.com
相關(guān)資料：http://thejit.org/
文章來(lái)源：使用Javascript來(lái)實(shí)現(xiàn)的超炫組織結(jié)構(gòu)圖(Organization Chart)
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
