<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 = 1600;
var h = 40;
var iw = 60;
var ih = 80;
var boxh = 80;
var startleft = 800;
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|客服主管|1|";
dItem[4] = "5|商务主管|2|";
dItem[5] = "6|商务代表|2|";
dItem[6] = "7|营运策划|2|";
dItem[7] = "8|程序员|3|";
dItem[8] = "9|美工|3|";
dItem[9] = "10|美工|3|";
dItem[10] = "11|美工|4|";
dItem[11] = "12|美工|4|";
dItem[12] = "13|美工|4|";
dItem[13] = "14|美工|5|";
dItem[14] = "15|美工|5|";
dItem[15] = "16|+|5|";
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 nodeClick(id){
document.getElementById(id).innerText="客服代表为你 ";
}
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 name='"+id+"' href=\"javaScript:nodeClick('" + 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>
分享到：
相关推荐
在这个"js结构树小示例"中，我们将会探讨如何利用JavaScript操作DOM元素，特别是通过改变div元素的可见性来实现一个简单的目录树效果。 首先，我们要理解DOM（Document Object Model）。DOM是HTML和XML文档的标准...
xtree js结构树控件 This new version is based on objects, so you do not create the actual html code for the tree yourself, you create an object (the tree's root folder) and then you add child items to ...
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
原生javascript生成树形结构，采用非递归形式，效率和性能高，可以生成 数组和对象两种树形结构，顶层父级可以有多个，通用性强。
JavaScript 横向树，或称为组织结构图，是一种数据可视化技术，用于展示层次结构数据。在网页应用中，这种布局常用于展示公司组织架构、项目团队结构或者复杂的分类系统。这种非传统的树状结构不同于典型的垂直树形...
在JavaScript（JS）中，构建树形结构是一种常见的任务，特别是在网页交互和数据展示中。树形结构是一种数据组织方式，模拟自然界中的树状结构，其中每个元素（节点）可以有零个或多个子节点。这种结构使得数据的层次...
"tree.js" 是一个专门用于构建和操作树形结构的JavaScript库，广泛应用于组织结构、文件系统、菜单导航等场景。下面将详细介绍tree.js及其相关知识点。 1. **树形结构基础**： 树形结构是一种非线性的数据结构，由...
JavaScript中的树形结构是一种数据结构，它模仿了自然界中的树，由节点（也称为顶点）和边（连接节点的线）组成。在JS中，树形结构常用于表示层次关系，例如文件系统、组织结构或者HTML DOM。下面将详细讨论如何在...
在JavaScript中实现树形结构，可以帮助我们构建诸如文件系统、组织架构、导航菜单等复杂的应用。 在JavaScript中，树形结构通常通过对象和对象之间的引用来实现。每个节点可以看作一个对象，包含数据（如节点值）和...
总的来说，"js树形结构例子"可能是一个完整的教程或示例项目，展示了如何在JavaScript中构建、操作和呈现树形结构。通过分析my-tree.html和menutree.js，开发者可以学习到如何在实际应用中利用JavaScript实现交互式...
在这个“JS实现树形结构”的压缩包中，我们可能找到了关于如何在JavaScript中创建和操作这种结构的代码示例。 一、基础概念 1. 节点（Node）：树形结构的基本单位，包含数据和指向子节点的引用。 2. 根节点（Root ...
总的来说，创建一个基于jQuery的组织结构树形图涉及了JavaScript编程、数据结构的理解、DOM操作、事件处理和可能的第三方库应用。这样的系统对于理解和管理复杂的组织结构至关重要，同时也展示了JavaScript在Web开发...
综上所述，"js标准树结构(绝对好东西)"的压缩包可能包含了一个用于展示JavaScript实现的树结构实例。学习和掌握JavaScript树结构及其操作对于提升Web开发技能至关重要，尤其是在处理复杂的数据和用户交互时。
在本示例中，我们将探讨如何在JavaScript中构建和操作树形结构，这种数据结构在多种场景下都十分常见，比如文件系统、组织结构、数据解析等。 首先，树形结构是一种非线性的数据结构，它由节点（Node）组成，每个...
`js树`标签进一步强调了这个话题与JavaScript实现的树结构相关。`树形`标签则表明这是一个关于树形数据结构的知识点。由于提供的压缩包文件名仅列出"JS实现树形结构"，具体实现细节和代码示例需要解压文件查看。解压...
总结来说，JavaScript实现树形结构主要涉及创建树节点类、添加操作节点的方法以及遍历树的算法。通过这些基础知识，我们可以构建出适应各种需求的树形结构组件，为用户界面提供丰富且高效的交互体验。在实际开发中，...
总的来说，构建带复选框的JS树形菜单需要结合HTML、CSS和JavaScript技术，理解树状数据结构以及如何与用户进行交互。使用像`jstree`这样的库可以简化开发过程，但理解底层原理也有助于更好地定制和优化功能。
在JavaScript编程中，处理树形结构数据是一种常见的需求，特别是在数据可视化、文件系统管理或组织层级结构等场景。树形结构数据通常包含嵌套的数组，每个元素代表一个节点，可能有子节点（children）属性。`...