- 浏览: 17665 次
- 性别:
- 来自: 南京
文章分类
最新评论
经典的js树形组织结构图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.zz {
height: 1200px;
width: 958px auto;
border: 1px solid #CCCCCC;
margin-top: 5px;
margin-bottom: 5px;
margin-left:auto;
margin-right:auto;
}
a {font-family: "宋体";
font-size: 12pt;
color: #666666;
text-decoration: none;}
-->
</style>
</head>
<script language="javascript">
function $(id){return document.getElementById(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="点击查看相关人员";
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("DIV");
document.body.appendChild(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");
}
}
for(var m=1; m<DepthNodes.length; m++){//修正错误位置
var ErrDistance=this.IntervalWidth - (DepthNodes[m].Left - DepthNodes[m-1].Left - DepthNodes[m-1].Width);
if(ErrDistance>0){
for(var u_=m; u_<DepthNodes.length; u_++){
AmendNodeLeft(DepthNodes[u_], ErrDistance);
}
}
}
}
}
SetDepthGroupWidth();//设置群组宽度
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++){//重新设置距离
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++){//设置竖线条
var tempNodes=this.DepthGroup[n].Nodes;
for(var m=0; m<tempNodes.length; m++){
if(n!=this.Depth){//设置底线条
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){//设置顶线条
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){//如果只有一个节点
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++){//设置横线条
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 AmendNodeLeft(Node_, ErrDistance_){//修正错误位置
Node_.Left=Node_.Left + ErrDistance_;
if(Node_.Nodes.length!=0){
for(var n=0; n<Node_.Nodes.length; n++){
AmendNodeLeft(Node_.Nodes[n], ErrDistance_);
}
}
}
}
function GetGroupWidthByNode(Node_){//根据群组中任一节点,取得群组宽度
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 SetLeftByDepthNode(DepthNodes_, NodeId, Type){
if(Type=="LTR"&&NodeId==DepthNodes_.length-1){
SetLeftByDepthNode(DepthNodes_, NodeId, "RTL");
return;
}
if(Type=="RTL"&&NodeId==0){
SetLeftByDepthNode(DepthNodes_, NodeId, "LTR");
return;
}
var FindIndex=null;
if(Type=="LTR"){
for(var r_=NodeId+1; r_<DepthNodes_.length; r_++){
if(DepthNodes_[r_].Left!=null){
FindIndex=r_;
break;
}
}
if(FindIndex==null){
SetLeftByDepthNode(DepthNodes_, NodeId, "RTL");
return;
}else{
for(var r_=FindIndex-1; r_>=NodeId; r_--){
DepthNodes_[r_].Left=DepthNodes_[r_+1].Left - This.IntervalWidth - DepthNodes_[r_].Width;
}
}
}
if(Type=="RTL"){
for(var r_=NodeId-1; r_>=0; r_--){
if(DepthNodes_[r_].Left!=null){
FindIndex=r_;
break;
}
}
if(FindIndex==null){
SetLeftByDepthNode(DepthNodes_, NodeId, "LTR");
return;
}else{
for(var r_=FindIndex+1; r_<=NodeId; r_++){
DepthNodes_[r_].Left=DepthNodes_[r_-1].Left + This.IntervalWidth + DepthNodes_[r_-1].Width;
}
}
}
}
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 SetLeftPosByChildNode(Node_, ChildNode_){//根据下级节点位置设置节点位置
var tempNodeGroups=This.DepthGroup[ChildNode_.Depth].NodeGroups[ChildNode_.NodeGroupId];
var tempNodeLeft;
if(tempNodeGroups.length==1){
tempNodeLeft=((ChildNode_.Width / 2) + ChildNode_.Left) - (Node_.Width / 2);
}else{
tempNodeLeft=GetFirstLeftPos(ChildNode_) + (tempNodeGroups.Width / 2) - (Node_.Width / 2);
}
Node_.Left=tempNodeLeft;
}
function GetFirstLeftPos(Node_){//根据节点位置取得同一级中首个节点位置
if(Node_.NodeOrderId==0){//Node_为首节点
return Node_.Left;
}
var tempWidth=0;
for(var k_=0; k_<=Node_.NodeOrderId; k_++){
var tempGroupsNode=This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId][k_];
tempWidth+=tempGroupsNode.Width;
}
tempWidth+=(Node_.NodeOrderId * This.IntervalWidth);
return ((Node_.Left - tempWidth) + (Node_.Width / 2));
}
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;
}
function SetDepthGroupWidth(){//设置层深宽度
for(var n_=1; n_<=This.Depth; n_++){
var tempNodeGroups=This.DepthGroup[n_].NodeGroups;
for(var m_=0; m_<tempNodeGroups.length; m_++){
tempNodeGroups[m_].Width=GetGroupWidthByNode(tempNodeGroups[m_][0]);
}
}
}
function SetDepthsHeight(){//设置层深高度
for(var n_=1; n_<=This.Depth; n_++){
var tempNodes_=This.DepthGroup[n_].Nodes;
var MaxHeight=0;
for(var m_=0; m_<tempNodes_.length; m_++){
if(tempNodes_[m_].Height>MaxHeight){
MaxHeight=tempNodes_[m_].Height;
}
}
This.DepthGroup[n_].Height=MaxHeight;
}
}
function GetDepth(OrgObj){//取得层深,层群集
This.Nodes[This.Nodes.length]=OrgObj;
OrgObj.Depth=(This.Depth==0)?This.Depth+1:OrgObj.parentNode.Depth+1;
This.Depth=(OrgObj.Depth>This.Depth)?OrgObj.Depth:This.Depth;
if(typeof(This.DepthGroup[OrgObj.Depth])!="object"){
This.DepthGroup[OrgObj.Depth]=[];
This.DepthGroup[OrgObj.Depth].Nodes=[];
This.DepthGroup[OrgObj.Depth].NodeGroups=[];
}
This.DepthGroup[OrgObj.Depth].Nodes[This.DepthGroup[OrgObj.Depth].Nodes.length]=OrgObj;
if(OrgObj.Depth==1){
This.DepthGroup[OrgObj.Depth].NodeGroups[0]=[];
This.DepthGroup[OrgObj.Depth].NodeGroups[0][0]=OrgObj;
OrgObj.NodeGroupId=0;
OrgObj.NodeOrderId=0;
}else{
if(This.DepthGroup[OrgObj.Depth].NodeGroups.length==0){
This.DepthGroup[OrgObj.Depth].NodeGroups[0]=[];
This.DepthGroup[OrgObj.Depth].NodeGroups[0][0]=OrgObj;
OrgObj.NodeGroupId=0;
OrgObj.NodeOrderId=0;
}else{
var GroupsLength=This.DepthGroup[OrgObj.Depth].NodeGroups.length;
var GroupNodesLength=This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1].length;
if(OrgObj.parentNode==This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1][GroupNodesLength-1].parentNode){
This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1][GroupNodesLength]=OrgObj;
OrgObj.NodeGroupId=GroupsLength-1;
OrgObj.NodeOrderId=GroupNodesLength;
}else{
if(typeof(This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength])!="object"){
This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength]=[];
}
GroupNodesLength=This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength].length;
This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength][GroupNodesLength]=OrgObj;
OrgObj.NodeGroupId=GroupsLength;
OrgObj.NodeOrderId=GroupNodesLength;
}
}
}
if(OrgObj.Nodes.length!=0){
for(var n=0; n<OrgObj.Nodes.length; n++){
GetDepth(OrgObj.Nodes[n]);
}
}
}
function BoxInit(OrgObj_){//节点初始化
OrgObj_.Templet=GetBoxTemplet();
OrgObj_.BoxWidth=This.BoxWidth;
OrgObj_.BoxHeight=This.BoxHeight;
OrgObj_.inIt();
if(OrgObj_.Nodes.length!=0){
for(var n=0; n<OrgObj_.Nodes.length; n++){
BoxInit(OrgObj_.Nodes[n]);
}
}
}
function GetBoxTemplet(){//取得节点模板
if(This.BoxTemplet!=null)return This.BoxTemplet;
var TempletStr="<div id=\"{Id}\" style=\"font-size:12pt;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}\" target=\"_blank\">{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("DIV");
document.body.appendChild(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;
}
}
</script>
<body>
<div class="zz">
<div id="LoadBox">员工组织结构图正在生成,请不要刷新或者关闭窗口,稍后……</div>
<script language="javascript">
var xy0101=new OrgNode();
xy0101.Text="总经理(1)";
xy0101.Description="总经理:某某(电话:XXXXXXXXXXX)"
xy0101.Link="#";
var xy0201=new OrgNode();
xy0201.Text="副总经理(1)";
xy0201.Description="副总经理:某某"
xy0201.Link="#";
xy0101.Nodes.Add(xy0201);
var xy0301=new OrgNode();
xy0301.Text="综合支撑部(1)";
xy0301.Description="主任:某某"
xy0301.Link="#";
xy0201.Nodes.Add(xy0301);
var xy0302=new OrgNode();
xy0302.Text="政企客户销售中心(1)";
xy0302.Description="经理:某某"
xy0302.Link="#";
xy0201.Nodes.Add(xy0302);
var xy0303=new OrgNode();
xy0303.Text="网络服务部(1)";
xy0303.Description="经理:某某"
xy0303.Link="#";
xy0201.Nodes.Add(xy0303);
var xy0304=new OrgNode();
xy0304.Text="公众客户销售中心(2)";
xy0304.Description="经理:某某 经理:某某"
xy0304.Link="#";
xy0201.Nodes.Add(xy0304);
var xy0401=new OrgNode();
xy0401.Text="人力资源(1)";
xy0401.Description="人事:某某"
xy0401.Link="#";
xy0301.Nodes.Add(xy0401);
var xy0402=new OrgNode();
xy0402.Text="财会室(1)";
xy0402.Description="财务:某某"
xy0402.Link="#";
xy0301.Nodes.Add(xy0402);
var xy0403=new OrgNode();
xy0403.Text="秘书室(1)";
xy0403.Description="秘书:某某"
xy0403.Link="#";
xy0301.Nodes.Add(xy0403);
var xy0404=new OrgNode();
xy0404.Text="车队(5)";
xy0404.Description="队长:某某 驾驶员:某某 驾驶员:某某 驾驶员:某某 驾驶员:某某"
xy0404.Link="#";
xy0301.Nodes.Add(xy0404);
var xy0405=new OrgNode();
xy0405.Text="销售支撑(1)";
xy0405.Description="支撑:某某"
xy0405.Link="#";
xy0302.Nodes.Add(xy0405);
var xy0406=new OrgNode();
xy0406.Text="行业客户经理(6)";
xy0406.Description="经理:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某"
xy0406.Link="#";
xy0302.Nodes.Add(xy0406);
var xy0406a=new OrgNode();
xy0406a.Text="VIP客户经理(2)";
xy0406a.Description="客户经理:某某 客户经理:某某"
xy0406a.Link="#";
xy0302.Nodes.Add(xy0406a);
var xy0407=new OrgNode();
xy0407.Text="网络服务支撑(1)";
xy0407.Description="服务支撑:某某"
xy0407.Link="#";
xy0303.Nodes.Add(xy0407);
var xy0408=new OrgNode();
xy0408.Text="综合设备维护组(11)";
xy0408.Description="班长:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某"
xy0408.Link="#";
xy0303.Nodes.Add(xy0408);
var xy0409=new OrgNode();
xy0409.Text="管线维护组(9)";
xy0409.Description="班长:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某"
xy0409.Link="#";
xy0303.Nodes.Add(xy0409);
var xy0410=new OrgNode();
xy0410.Text="装移维护组(7)";
xy0410.Description="班长:某某 装移维护:某某 装移维护:某某 装移维护:某某 装移维护:某某 装移维护:某某 装移维护:某某"
xy0410.Link="#";
xy0303.Nodes.Add(xy0410);
var xy0411=new OrgNode();
xy0411.Text="网络客户经理(8)";
xy0411.Description="班长:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某"
xy0411.Link="#";
xy0304.Nodes.Add(xy0411);
var xy0412=new OrgNode();
xy0412.Text="销售支撑(1)";
xy0412.Description="支撑:某某"
xy0412.Link="#";
xy0304.Nodes.Add(xy0412);
var xy0413=new OrgNode();
xy0413.Text="业务支撑(3)";
xy0413.Description="支撑:某某 支撑:某某 支撑:某某"
xy0413.Link="#";
xy0304.Nodes.Add(xy0413);
var xy0414=new OrgNode();
xy0414.Text="营业厅值班长(4)";
xy0414.Description="值班长:某某 值班长:某某 值班长:某某 值班长:某某"
xy0414.Link="#";
xy0304.Nodes.Add(xy0414);
var xy0415=new OrgNode();
xy0415.Text="农村支局(0)";
xy0415.Link="#";
xy0304.Nodes.Add(xy0415);
var xy0501=new OrgNode();
xy0501.Text="后山支局(2)";
xy0501.Description="支局长:某某 客户经理:某某"
xy0501.Link="#";
xy0415.Nodes.Add(xy0501);
var xy0502=new OrgNode();
xy0502.Text="摩尼支局(1)";
xy0502.Description="支局长:某某"
xy0502.Link="#";
xy0415.Nodes.Add(xy0502);
var xy0503=new OrgNode();
xy0503.Text="两河支局(2)";
xy0503.Description="支局长:某某 客户经理:某某"
xy0503.Link="#";
xy0415.Nodes.Add(xy0503);
var xy0504=new OrgNode();
xy0504.Text="马岭支局(2)";
xy0504.Description="支局长:某某 客户经理:某某"
xy0504.Link="#";
xy0415.Nodes.Add(xy0504);
var xy0505=new OrgNode();
xy0505.Text="天池支局(2)";
xy0505.Description="支局长:某某 客户经理:某某"
xy0505.Link="#";
xy0415.Nodes.Add(xy0505);
var xy0506=new OrgNode();
xy0506.Text="城郊支局(2)";
xy0506.Description="支局长:某某 客户经理:某某"
xy0506.Link="#";
xy0415.Nodes.Add(xy0506);
</script>
<script language="javascript">
var OrgShows=new OrgShow(xy0101);
OrgShows.Top=20;
OrgShows.Left=20;
OrgShows.IntervalWidth=12;
OrgShows.IntervalHeight=50;
OrgShows.ShowType=2;
OrgShows.BoxHeight=190;
OrgShows.LineSize=5; //设置线条大小
OrgShows.LineColor="#cccccc"; //设置线条颜色
//OrgShows.BoxTemplet="<div id=\"{Id}\" class=\"OrgBox\"><img src=\"{EmpPhoto}\" /><span>{EmpName}</span><div>{department}</div></div>"
OrgShows.Run();
$("LoadBox").style.display="none";
</script>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.zz {
height: 1200px;
width: 958px auto;
border: 1px solid #CCCCCC;
margin-top: 5px;
margin-bottom: 5px;
margin-left:auto;
margin-right:auto;
}
a {font-family: "宋体";
font-size: 12pt;
color: #666666;
text-decoration: none;}
-->
</style>
</head>
<script language="javascript">
function $(id){return document.getElementById(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="点击查看相关人员";
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("DIV");
document.body.appendChild(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");
}
}
for(var m=1; m<DepthNodes.length; m++){//修正错误位置
var ErrDistance=this.IntervalWidth - (DepthNodes[m].Left - DepthNodes[m-1].Left - DepthNodes[m-1].Width);
if(ErrDistance>0){
for(var u_=m; u_<DepthNodes.length; u_++){
AmendNodeLeft(DepthNodes[u_], ErrDistance);
}
}
}
}
}
SetDepthGroupWidth();//设置群组宽度
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++){//重新设置距离
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++){//设置竖线条
var tempNodes=this.DepthGroup[n].Nodes;
for(var m=0; m<tempNodes.length; m++){
if(n!=this.Depth){//设置底线条
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){//设置顶线条
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){//如果只有一个节点
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++){//设置横线条
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 AmendNodeLeft(Node_, ErrDistance_){//修正错误位置
Node_.Left=Node_.Left + ErrDistance_;
if(Node_.Nodes.length!=0){
for(var n=0; n<Node_.Nodes.length; n++){
AmendNodeLeft(Node_.Nodes[n], ErrDistance_);
}
}
}
}
function GetGroupWidthByNode(Node_){//根据群组中任一节点,取得群组宽度
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 SetLeftByDepthNode(DepthNodes_, NodeId, Type){
if(Type=="LTR"&&NodeId==DepthNodes_.length-1){
SetLeftByDepthNode(DepthNodes_, NodeId, "RTL");
return;
}
if(Type=="RTL"&&NodeId==0){
SetLeftByDepthNode(DepthNodes_, NodeId, "LTR");
return;
}
var FindIndex=null;
if(Type=="LTR"){
for(var r_=NodeId+1; r_<DepthNodes_.length; r_++){
if(DepthNodes_[r_].Left!=null){
FindIndex=r_;
break;
}
}
if(FindIndex==null){
SetLeftByDepthNode(DepthNodes_, NodeId, "RTL");
return;
}else{
for(var r_=FindIndex-1; r_>=NodeId; r_--){
DepthNodes_[r_].Left=DepthNodes_[r_+1].Left - This.IntervalWidth - DepthNodes_[r_].Width;
}
}
}
if(Type=="RTL"){
for(var r_=NodeId-1; r_>=0; r_--){
if(DepthNodes_[r_].Left!=null){
FindIndex=r_;
break;
}
}
if(FindIndex==null){
SetLeftByDepthNode(DepthNodes_, NodeId, "LTR");
return;
}else{
for(var r_=FindIndex+1; r_<=NodeId; r_++){
DepthNodes_[r_].Left=DepthNodes_[r_-1].Left + This.IntervalWidth + DepthNodes_[r_-1].Width;
}
}
}
}
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 SetLeftPosByChildNode(Node_, ChildNode_){//根据下级节点位置设置节点位置
var tempNodeGroups=This.DepthGroup[ChildNode_.Depth].NodeGroups[ChildNode_.NodeGroupId];
var tempNodeLeft;
if(tempNodeGroups.length==1){
tempNodeLeft=((ChildNode_.Width / 2) + ChildNode_.Left) - (Node_.Width / 2);
}else{
tempNodeLeft=GetFirstLeftPos(ChildNode_) + (tempNodeGroups.Width / 2) - (Node_.Width / 2);
}
Node_.Left=tempNodeLeft;
}
function GetFirstLeftPos(Node_){//根据节点位置取得同一级中首个节点位置
if(Node_.NodeOrderId==0){//Node_为首节点
return Node_.Left;
}
var tempWidth=0;
for(var k_=0; k_<=Node_.NodeOrderId; k_++){
var tempGroupsNode=This.DepthGroup[Node_.Depth].NodeGroups[Node_.NodeGroupId][k_];
tempWidth+=tempGroupsNode.Width;
}
tempWidth+=(Node_.NodeOrderId * This.IntervalWidth);
return ((Node_.Left - tempWidth) + (Node_.Width / 2));
}
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;
}
function SetDepthGroupWidth(){//设置层深宽度
for(var n_=1; n_<=This.Depth; n_++){
var tempNodeGroups=This.DepthGroup[n_].NodeGroups;
for(var m_=0; m_<tempNodeGroups.length; m_++){
tempNodeGroups[m_].Width=GetGroupWidthByNode(tempNodeGroups[m_][0]);
}
}
}
function SetDepthsHeight(){//设置层深高度
for(var n_=1; n_<=This.Depth; n_++){
var tempNodes_=This.DepthGroup[n_].Nodes;
var MaxHeight=0;
for(var m_=0; m_<tempNodes_.length; m_++){
if(tempNodes_[m_].Height>MaxHeight){
MaxHeight=tempNodes_[m_].Height;
}
}
This.DepthGroup[n_].Height=MaxHeight;
}
}
function GetDepth(OrgObj){//取得层深,层群集
This.Nodes[This.Nodes.length]=OrgObj;
OrgObj.Depth=(This.Depth==0)?This.Depth+1:OrgObj.parentNode.Depth+1;
This.Depth=(OrgObj.Depth>This.Depth)?OrgObj.Depth:This.Depth;
if(typeof(This.DepthGroup[OrgObj.Depth])!="object"){
This.DepthGroup[OrgObj.Depth]=[];
This.DepthGroup[OrgObj.Depth].Nodes=[];
This.DepthGroup[OrgObj.Depth].NodeGroups=[];
}
This.DepthGroup[OrgObj.Depth].Nodes[This.DepthGroup[OrgObj.Depth].Nodes.length]=OrgObj;
if(OrgObj.Depth==1){
This.DepthGroup[OrgObj.Depth].NodeGroups[0]=[];
This.DepthGroup[OrgObj.Depth].NodeGroups[0][0]=OrgObj;
OrgObj.NodeGroupId=0;
OrgObj.NodeOrderId=0;
}else{
if(This.DepthGroup[OrgObj.Depth].NodeGroups.length==0){
This.DepthGroup[OrgObj.Depth].NodeGroups[0]=[];
This.DepthGroup[OrgObj.Depth].NodeGroups[0][0]=OrgObj;
OrgObj.NodeGroupId=0;
OrgObj.NodeOrderId=0;
}else{
var GroupsLength=This.DepthGroup[OrgObj.Depth].NodeGroups.length;
var GroupNodesLength=This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1].length;
if(OrgObj.parentNode==This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1][GroupNodesLength-1].parentNode){
This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength-1][GroupNodesLength]=OrgObj;
OrgObj.NodeGroupId=GroupsLength-1;
OrgObj.NodeOrderId=GroupNodesLength;
}else{
if(typeof(This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength])!="object"){
This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength]=[];
}
GroupNodesLength=This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength].length;
This.DepthGroup[OrgObj.Depth].NodeGroups[GroupsLength][GroupNodesLength]=OrgObj;
OrgObj.NodeGroupId=GroupsLength;
OrgObj.NodeOrderId=GroupNodesLength;
}
}
}
if(OrgObj.Nodes.length!=0){
for(var n=0; n<OrgObj.Nodes.length; n++){
GetDepth(OrgObj.Nodes[n]);
}
}
}
function BoxInit(OrgObj_){//节点初始化
OrgObj_.Templet=GetBoxTemplet();
OrgObj_.BoxWidth=This.BoxWidth;
OrgObj_.BoxHeight=This.BoxHeight;
OrgObj_.inIt();
if(OrgObj_.Nodes.length!=0){
for(var n=0; n<OrgObj_.Nodes.length; n++){
BoxInit(OrgObj_.Nodes[n]);
}
}
}
function GetBoxTemplet(){//取得节点模板
if(This.BoxTemplet!=null)return This.BoxTemplet;
var TempletStr="<div id=\"{Id}\" style=\"font-size:12pt;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}\" target=\"_blank\">{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("DIV");
document.body.appendChild(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;
}
}
</script>
<body>
<div class="zz">
<div id="LoadBox">员工组织结构图正在生成,请不要刷新或者关闭窗口,稍后……</div>
<script language="javascript">
var xy0101=new OrgNode();
xy0101.Text="总经理(1)";
xy0101.Description="总经理:某某(电话:XXXXXXXXXXX)"
xy0101.Link="#";
var xy0201=new OrgNode();
xy0201.Text="副总经理(1)";
xy0201.Description="副总经理:某某"
xy0201.Link="#";
xy0101.Nodes.Add(xy0201);
var xy0301=new OrgNode();
xy0301.Text="综合支撑部(1)";
xy0301.Description="主任:某某"
xy0301.Link="#";
xy0201.Nodes.Add(xy0301);
var xy0302=new OrgNode();
xy0302.Text="政企客户销售中心(1)";
xy0302.Description="经理:某某"
xy0302.Link="#";
xy0201.Nodes.Add(xy0302);
var xy0303=new OrgNode();
xy0303.Text="网络服务部(1)";
xy0303.Description="经理:某某"
xy0303.Link="#";
xy0201.Nodes.Add(xy0303);
var xy0304=new OrgNode();
xy0304.Text="公众客户销售中心(2)";
xy0304.Description="经理:某某 经理:某某"
xy0304.Link="#";
xy0201.Nodes.Add(xy0304);
var xy0401=new OrgNode();
xy0401.Text="人力资源(1)";
xy0401.Description="人事:某某"
xy0401.Link="#";
xy0301.Nodes.Add(xy0401);
var xy0402=new OrgNode();
xy0402.Text="财会室(1)";
xy0402.Description="财务:某某"
xy0402.Link="#";
xy0301.Nodes.Add(xy0402);
var xy0403=new OrgNode();
xy0403.Text="秘书室(1)";
xy0403.Description="秘书:某某"
xy0403.Link="#";
xy0301.Nodes.Add(xy0403);
var xy0404=new OrgNode();
xy0404.Text="车队(5)";
xy0404.Description="队长:某某 驾驶员:某某 驾驶员:某某 驾驶员:某某 驾驶员:某某"
xy0404.Link="#";
xy0301.Nodes.Add(xy0404);
var xy0405=new OrgNode();
xy0405.Text="销售支撑(1)";
xy0405.Description="支撑:某某"
xy0405.Link="#";
xy0302.Nodes.Add(xy0405);
var xy0406=new OrgNode();
xy0406.Text="行业客户经理(6)";
xy0406.Description="经理:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某"
xy0406.Link="#";
xy0302.Nodes.Add(xy0406);
var xy0406a=new OrgNode();
xy0406a.Text="VIP客户经理(2)";
xy0406a.Description="客户经理:某某 客户经理:某某"
xy0406a.Link="#";
xy0302.Nodes.Add(xy0406a);
var xy0407=new OrgNode();
xy0407.Text="网络服务支撑(1)";
xy0407.Description="服务支撑:某某"
xy0407.Link="#";
xy0303.Nodes.Add(xy0407);
var xy0408=new OrgNode();
xy0408.Text="综合设备维护组(11)";
xy0408.Description="班长:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某 设备维护:某某"
xy0408.Link="#";
xy0303.Nodes.Add(xy0408);
var xy0409=new OrgNode();
xy0409.Text="管线维护组(9)";
xy0409.Description="班长:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某 管线维护:某某"
xy0409.Link="#";
xy0303.Nodes.Add(xy0409);
var xy0410=new OrgNode();
xy0410.Text="装移维护组(7)";
xy0410.Description="班长:某某 装移维护:某某 装移维护:某某 装移维护:某某 装移维护:某某 装移维护:某某 装移维护:某某"
xy0410.Link="#";
xy0303.Nodes.Add(xy0410);
var xy0411=new OrgNode();
xy0411.Text="网络客户经理(8)";
xy0411.Description="班长:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某 经理:某某"
xy0411.Link="#";
xy0304.Nodes.Add(xy0411);
var xy0412=new OrgNode();
xy0412.Text="销售支撑(1)";
xy0412.Description="支撑:某某"
xy0412.Link="#";
xy0304.Nodes.Add(xy0412);
var xy0413=new OrgNode();
xy0413.Text="业务支撑(3)";
xy0413.Description="支撑:某某 支撑:某某 支撑:某某"
xy0413.Link="#";
xy0304.Nodes.Add(xy0413);
var xy0414=new OrgNode();
xy0414.Text="营业厅值班长(4)";
xy0414.Description="值班长:某某 值班长:某某 值班长:某某 值班长:某某"
xy0414.Link="#";
xy0304.Nodes.Add(xy0414);
var xy0415=new OrgNode();
xy0415.Text="农村支局(0)";
xy0415.Link="#";
xy0304.Nodes.Add(xy0415);
var xy0501=new OrgNode();
xy0501.Text="后山支局(2)";
xy0501.Description="支局长:某某 客户经理:某某"
xy0501.Link="#";
xy0415.Nodes.Add(xy0501);
var xy0502=new OrgNode();
xy0502.Text="摩尼支局(1)";
xy0502.Description="支局长:某某"
xy0502.Link="#";
xy0415.Nodes.Add(xy0502);
var xy0503=new OrgNode();
xy0503.Text="两河支局(2)";
xy0503.Description="支局长:某某 客户经理:某某"
xy0503.Link="#";
xy0415.Nodes.Add(xy0503);
var xy0504=new OrgNode();
xy0504.Text="马岭支局(2)";
xy0504.Description="支局长:某某 客户经理:某某"
xy0504.Link="#";
xy0415.Nodes.Add(xy0504);
var xy0505=new OrgNode();
xy0505.Text="天池支局(2)";
xy0505.Description="支局长:某某 客户经理:某某"
xy0505.Link="#";
xy0415.Nodes.Add(xy0505);
var xy0506=new OrgNode();
xy0506.Text="城郊支局(2)";
xy0506.Description="支局长:某某 客户经理:某某"
xy0506.Link="#";
xy0415.Nodes.Add(xy0506);
</script>
<script language="javascript">
var OrgShows=new OrgShow(xy0101);
OrgShows.Top=20;
OrgShows.Left=20;
OrgShows.IntervalWidth=12;
OrgShows.IntervalHeight=50;
OrgShows.ShowType=2;
OrgShows.BoxHeight=190;
OrgShows.LineSize=5; //设置线条大小
OrgShows.LineColor="#cccccc"; //设置线条颜色
//OrgShows.BoxTemplet="<div id=\"{Id}\" class=\"OrgBox\"><img src=\"{EmpPhoto}\" /><span>{EmpName}</span><div>{department}</div></div>"
OrgShows.Run();
$("LoadBox").style.display="none";
</script>
</div>
</body>
</html>
相关推荐
"tree.js" 是一个专门用于构建和操作树形结构的JavaScript库,广泛应用于组织结构、文件系统、菜单导航等场景。下面将详细介绍tree.js及其相关知识点。 1. **树形结构基础**: 树形结构是一种非线性的数据结构,由...
通过这个库,你可以轻松地创建各种复杂的树形布局,例如文件系统、组织结构图或者导航菜单等。 **一、jsTree 的基本使用** 1. **引入 jsTree** 在你的 HTML 文件中,你需要引入 jsTree 的核心 CSS 和 JavaScript ...
JavaScript 横向树,或称为组织结构图,是一种数据可视化技术,用于展示层次结构数据。在网页应用中,这种布局常用于展示公司组织架构、项目团队结构或者复杂的分类系统。这种非传统的树状结构不同于典型的垂直树形...
在网页中实现树形图,可以帮助用户更好地理解和导航数据结构,如目录树、组织结构或层级关系。本篇将详细介绍如何使用JavaScript来创建树形图。 一、基本概念 树形图是一种非线性的数据结构,它由节点(或称为顶点...
在JS中,树形结构常用于表示层次关系,例如文件系统、组织结构或者HTML DOM。下面将详细讨论如何在JavaScript中构建和操作树形结构,以及如何实现添加节点和删除选中节点的功能。 一、树的基本概念 1. 节点(Node...
在压缩包中“js实现的组织结构图”可能是示例代码或者完整的实现,可以作为参考来学习和理解如何用JavaScript实现组织结构图。通过阅读和理解代码,你可以更好地掌握这一技术,并将其应用到自己的项目中。 总结来说...
在描述中提到的"JS做的树形结构很漂亮",这通常指的是通过JS实现的具有视觉吸引力的树形图。开发者可能使用CSS来美化节点样式,包括颜色、字体、边框等,以及使用SVG或图片来表示节点的展开/折叠状态。此外,动画...
JavaScript树形菜单是一种常见的网页交互元素,用于展示层次结构的数据,比如网站导航、文件系统或者组织结构图。在网页设计中,它能有效地节省空间,提高用户体验,让用户能够以直观的方式浏览和操作多层次的信息。...
* 组织结构管理系统:使用jsp树形结构的生成可以实现组织结构的树形展示,方便用户浏览和管理组织结构。 * 产品分类系统:使用jsp树形结构的生成可以实现产品分类的树形展示,方便用户浏览和管理产品分类。 jsp树形...
在JavaScript中,我们可以利用各种图表库,如ECharts、Highcharts或者专门的组织结构图库,如OrgChart.js,来构建动态的、可交互的组织结构图。这些库通常允许自定义节点样式、添加点击事件、通过API动态更新数据,...
在这个“JS实现树形结构”的压缩包中,我们可能找到了关于如何在JavaScript中创建和操作这种结构的代码示例。 一、基础概念 1. 节点(Node):树形结构的基本单位,包含数据和指向子节点的引用。 2. 根节点(Root ...
首先,树形菜单是一种层次结构的展示方式,常用于文件系统、组织结构或导航菜单等场景。它通过节点和子节点的关系来呈现数据,用户可以通过展开和折叠节点来探索不同的层次。在JavaScript中,我们可以利用DOM...
总的来说,构建"html js树形图多级菜单美观可配置"涉及到HTML构建基础结构,JavaScript实现交互,CSS美化样式,以及可能利用到的HTML5特性。理解和掌握这些技术,将有助于你创建出符合用户需求的交互式菜单系统。
总的来说,"js树形结构例子"可能是一个完整的教程或示例项目,展示了如何在JavaScript中构建、操作和呈现树形结构。通过分析my-tree.html和menutree.js,开发者可以学习到如何在实际应用中利用JavaScript实现交互式...
在IT领域,树形图和组织结构图是数据可视化的重要工具,它们被广泛应用于软件工程、项目管理、数据库设计等领域。这里的重点在于“非目录状”的树形图或组织结构图,这意味着它并非以传统的文件目录层级方式展示,...
总的来说,构建JavaScript树形菜单涉及的技术包括HTML结构设计、CSS样式控制、JavaScript DOM操作、事件处理、数据结构和算法(如遍历树形结构)、以及可能的异步加载和动画效果。通过这些技术的组合,我们可以创建...
**d3.js 树形结构**是数据可视化领域中一种常用的数据展示方式,它通过图形化的方式呈现层次化的数据,通常用于展现组织架构、文件系统或者网络拓扑等具有层级关系的信息。d3.js,全称Data-Driven Documents,是由...
标签"js"、"树"和"组织机构"也提示我们可能需要用到特定的JavaScript库或插件,如jQuery UI的Treeview组件,或者像d3.js这样的数据可视化库,它们提供了丰富的树形图绘制功能。这些工具可以大大简化开发过程,提供...
动态增加组织树形结构图是指在程序运行时能够根据需求动态添加新的节点或调整已有节点的位置,以反映组织结构的变化。 要实现动态增加组织树形结构图,首先需要理解树形数据结构。在计算机科学中,树是一种非线性...