js实现公司组织结构分支图（带图）
(2012-04-24 14:24:52)
<!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版组织结构图</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; //同一层的级别序号,从零开始
this.NodeOrderId=null; //同一级中的序号,从零开始
this.TopLine=null;
this.BottomLine=null;
this.Depth=null;
this.Top=null;
this.Left=null;
this.Type=null;
this.Nodes=[];
this.customParam=[]; //节点自定义参数
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 层深节点集合
//this.DepthGroup[n].NodeGroups[m] 层深节点按上层分类集合
this.DepthGroup[n].NodeGroups[m][k]层深节点
var This=this;
this.BoxWidth=null;
this.BoxHeight=null;
this.BoxTemplet=null;
this.ShowType=null;
this.Run=function(){
BoxInit(OrgNode_);
GetDepth(OrgNode_);
SetDepthsHeight()//设置层深高度
//***************************
for(var n=1;
n<=this.Depth; n++){//设置顶距离
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--){//设置左距离
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");
| 
转载▼