使用Javascript来实现的超炫组织结构图(Organization Chart)
最近有個(gè)內(nèi)部項(xiàng)目需要使用組織結(jié)構(gòu)圖(organization chart), 尋找了一些開源的項(xiàng)目及其類庫,發(fā)現(xiàn)竟然沒有現(xiàn)成的JS類庫可以使用,找到一些簡單的JS實(shí)現(xiàn),不過界面及其操作及其簡單,不過功夫不負(fù)有心人,經(jīng)過幾天國內(nèi)國外的搜索,找到了一個(gè)非常好的解決方案,這里分享給大家。
Javascript InfoVis tools
這個(gè)開源的javascript類庫可以生成非常炫酷的結(jié)構(gòu)和圖形,我選擇了其中的一種spacetree類型做為我的組織結(jié)構(gòu)圖基礎(chǔ),這種圖形可以支持一下特性:
- 支持向上下左右四個(gè)方向展開圖表
- 支持子節(jié)點(diǎn)擴(kuò)展
- 支持圖表拖放
- 支持圖表縮放
整個(gè)類庫異常強(qiáng)大,非常合適復(fù)雜的圖形功能需求,如下:
//Create a new instancevar st = new $jit.ST({'injectInto': 'orgchart',//set duration for the animationduration: 800,//set animation transition typetransition: $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 chartrequest: function(nodeId, level, onComplete) {//Generate sample dataif(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部分,這段代碼用來取出點(diǎn)擊節(jié)點(diǎn)后需要顯示的字節(jié)點(diǎn),在實(shí)際應(yīng)用中,我們把數(shù)據(jù)庫中取出的數(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();}}); });以上代碼用來控制組織結(jié)構(gòu)圖圖形展示方向,效果請(qǐng)參考演示。
在線演示 在線調(diào)試
拖放及其縮放特效演示請(qǐng)查看如下應(yīng)用案例。
應(yīng)用案例:http://www.triplifes.com
相關(guān)資料:http://thejit.org/
文章來源:使用Javascript來實(shí)現(xiàn)的超炫組織結(jié)構(gòu)圖(Organization Chart)
與50位技術(shù)專家面對(duì)面20年技術(shù)見證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的使用Javascript来实现的超炫组织结构图(Organization Chart)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。