js實(shí)現(xiàn)公司組織結(jié)構(gòu)分支圖（帶圖）

quasiceo 2015-01-16

展開(kāi)全文

js實(shí)現(xiàn)公司組織結(jié)構(gòu)分支圖（帶圖）

(2012-04-24 14:24:52)

轉(zhuǎn)載▼

標(biāo)簽：

雜談

分類(lèi)： java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS版組織結(jié)構(gòu)圖</title>
<style type="text/css">
.OrgBox{
font-size:12px;
padding:5px 5px 5px 5px;
clear:left;
float:left;
text-align:center;
position:absolute;
background-image:url(http://www./tempimg/org.jpg);
width:70px;
height:106px;
}
.OrgBox img{
width:60px;
height:70px;
}
.OrgBox div{
color:#FFA500;
font-weight:800;
}
</style>
</head>
<body>
<script language="javascript">
function $(id){return document.getElementByIdx_x_x_x(id)}
function offset(node){
var x = node.offsetLeft;
var y = node.offsetTop;
var w = node.offsetWidth;
var h = node.offsetHeight;
var parent = node.offsetParent;
while (parent != null){
   x += parent.offsetLeft;
   y += parent.offsetTop;
   parent = parent.offsetParent;
}
if(w==0){
   w+=parseInt(node.currentStyle.width);
   w+=parseInt(node.currentStyle.paddingRight);
   w+=parseInt(node.currentStyle.paddingLeft);
   w+=parseInt(node.currentStyle.borderWidth) * 2;
}
if(h==0){
   h+=parseInt(node.currentStyle.height);
   h+=parseInt(node.currentStyle.paddingTop);
   h+=parseInt(node.currentStyle.paddingBottom);
   h+=parseInt(node.currentStyle.borderWidth) * 2;
}
return {x: x, y: y, w: w, h: h};
}

function OrgNode(){
this.Text=null;
this.Link=null;
this.Description=null;
this.BoxWidth=null;
this.BoxHeight=null;
this.parentNode=null;
this.NodeGroupId=null; //同一層的級(jí)別序號(hào),從零開(kāi)始
this.NodeOrderId=null; //同一級(jí)中的序號(hào),從零開(kāi)始
this.TopLine=null;
this.BottomLine=null;
this.Depth=null;
this.Top=null;
this.Left=null;
this.Type=null;
this.Nodes=[];
this.customParam=[]; //節(jié)點(diǎn)自定義參數(shù)
var This=this;
this.Nodes.Add=function(OrgNode_){
   OrgNode_.parentNode=This;
   This.Nodes[This.Nodes.length]=OrgNode_;
}
this.Box=null;
this.Templet=null;
this.Id="OrgNode_"+ GetRandomId(20);

this.inIt= function(){
   if(this.inIted==true)return;
   var tempDiv=document_createElement_x_x_x("DIV");
   document.body.a(tempDiv);
   var tempHTML=this.Templet;
   tempHTML=tempHTML.replace("{Id}", this.Id);
   tempHTML=tempHTML.replace("{Text}", this.Text);
   tempHTML=(this.Link==null)?tempHTML.replace("{Link}", "JavaScript:void(0)"):tempHTML.replace("{Link}", this.Link);
   tempHTML=tempHTML.replace("{Description}", this.Description);
   for(var Param_ in this.customParam){
    tempHTML=tempHTML.replace("{"+ Param_ +"}", this.customParam[Param_]);
   }
   tempDiv.innerHTML=tempHTML;
   this.Box=$(this.Id);

   if(this.BoxWidth!=null){
    if(offset(this.Box).w < this.BoxWidth){
     this.Box.style.width=this.BoxWidth +"px";
     if(offset(this.Box).w > this.BoxWidth){
      this.Box.style.width=(this.BoxWidth - (offset(this.Box).w - this.BoxWidth)) +"px";
     }
    }
   }

   if(this.BoxHeight!=null){
    if(offset(this.Box).h < this.BoxHeight){
     this.Box.style.height=this.BoxHeight +"px";
     if(offset(this.Box).h > this.BoxHeight){
      this.Box.style.height=(this.BoxHeight - (offset(this.Box).h - this.BoxHeight)) +"px";
     }
    }
   }
   this.Width=offset(this.Box).w;
   this.Height=offset(this.Box).h;
   this.inIted=true;
}
function GetRandomId(n_){
   var litter="abcdefghijklmnopqrstuvwxyz"
   litter+=litter.toUpperCase()
   litter+="1234567890";
   var idRnd="";
   for(var i=1; i<=n_; i++){
    idRnd+=litter.substr((0 + Math.round(Math.random() * (litter.length - 0))), 1)
   }
        return idRnd;
}
}
function OrgShow(OrgNode_){
this.LineSize=2;
this.LineColor="#000000";
this.IntervalWidth=100;
this.IntervalHeight=50;
this.Top=0;
this.Left=0;
this.Depth=0;
this.Nodes=[];
this.DepthGroup=[]; //this.DepthGroup[n].Nodes 層深節(jié)點(diǎn)集合
//this.DepthGroup[n].NodeGroups[m] 層深節(jié)點(diǎn)按上層分類(lèi)集合 this.DepthGroup[n].NodeGroups[m][k]層深節(jié)點(diǎn)
var This=this;
this.BoxWidth=null;
this.BoxHeight=null;
this.BoxTemplet=null;
this.ShowType=null;
this.Run=function(){
   BoxInit(OrgNode_);
   GetDepth(OrgNode_);
   SetDepthsHeight()//設(shè)置層深高度

   //***************************
   for(var n=1; n<=this.Depth; n++){//設(shè)置頂距離
    var tempTop=this.Top + GetDepthHeightToRoot(n);
    var tempNodes=this.DepthGroup[n].Nodes;
    for(var m=0; m<tempNodes.length; m++){
     tempNodes[m].Top=tempTop;
    }
   }
   //***************************
   for(var n=this.Depth; n>=1; n--){//設(shè)置左距離
    var DepthNodes=this.DepthGroup[n].Nodes;
    if(n==this.Depth){
     for(var m=0; m<DepthNodes.length; m++){
      if(m==0){
       DepthNodes[m].Left=0;
      }else{
       DepthNodes[m].Left=DepthNodes[m-1].Left + DepthNodes[m-1].Width + this.IntervalWidth;
      }
     }
    }else{
     for(var m=0; m<DepthNodes.length; m++){
      if(DepthNodes[m].Nodes.length!=0){
       var tempNodeLeft_=DepthNodes[m].Nodes[0].Left + (GetGroupWidthByNode(DepthNodes[m].Nodes[0]) / 2);
       tempNodeLeft_-=(DepthNodes[m].Width / 2);
       DepthNodes[m].Left = tempNodeLeft_;
      }
     }
     for(var m=0; m<DepthNodes.length; m++){
      if(DepthNodes[m].Left==null){
       SetLeftByDepthNode(DepthNodes, m, "LTR");
      }
     }
    }
   }
   SetDepthGroupWidth();//設(shè)置群組寬度
   var MaxLeftValue=this.Nodes[0].Left;
   for(var n=1; n<this.Nodes.length; n++){//取得最小左距離
    if(MaxLeftValue>this.Nodes[n].Left){
     MaxLeftValue=this.Nodes[n].Left;
    }
   }
   MaxLeftValue=(-MaxLeftValue) + this.Left;
   for(var n=0; n<this.Nodes.length; n++){//重新設(shè)置距離
    this.Nodes[n].Left+=MaxLeftValue;
    this.Nodes[n].Box.style.left=this.Nodes[n].Left + "px"
    this.Nodes[n].Box.style.top=this.Nodes[n].Top + "px"
   }

   //***************************
   for(var n=1; n<=this.Depth; n++){//設(shè)置豎線(xiàn)條
    var tempNodes=this.DepthGroup[n].Nodes;
    for(var m=0; m<tempNodes.length; m++){
     if(n!=this.Depth){//設(shè)置底線(xiàn)條
      if(tempNodes[m].Nodes.length!=0){
       var tempLineLeft=tempNodes[m].Left + (tempNodes[m].Width / 2);
       var tempLineHeight=((this.IntervalHeight - this.LineSize) / 2);
       tempLineHeight+=(this.DepthGroup[n].Height - tempNodes[m].Height);
       var tempLineTop=tempNodes[m].Top + tempNodes[m].Height;
       var tempBottomLine=new CreateLine(2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineBottom_"+ tempNodes[m].Id);
       tempNodes[m].BottomLine=tempBottomLine.Line;
      }
     }
     if(n!=1){//設(shè)置頂線(xiàn)條
      var tempLineLeft=tempNodes[m].Left + (tempNodes[m].Width / 2);
      var tempLineHeight=((this.IntervalHeight - this.LineSize) / 2);
      var tempLineTop=tempNodes[m].Top - tempLineHeight;
      if(this.DepthGroup[tempNodes[m].Depth].NodeGroups[tempNodes[m].NodeGroupId].length==1){//如果只有一個(gè)節(jié)點(diǎn)
       var tempBottomLineHeight=parseFloat(tempNodes[m].parentNode.BottomLine.style.height) + this.LineSize;
       tempNodes[m].parentNode.BottomLine.style.height=(tempLineHeight + tempBottomLineHeight)+"px";
      }else{
       var temptopLine=new CreateLine(2, tempLineTop, tempLineLeft, tempLineHeight, this.LineSize, this.LineColor, "LineTop_"+ tempNodes[m].Id);
       tempNodes[m].TopLine=temptopLine.Line;
      }
     }
    }
   }

   for(var n=2; n<=this.Depth; n++){//設(shè)置橫線(xiàn)條
    var tempNodeGroups_=this.DepthGroup[n].NodeGroups;
    for(var m=0; m<tempNodeGroups_.length; m++){
     if(tempNodeGroups_[m].length!=1){
      var tempLineWidth=tempNodeGroups_[m].Width - (tempNodeGroups_[m][0].Width / 2) + this.LineSize;
      tempLineWidth-=(tempNodeGroups_[m][tempNodeGroups_[m].length-1].Width / 2);
      var tempLineTop=tempNodeGroups_[m][0].Top - ((this.IntervalHeight - this.LineSize) / 2) - this.LineSize;
      var tempLineLeft=tempNodeGroups_[m][0].Left + (tempNodeGroups_[m][0].Width / 2);
      var tempGroupLine=new CreateLine(1, tempLineTop, tempLineLeft, tempLineWidth, this.LineSize, this.LineColor, "LineGroup_"+ tempNodeGroups_[m][0].Id);
     }
    }
   }

//*************************************************************************************************
}
function GetGroupWidthByNode(Node_){//根據(jù)群組中任一節(jié)點(diǎn)，取得群組寬度
   var tempNodesGroup_=This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId];
   var tempGroupWidth_=tempNodesGroup_[tempNodesGroup_.length-1].Left - tempNodesGroup_[0].Left;
   tempGroupWidth_+=tempNodesGroup_[tempNodesGroup_.length-1].Width
   return tempGroupWidth_;
}

function GetDepthHeightToRoot(DepthId){//取得距離頂層的高度
   var tempHeight_=0;
   for(var x_=DepthId; x_>=1; x_--){
    tempHeight_+=This.DepthGroup[x_].Height;
   }
   tempHeight_+=This.IntervalHeight * (DepthId - 1);
   tempHeight_-=This.DepthGroup[DepthId].Height;
   return tempHeight_;
}

function ChildNodesWidth(OrgObj){//取得層寬
   var ReWidth=0;
   for(var s_=0; s_<OrgObj.Nodes.length; s_++){
    ReWidth+=OrgObj.Nodes[s_].Width;
   }
   ReWidth+=(OrgObj.Nodes.length-1) * This.IntervalWidth;
   return ReWidth;
}

   if(OrgObj_.Nodes.length!=0){
    for(var n=0; n<OrgObj_.Nodes.length; n++){
     BoxInit(OrgObj_.Nodes[n]);
    }
   }
}
function GetBoxTemplet(){//取得節(jié)點(diǎn)模板
   if(This.BoxTemplet!=null)return This.BoxTemplet;
   var TempletStr="<div id="{Id}" style="font-size:12px;padding:5px 5px 5px 5px;border:thin solid orange;background-color:lightgrey; clear:left;float:left;text-align:center;position:absolute;"
   if(This.ShowType==2)TempletStr+="writing-mode: tb-rl;";
   TempletStr+="" title="{Description}" ><a href="{Link}">{Text}</a></div>";
   return TempletStr;
}

function CreateLine(type_, top_, left_, long_, size_, color_, id_){
   this.Type=type_;
   top_=top_+"";
   left_=left_+"";
   long_=long_+"";
   this.Top=(top_.substr(top_.length-2).toLowerCase()!="px")?top_+"px":top_;
   this.Left=(left_.substr(left_.length-2).toLowerCase()!="px")?left_+"px":left_;
   this.Long=(long_.substr(long_.length-2).toLowerCase()!="px")?long_+"px":long_;
   this.Size=(size_==undefined)?"1px":size_+"";
   this.Id=(id_==undefined)?null:id_;
   this.Size=(this.Size.substr(this.Size.length-2).toLowerCase()!="px")?this.Size+"px":this.Size;
   this.Color=(color_==undefined)?"#000000":color_;
   this.Line=document_createElement_x_x_x("DIV");
   document.body.a(this.Line);
   this.Line.innerText="x";
   this.Line.style.position="absolute";
   this.Line.style.top=this.Top;
   this.Line.style.left=this.Left;
   this.Line.style.overflow="hidden";
   if(this.Type==1){
    this.Line.style.borderTopColor=this.Color;
    this.Line.style.borderTopWidth=this.Size;
    this.Line.style.borderTopStyle="solid";
    this.Line.style.width=this.Long;
    this.Line.style.height="0px";
   }else{
    this.Line.style.borderLeftColor=this.Color;
    this.Line.style.borderLeftWidth=this.Size;
    this.Line.style.borderLeftStyle="solid";
    this.Line.style.height=this.Long;
    this.Line.style.width="0px";
   }
   if(this.Id!=null)this.Line.id=this.Id;
}
}
var a=new OrgNode()
a.customParam.EmpName="張明"
a.customParam.department="總經(jīng)辦"
a.customParam.EmpPhoto="http://www./tempimg/org1.jpg"
var b=new OrgNode()
b.customParam.EmpName="陳黎明"
b.customParam.department="運(yùn)營(yíng)部"
b.customParam.EmpPhoto="http://www./tempimg/org2.jpg"
var c=new OrgNode()
c.customParam.EmpPhoto="http://www./tempimg/org1.jpg"
var d=new OrgNode()
d.customParam.EmpPhoto="http://www./tempimg/org1.jpg"
var e=new OrgNode()
var f=new OrgNode()
var g=new OrgNode()
var h=new OrgNode()
var k1=new OrgNode()
var x=new OrgNode()
var y=new OrgNode()
var z=new OrgNode()
var z1=new OrgNode()
var z11=new OrgNode()
var z12=new OrgNode()
var z13=new OrgNode()
z1.Nodes.Add(z11);
z1.Nodes.Add(z12);
z1.Nodes.Add(z13);
var z2=new OrgNode()
z2.Text="三-2"
z2.Description="zxxxcz"
var y1=new OrgNode()
y1.Text="三員工一-1"
y1.Description="zxxxcz"
var y2=new OrgNode()
y2.Text="三員工一-2"
y2.Description="zxxxcz"
var y21=new OrgNode()
y21.Text="三員工一-2-1"
y21.Description="zxxxcz"
var y22=new OrgNode()
y22.Text="三員工一-2-2"
y22.Description="zxxxcz"
y2.Nodes.Add(y21);
y2.Nodes.Add(y22);
y.Nodes.Add(y1);
y.Nodes.Add(y2);
z.Nodes.Add(z1);
z.Nodes.Add(z2);
x.Nodes.Add(y);
x.Nodes.Add(z);
g.Nodes.Add(h);
g.Nodes.Add(k1);
a.Nodes.Add(b);
a.Nodes.Add(x);
a.Nodes.Add(c);
b.Nodes.Add(g);
c.Nodes.Add(d);
c.Nodes.Add(e);
c.Nodes.Add(f);
var OrgShows=new OrgShow(a);
OrgShows.Top=50;
OrgShows.Left=50;
OrgShows.IntervalWidth=10;
OrgShows.IntervalHeight=20;
//OrgShows.ShowType=2;
//OrgShows.BoxHeight=100;
OrgShows.BoxTemplet="<div id="{Id}" class="OrgBox"><img src="{EmpPhoto}" /><span>{EmpName}</span><div>{department}</div></div>"
OrgShows.Run()
</script>
</body>
</html>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： quasiceo > 《待分類(lèi)1》

舉報(bào)/認(rèn)領(lǐng)