日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript來實現(xiàn)的超炫組織結(jié)構(gòu)圖

Javascript InfoVis tools

這個開源的javascript類庫可以生成非常炫酷的結(jié)構(gòu)和圖形，我選擇了其中的一種spacetree類型做為我的組織結(jié)構(gòu)圖基礎(chǔ)，這種圖形可以支持一下特性：

◆ 支持向上下左右四個方向展開圖表

◆ 支持子節(jié)點擴展

◆ 支持圖表拖放

◆ 支持圖表縮放

整個類庫異常強大，非常合適復(fù)雜的圖形功能需求，如下：

 

 
 
 
 
    
  
  
  
  
  1. //Create a new instance  
    2. 
  
  
  
  
  2.     var st = new $jit.ST({  
    3. 
  
  
  
  
  3.         'injectInto': 'orgchart',  
    4. 
  
  
  
  
  4.         //set duration for the animation  
    5. 
  
  
  
  
  5.         duration: 800,  
    6. 
  
  
  
  
  6.         //set animation transition type  
    7. 
  
  
  
  
  7.         transition: $jit.Trans.Quart.easeInOut,  
    8. 
  
  
  
  
  8.         levelDistance: 50,  
    9. 
  
  
  
  
  9.         levelsToShow: 1,  
    10. 
  
  
  
  
  10.         Node: {  
    11. 
  
  
  
  
  11.             height: 45,  
    12. 
  
  
  
  
  12.             width: 120,  
    13. 
  
  
  
  
  13.             type: 'nodeline',  
    14. 
  
  
  
  
  14.             color:'#23A4FF',  
    15. 
  
  
  
  
  15.             lineWidth: 2,  
    16. 
  
  
  
  
  16.             align:"center",  
    17. 
  
  
  
  
  17.             overridable: false 
    18. 
  
  
  
  
  18.         },  
    19. 
  
  
  
  
  19.           
    20. 
  
  
  
  
  20.         Edge: {  
    21. 
  
  
  
  
  21.             type: 'bezier',  
    22. 
  
  
  
  
  22.             lineWidth: 2,  
    23. 
  
  
  
  
  23.             color:'#23A4FF',  
    24. 
  
  
  
  
  24.             overridable: true 
    25. 
  
  
  
  
  25.         },  
    26. 
  
  
  
  
  26.           
    27. 
  
  
  
  
  27.     //Retrieve the json data from database and create json objects for org chart  
    28. 
  
  
  
  
  28.         request: function(nodeId, level, onComplete) {  
    29. 
  
  
  
  
  29.         
    30. 
  
  
  
  
  30.       //Generate sample data  
    31. 
  
  
  
  
  31.       if(nodeId!='peter wang'&&nodeId!='William chen'){  
    32. 
  
  
  
  
  32.         var data= [{fullname:'peter wang',title:'engineer'},{fullname:'William chen',title:'senior engineer'}];  
    33. 
  
  
  
  
  33.         var objs = [];  
    34. 
  
  
  
  
  34.         for(var i=0;i 
    35. 
  
  
  
  
  35.           var tmp = data[i];  
    36. 
  
  
  
  
  36.           var obj = {"id":data[i].fullname, "name": " "  + data[i].fullname+" ("+data[i].title + ")"};   
    37. 
  
  
  
  
  37.           objs.push(obj);  
    38. 
  
  
  
  
  38.         }  
    39. 
  
  
  
  
  39.            
    40. 
  
  
  
  
  40.         var nodeobjs={};  
    41. 
  
  
  
  
  41.         nodeobjs.id =  nodeId;  
    42. 
  
  
  
  
  42.         nodeobjs.children =  objs;  
    43. 
  
  
  
  
  43.         onComplete.onComplete(nodeId, nodeobjs);    
    44. 
  
  
  
  
  44.       }else{  
    45. 
  
  
  
  
  45.         var nodeobjs={};  
    46. 
  
  
  
  
  46.         onComplete.onComplete(nodeId, nodeobjs);    
    47. 
  
  
  
  
  47.       }  
    48. 
  
  
  
  
  48.  
    49. 
  
  
  
  
  49.         }, 
    50.

以上代碼創(chuàng)建一個實例，注意request部分，這段代碼用來取出點擊節(jié)點后需要顯示的字節(jié)點，在實際應(yīng)用中，我們把數(shù)據(jù)庫中取出的數(shù)據(jù)生成json對象后注入這里生成子節(jié)點。

 
 
 
 
    
  
  
  
  
  1. //Change chart direction  
    2. 
  
  
  
  
  2.   $("#top").click(function(){  
    3. 
  
  
  
  
  3.       $("#orgchartori").fadeOut();  
    4. 
  
  
  
  
  4.             st.switchPosition($("#top").attr("id"), "animate", {  
    5. 
  
  
  
  
  5.                 onComplete: function(){  
    6. 
  
  
  
  
  6.                     $("#orgchartori").fadeIn();  
    7. 
  
  
  
  
  7.                 }  
    8. 
  
  
  
  
  8.             });   
    9. 
  
  
  
  
  9.   });  
    10. 
  
  
  
  
  10.     
    11. 
  
  
  
  
  11.   $("#bottom").click(function(){  
    12. 
  
  
  
  
  12.       $("#orgchartori").fadeOut();  
    13. 
  
  
  
  
  13.             st.switchPosition($("#bottom").attr("id"), "animate", {  
    14. 
  
  
  
  
  14.                 onComplete: function(){  
    15. 
  
  
  
  
  15.                     $("#orgchartori").fadeIn();  
    16. 
  
  
  
  
  16.                 }  
    17. 
  
  
  
  
  17.             });   
    18. 
  
  
  
  
  18.   });  
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20.   $("#right").click(function(){  
    21. 
  
  
  
  
  21.       $("#orgchartori").fadeOut();  
    22. 
  
  
  
  
  22.             st.switchPosition($("#left").attr("id"), "animate", {  
    23. 
  
  
  
  
  23.                 onComplete: function(){  
    24. 
  
  
  
  
  24.                     $("#orgchartori").fadeIn();  
    25. 
  
  
  
  
  25.                 }  
    26. 
  
  
  
  
  26.             });   
    27. 
  
  
  
  
  27.   });  
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29.   $("#left").click(function(){  
    30. 
  
  
  
  
  30.       $("#orgchartori").fadeOut();  
    31. 
  
  
  
  
  31.             st.switchPosition($("#right").attr("id"), "animate", {  
    32. 
  
  
  
  
  32.                 onComplete: function(){  
    33. 
  
  
  
  
  33.           $("#orgchartori").fadeIn();  
    34. 
  
  
  
  
  34.                 }  
    35. 
  
  
  
  
  35.             });   
    36. 
  
  
  
  
  36.   });   
    37.

以上代碼用來控制組織結(jié)構(gòu)圖圖形展示方向，效果請參考演示。

在線演示 在線調(diào)試

拖放及其縮放特效演示請查看如下應(yīng)用案例。

應(yīng)用案例：http://www.triplifes.com

相關(guān)資料：http://thejit.org/

文章來源：使用Javascript來實現(xiàn)的超炫組織結(jié)構(gòu)圖(Organization Chart)


名稱欄目：JavaScript來實現(xiàn)的超炫組織結(jié)構(gòu)圖
本文路徑：http://m.5511xx.com/article/ccdisjc.html