Javascript實現(xiàn)文檔結(jié)構(gòu)圖

2012/11/8 17:23:31作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

【實例描述】

組織結(jié)構(gòu)圖是word中經(jīng)常遇到的圖片結(jié)構(gòu)。本例將學習如何利用JaVascript代碼實現(xiàn)一個類似的組織結(jié)構(gòu)圖。

【實例代碼】

<html>
<head>
<title>組織結(jié)構(gòu)圖-學無憂（yzddtk.cn）</title>
<style>
 .ItemCss
 {
   position:absolute;
   width:24px;
   border:1px solid #999999;
   font-size:12px;
   padding:5px;
   height:70px;
   z-index:9;
   background-color:#FFFFFF;
   line-height:16px;
 }
 a
 {
 text-decoration:none;
 color:#333333;
 }
 .divhline
 {
  position:absolute;
  z-index:17;
  padding:0px;
  margin:0px;
  border-top:1px solid #999999;
 }
 .divvline
 {
 color:blue;
 position:absolute;
 background-color:#999999;
 width:1px;
 z-index:17;
 }
</style>
<script language="javascript">
 var dItem = new Array();
 var w = 600;
 var h = 40;
 var iw = 60;
 var ih = 70;
 var boxh = 70;
 var startleft = 350;
 var starttop = 30;
 var hr = "<hr size=\"1\" noshade>"
 var labledv = "<div class=\"ItemCss\" style=\""
 var hdv = "<div class=\"divhline\" style=\"width:";
 var vdv = "<div class=\"divvline\" style=\"height:" + h + "px;\"";
 var endsdv = "\">";
 var enddv = "</div>";
 var htm = "";
 var len;
 var maxn=0;                            
//深度初始變量
 function createStruct()
 {
     dItem[0] = "1|教育部|0|";           
//設(shè)置要顯示的結(jié)構(gòu)內(nèi)容-以“|”間隔
     dItem[1] = "2|東部教育局|1|";       
//注意第三項為父級節(jié)點
     dItem[2] = "3|西部教育局|1|";
     dItem[3] = "4|東部高校|2|";
     dItem[4] = "5|東部高中|2|";
     dItem[5] = "6|商務(wù)代表|5|";
     dItem[6] = "7|東部初中|2|";
     dItem[7] = "8|西部高校|3|";
     dItem[8] = "9|西部高中|3|";
     len = dItem.length;                
//獲取結(jié)構(gòu)數(shù)組的長度
     Set_Item(0,0);             
//設(shè)置開始的節(jié)點
     Set_Max();
     Write_Item(0,0,0,1);
     var htm1 = "";
     for(var i=0;i<len;i++)
     {
       htm1 = htm1 +dItem[i]+"<br>";
     }
     document.getElementById("divStruct").innerHTML = htm;
 }
 function Set_Item(pid,ni)   
//設(shè)置節(jié)點層次
 {
  var n = ni + 1;                   
//子節(jié)點的序號
 var iAry = new Array();
  for(var i=0;i<len;i++)
 {
     iAry = dItem[i].split("|");      
//分解數(shù)組中的當前節(jié)點
  if(iAry[2] == pid)                  
//是當前節(jié)點的子節(jié)點
  {
   dItem[i] = dItem[i] + ni;          
//當前節(jié)點中添加一項
   if(maxn < ni)              
//改變結(jié)構(gòu)的深度
   {
    maxn = ni;
   }
   Set_Item(iAry[0],n);        
//循環(huán)設(shè)置層次
  }
 }
 }
 function Set_Max()   
//設(shè)置節(jié)點子節(jié)點中最大數(shù)
 {
 var iAry = new Array();
 var childnum;
  for(var i=0;i<len;i++)
 {
     iAry = dItem[i].split("|");
//分解數(shù)組中的當前節(jié)點
  childnum = Get_Child_Num(iAry[0]);
//獲取當前節(jié)點的子節(jié)點
  if(childnum <= 1)          
//如果子節(jié)點數(shù)為0或1
  {
   dItem[i] = dItem[i] + "|0";         
//當前節(jié)點中添加一項
  }
  else
  {
   dItem[i] = dItem[i] + "|" + Get_Max(iAry[0],iAry[3]);
//獲取最大節(jié)點
  }
 }
 }
 function Get_Max(pid,start)
//獲取指定節(jié)點的最大節(jié)點
 {
  var iAry = new Array();
 var m = 0;
 var n = 0;
  for(var j=start;j<=maxn;j++)
 {
  for(var i=0;i<len;i++)
  {
   iAry = dItem[i].split("|");
   if(iAry[3] == j)
   {
    if(Get_RootID(pid,iAry[0]))  
//獲取當前節(jié)點的根節(jié)點
    {
     m = m + 1;
    }
   }
   if(n < m)
   {
    n = m;
   }
  }
  m = 0;
 }
 return n;
 }
 function Get_RootID(pid,id) 
//獲取當前節(jié)點的根節(jié)點
 {
 var iAry = new Array();
  for(var i=0;i<len;i++)
 {
  iAry = dItem[i].split("|");
//分解當前節(jié)點
  if(iAry[0] == id)
  {
   if(iAry[2] == pid)
   {
    return true;
    break;
   }
   else
   {
    return Get_RootID(pid,iAry[2]);
//返回根節(jié)點
   }
  }
 }
 return false;
 }
 function Get_Item(id) 
