<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用html+css制作的组织结构图_96看吧</title>
<meta name="keywords" content="html+css,组织结构图">
<meta name="description" content="站长建设常用代码，html+css制作的组织结构图。更多精彩内容请访问96看吧 96KB.COM ">
<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|test|1|";
//dItem[4] = "5|test|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;
}
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("|");
if(iAry[2] == ipid)
{
id = iAry[0];
txt = "<a href=\"?id=" + id + "\">" + iAry[1] + "</a>";
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 / cnt * tmpcnt;
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;
dvline = "<div class=\"dvvline\" style=\"height:" + h + "px;left:" + l1 +"px;top:" + t1 + "\"></div>";
dvline = dvline + "<div class=\"dvhline\" 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=\"dvvline\" 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;
dvline = "<div class=\"dvvline\" style=\"height:" + h + "px;left:" + l4 +"px;top:" + (t + ih) + "\"></div>";
dvline = dvline + "<div class=\"dvvline\" style=\"height:" + h + "px;left:" + l4 +"px;top:" + (t + ih + h) + "\"></div>";
}
//dvline = hdv + hline_width + endsdv + hr + enddv;<hr size=\"1\" noshade>
//var ldv = "";
//ldv = "<div class=\"dvItem\" style=\"left:" + l + "px;top:" + t + "px;\">" + txt + "<div>"
//htm = htm +ldv + dvline;
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);
}//if(iAry[2] == ipid)
}
}
</script>
</head>
<body onLoad="Load_Data()">
<div id="List_DV"></div>
</body>
</html>
分享到：
相关推荐
CS222M，Y电容资料介绍！ Mid-high Voltage Ceramic Capacitors(Disk with Lead) Safety Standard Approved CS Series BASIC INSULATION TYPE Temperature range: –25 to +105°C CLASS 2 HIGH DIELECTRIC FEATURES...
222 eeee 444 ttt yyyy uuu
H12-222题型汇总-EXCEL版本,方便大家学习和记题 已经包含华为HCNP-R&S-IENP（H12-222）V2.0测试软件.exe 里面所有题型，部分最新的题型也在里面。 我看这个 考HCIP-H12-222 必过。 用excel 方便大家记题,可以在手机...
SSD222 Smart Display CAM Controller
来自官方的BMA222E驱动程序 INTRODUCTION This package contains the Bosch Sensortec MEMS accelerometer sensor driver sensor API The sensor driver package includes bma2x2 h bma2x2 c and bma2x2 ...
西门子 PLC CPU222 电路 原理图. 测绘版本 值得参考 ，西门子 PLC CPU222 电路 原理图. 测绘版本 值得参考
本文档为西门子PLC_CPU222电路原理图
ITU-T的H.222标准，介绍H.264的TS层语法，还包括PES层分组以及PCR调整字段等信息
ITU-T H.222.0建议书 共190
HCIP-RS(H12-222).pdf
银办发[2016]222号--关于印发《网络支付报文结构及要素技术规范（V1.0） (1) 为加快落实《中国人民银行关于加强支付结算管理防范电信网络新型违法犯罪有关事项的通知》(银发(2016) 261号)、《中国人民银行关于进一步...
数通hcip题库222，上传于2020.6.16，包含最新的hcip222题库内容，包含mpls mpls 等内容
ITU-T H.222.0-(05/2006)，TS中文版本，对应于ISO/IEC 13818-1。
HCIP-RS(H12-222).pdf HCIP-RS(H12-223).pdf HCIP-RS-2021-221.vce HCIP-RS-2021-222.vce HCIP-RS-2021-223.vce vce7.3.3中文精简.apk Visual certexam manager VCE刷题软件使用方法.pdf Visual CertExam....
SONY 索尼 TC-K909ES (K222ESJ) 磁带 卡座 维修 手册 英文版PDF格式，这个不是操作说明书，这个是维修手册，详细的拆解流程，详细的电路原理图及印刷电路图图纸，现免费提供给大家。
lll222.zip
H12-222题库，包括最新的新题整理，个人修改部分错误答案和做题的笔记，希望能帮助你，有错误的地方请提出来让我修改。
通过检测from子代的伽马射线，我们给出了在Gran Sasso实验室（LNGS）中进行的222 Rn衰减的研究结果。 这样做的动机是监视每年测量几次短寿命（天）源半衰期的放射性的稳定性，而不是长期测量长寿命（几十年或数百年...
内容最新的华为HCIP-数通（H12-221 H12-222 H12-223）V2.5题库 H12-221新增160道 达内.pdf H12-223新增46道 达内.pdf H12-222新增70 达内.pdf H12-222 自己总结.pdf H12-223 自己总结.pdf H12-223 46道新题...
华为hcip-H12-222（131-180）讲解.此视频讲解了考试题库中的内容及难点。