用 js 实现组织结构图

最新推荐文章于 2024-10-10 12:07:51 发布

asthlon

最新推荐文章于 2024-10-10 12:07:51 发布

阅读量9k

点赞数

分类专栏： JAVASCRIPT 文章标签： function class div list border html

本文链接：https://blog.csdn.net/asthlon/article/details/353616

版权

JAVASCRIPT 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

js组织关系由数组体现出来

在 body onload 事件中初使化数组，取得组织关系图的层次和下及关系中节点最多的层次中节点数，用以取得水平线的最大宽度

以下为 htm 原码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>组织结构图</title>
<style>
.dvItem
{
   position:absolute;
   width:24px;
   border:1px solid #999999;
   font-size:12px;
   padding:5px;
   height:80px;
   z-index:9;
   background-color:#FFFFFF;
   line-height:16px;
}
a
{
text-decoration:none;
color:#333333;
}
.dvhline
{
position:absolute;
z-index:17;
padding:0px;
margin:0px;
border-top:1px solid #999999;
}
.dvvline
{
color:blue;
position:absolute;
background-color:#999999;
width:1px;
z-index:17;
}
</style>
<script>
var dItem = new Array();
var w = 600;
var h = 40;
var iw = 60;
var ih = 80;
var boxh = 80;
var startleft = 400;
var starttop = 40;
var hr = "<hr size=/"1/" noshade>"
var labledv = "<div class=/"dvItem/" style=/""
var hdv = "<div class=/"dvhline/" style=/"width:";
var vdv = "<div class=/"dvvline/" style=/"height:" + h + "px;/"";
var endsdv = "/">";
var enddv = "</div>";
var htm = "";
var len;
var maxn=0;//深度
function Load_Data()
{
dItem[0] = "1|总经理|0|";
dItem[1] = "2|营运主管|1|";
dItem[2] = "3|技术主管|1|";
dItem[3] = "4|客服主管|2|";
dItem[4] = "5|商务主管|2|";
dItem[5] = "6|商务代表|5|";
dItem[6] = "7|营运策划|2|";
dItem[7] = "8|程序员|3|";
dItem[8] = "9|美工|3|";
len = dItem.length;
Set_Item(0,0);
Set_Max();
Write_Item(0,0,0,1);
var htm1 = "";
for(var i=0;i<len;i++)
{
   htm1 = htm1 +dItem[i]+"<br>";
}
//document.getElementById("Load_DV").innerHTML = htm1 ;
document.getElementById("List_DV").innerHTML = htm;
}
//设置层次
function Set_Item(pid,ni)
{
  var n = ni + 1;
var iAry = new Array();
  for(var i=0;i<len;i++)
{
     iAry = dItem[i].split("|");
  if(iAry[2] == pid)
  {
   dItem[i] = dItem[i] + ni;
   if(maxn < ni)
   {
    maxn = ni;
   }
   Set_Item(iAry[0],n);
  }
}
}
//设置节点子节点中最大数
function Set_Max()
{
var iAry = new Array();
var childnum;
  for(var i=0;i<len;i++)
{
     iAry = dItem[i].split("|");
  childnum = Get_Child_Num(iAry[0]);
  if(childnum <= 1)
  {
   dItem[i] = dItem[i] + "|0";
  }
  else
  {
   dItem[i] = dItem[i] + "|" + Get_Max(iAry[0],iAry[3]);
  }
}
}
function Get_Max(pid,start)
{
  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]))
    {
     m = m + 1;
    }
   }
   if(n < m)
   {
    n = m;
   }
  }
  m = 0;
}
return n;
}
function Get_RootID(pid,id)
{
var iAry = new Array();
  for(var i=0;i<len;i++)
{
  iAry = dItem[i].split("|");
  if(iAry[0] == id)
  {
   if(iAry[2] == pid)
   {
    return true;
    break;
   }
   else
   {
    return Get_RootID(pid,iAry[2]);
   }
  }
}
return false;
}
//取得 id 所在的数组
function Get_Item(id)
{
     var i;
var items;
var iAry = new Array();
for(i=0;i<len;i++)
{
iAry = dItem[i].split("|");
  if(iAry[0] == id)
  {
   items = dItem[i];
   break;
  }
}
return items;
}
//取得子节点个数
function Get_Child_Num(pid)
{
     var i;
var rnum = 0;
var iAry = new Array();
for(i=0;i<len;i++)
{
iAry = dItem[i].split("|");
  if(iAry[2] == pid)
  {
   rnum = rnum + 1;
  }
}
return rnum;
}