//取得指定節(jié)點號所在的數(shù)組
 {
     var i;
  var items;
  var iAry = new Array();
  for(i=0;i<len;i++)  
//邊界節(jié)點組
  {
   iAry = dItem[i].split("|");
//分解當前節(jié)點
  if(iAry[0] == id)
  {
   items = dItem[i];  
//獲取節(jié)點
   break;
  }
  }
  return items;
 }
 function Get_Child_Num(pid) 
//根據(jù)父節(jié)點取得子節(jié)點個數(shù)
 {
     var i;
  var rnum = 0;
  var iAry = new Array();
  for(i=0;i<len;i++)         
//遍歷組織結(jié)構(gòu)數(shù)組
  {
   iAry = dItem[i].split("|"); 
//將每一項再分離出數(shù)據(jù)
  if(iAry[2] == pid)          
//第三項便是父節(jié)點
  {
   rnum = rnum + 1;           
//是當前節(jié)點的子節(jié)點
  }
  }
  return rnum;
 }
 function Write_Item(ipid,ltmp,wtmp,cnt)
 {
   var iAry = new Array();
 var id;
 var txt;
 var pid;
 var lens;
 var maxnum;
 var t;
 var l;
 var hline_width;
 var dvline = "";
 var childnum = 0;
 var itxt;
 var tmpcnt = 0;
 for(var i=0;i<len;i++)
 {
  itxt = dItem[i];
  iAry = itxt.split("|");  
//分解節(jié)點項
 if(iAry[2] == ipid)
 {
 id = iAry[0];
 txt = "<a href=\"?id=" + id + "\">" + iAry[1] + "</a>";
//動態(tài)創(chuàng)建鏈接，鏈接內(nèi)容來自節(jié)點數(shù)據(jù)
 pid = iAry[2];
 lens = iAry[3];
 maxnum = iAry[4];
 childnum = Get_Child_Num(id);
 hline_width = maxnum * iw;
 if(pid == 0)
 {
   t =  starttop;
   l =  startleft;
 }
 else
 {
  t = starttop + 2 * lens * h + lens * ih;
  l = ltmp - wtmp/2 + (wtmp / 2) * tmpcnt;
 }
 dvline = "";
 if(childnum > 1)
 {
   var t1;
   var l1;
   var t2;
   var l2;
   var w2;
   t1 = t + ih;
   l1 = l + 12;
   w2 = hline_width/2;
   t2 = t1 + h;
   l2 = l - w2 + 10;   
//使用div實現(xiàn)邊框效果
   dvline = "<div class=\"divvline\" style=\"height:" + h + 
"px;left:" + l1 +"px;top:" + t1 + "\"></div>";
   dvline = dvline + "<div class=\"divhline\" 
style=\"width:" + hline_width + "px;left:" + l2 
+"px;top:" + t2 + "\"></div>";
   for(var j=0;j<childnum;j++)
   {
     var t3;
  var l3;
  t3 = t1 + h;
  l3 = l2 + (hline_width/(childnum-1)) * j;
    var tmpline =  "<div class=\"divvline\" 
style=\"height:" + h + "px;left:" + l3 +"px;top:" + 
t3 + "\"></div>";
  dvline = dvline + tmpline;
   }
   dvline = dvline
   
 }
 else if(childnum == 1)
 {
  var t4;
  var l4;
  l4 = l + 12;//使用div實現(xiàn)邊框效果
  dvline = "<div class=\"divvline\" 
style=\"height:" + h + "px;left:" + l4 +"px;top:" + 
(t + ih) + "\"></div>";
  dvline = dvline + "<div class=\"divvline\" 
style=\"height:" + h + "px;left:" + l4 +"px;top:" + 
(t + ih + h) + "\"></div>";
  
 }
 htm = htm + labledv + "left:" + l + "px;top:" + t +
 "px" + endsdv + txt + enddv + dvline;
 if(cnt % 2 == 0)
 {
  tmpcnt = tmpcnt + 2;
 }
 else
 {
  tmpcnt = tmpcnt + 1;
 }
 Write_Item(id,l,hline_width,childnum);//循環(huán)輸出
 
  }
 }
 }
</script>
</head>
<body onLoad="createStruct()">
<div id="divStruct"></div>
</body>
</html>

【運行效果】 Javascript實現(xiàn)文檔結(jié)構(gòu)圖運行效果

【難點剖析】

組織結(jié)構(gòu)圖的難點是如何實現(xiàn)一種組織結(jié)構(gòu)形式。本例中將這些結(jié)構(gòu)數(shù)據(jù)保存在數(shù)組中，同時設(shè)置數(shù)組中的每項又包含3個數(shù)據(jù)：當前節(jié)點序號、節(jié)點文本和當前節(jié)點的父節(jié)點：在數(shù)據(jù)處理時，使用字符串對象的“Split”方法分解這些數(shù)據(jù)，并進行節(jié)點判斷。

【源碼下載】

為了JS代碼的準確性，請點擊：Javascript實現(xiàn)文檔結(jié)構(gòu)圖進行本實例源碼下載

標簽： Javascript 圖片結(jié)構(gòu)圖