<!--
********************************************************************************
说明：显示公司组织结构
时间：21:52 2006-12-29
用途：以往用户每次调用组织结构都要经过查询数据库来获得数据，然后系统再按树型结构
方式显示出来，这种情况，在多用户使用系统或并发查询数据库时，获得组织结构的速度会
有很大影响，甚至让用户等待很长一段时间。现在通过调用JS数组信息来获得部门数据，
用户每次就不再需要经过调用数据库，这样，方便用户的操作，加快了数据执行的效率，为
用户节省了相当时间。当然，该JS数组中保存的组织结构信息是由数据库表导出的，因此，
当数据库组织结构表更新的时候必须触发程序来自动更新该JS文件，这样就实现了数据的同
步，保证了数据的一致性。
备注：
1.本代码只取一个顶节点，如果在取顶节点得到两个或两个以上，那说明设置有问题。
2.默认显示两级目录,即打开本页默认显示的状态。
********************************************************************************
-->
<style>
body {font-size:12px;}
div {margin:0;}
a {color:black;background-color:white;text-decoration:underline;}
a:hover {color:black;background-color:yellow;text-decoration:underline;}
</style>
<div >
<script language="javas
var arr_groups = new Array();
arr_groups[0] = new Array("分类a","总分类");
arr_groups[1] = new Array("分类b","总分类");
arr_groups[2] = new Array("分类c","分类a");
arr_groups[3] = new Array("分类d","分类a");
arr_groups[4] = new Array("分类e","分类b");
arr_groups[5] = new Array("分类s","分类d");
arr_groups[6] = new Array("分类F","分类s");
var totals = arr_groups.length;
//父节点(这里代表顶节点)
var groups = "";
groups = getParent();
//定义n所表示的层
var n=1;
//nbsp部门文字缩近
var nbsp=0;
//部门相对顶节点的层数
var floors=0;
/*
拆分节点，判断是否有顶节点，如果有两个或两个以上的节点表示没找到顶节点
*/
if(groups.split("$_$").length>=2)
{
alert("警告：数据有设置有问题，没有找到顶节点！");
}
else
{
for(var i=0;i<groups.split("$_$").length;i++)
{
if(i==0)
{
setShow(n,groups.split("$_$")[i]);
}
}
}
//显示子节点
function setShow(sId,sGroupName)
{
var groupNames = "";
groupNames = getChild(sGroupName).split("$_$");
if(sId==1)
{
if(hasChild(sGroupName))
{
document.write("<div + n + "'><div><img src=folder.gif><a href="+n+"','" + sGroupName + "')>"+sGroupName+"</a></div></div>");
}
else
{
document.write("<div + n + "'><img src=folder.gif>"+sGroupName+"</div>");
}
}
var str = "";
for(var i=0;i<groupNames.length;i++)
{
n ++ ;
floors=0;
nbsp = 24 * getFloors(groupNames[i],groups.split("$_$")[0]);
if(hasChild(groupNames[i]))
{
str = "<div + n + "' style='text-indent:"+nbsp+"px;'><div style='background-image:url(line_bg.jpg)'><img src=folder.gif><a href="+n+"','" + groupNames[i] + "')>"+groupNames[i]+"</a></div></div>";
}
else
{
str = "<div + n + "' style='text-indent:"+nbsp+"px;background-image:url(line_bg.jpg)'><img src=folder.gif><a href=#>"+groupNames[i]+"</a></div>";
}
var oN
ev
oN
oN
}
if(groupNames.length > 0)
{
ev
ev
}
}
//隐藏子节点
function setHidden(sId,GroupName)
{
var nodes = ev
if(sId!=1)
{
for(var i=0;i<nodes;i++)
{
if(i>0)
{
ev
}
}
ev
ev
}
}
//clone
//取得层级别关系
function getFloors(sGroupName,sParentName)
{
for(var i=0;i<totals;i++)
{
if(arr_groups[i][0]==sGroupName)
{
floors++;
if(arr_groups[i][1]!=sParentName)
{
if(floors<=1000)
{
getFloors(arr_groups[i][1],sParentName);
}
else
{alert("循环有误！");break;}
}
else
{break;}
}
}
return floors;
}
//取子节点名称
function getChild(sGroupName)
{
var groupNames = "";
for(var i=0;i<totals;i++)
{
if(arr_groups[i][1] == sGroupName)
{
if(groupNames == "")
{
groupNames = arr_groups[i][0];
}
else
{
groupNames = groupNames + "$_$" + arr_groups[i][0];
}
}
}
return groupNames;
}
//取顶节点
function getParent()
{
for(var i=0;i<totals;i++)
{
if(!isChild(arr_groups[i][1]) && !hasSame(i,arr_groups[i][1]))
{
if(groups == "")
{
groups = arr_groups[i][1];
}
else
{
groups = groups + "$_$" + arr_groups[i][1];
}
}
}
return groups;
}
/*
去除重复
如果在数据库里出现两次或两次以上表示有重复，则查询一下个对应i
再次查询是否重复就要从该i的位置（赋值给k）开始查询
*/
function hasSame(k,sGroupName)
{
var index = 0;
var bool = false;
for(var i=k;i<totals;i++)
{
if(arr_groups[i][1] == sGroupName)
{
index++;
if(index >= 2)
{
bool = true;
break;
}
}
}
return bool;
}
//是不是子节点，如果是子节点那么它肯定不是顶节点
function isChild(sGroupName)
{
var bool = false;
for(var i=0;i<totals;i++)
{
if(arr_groups[i][0] == sGroupName)
{
bool = true;
break;
}
}
return bool;
}
//判断是否有子节点
function hasChild(sGroupName)
{
var bool = false;
for(var i=0;i<totals;i++)
{
if(arr_groups[i][1] == sGroupName)
{
bool = true;
break;
}
}
return bool;
}
</script>
</div>
日记：一开始是先全部显示数据然后再写显示和隐藏的函数，用到了递归，自己都搞糊涂了。后来换了一种思路，从头开始，如果有子节点，当点击了父节点的时候就把它的子节点显示出来。隐藏是从该父节点的第二个子节点开始移除子节点，因为第一个子节点没有定义div名称，如程序中<div>xxxx</div>，这是为了保证标签的一致性。
如：
<div xx","yy")来实现。注意每次使用replace的时候，它只执行一次替换，因此如果数据中有好几个相同项目要替换就必须用循环的方法来替换掉。
参考函数代码：
//去除"_"
function delNull(str)
{
do
{
str = str.replace("_","");
}
while(str.indexOf("_")>=0)
return str;
}
在编写该代码中利用了平时少用的.appendChild，.replaceNode，.removeChild，ev
appendchild 追加子节点
replaceNode 替换节点
removeChild 移除节点
ev
未完成：
1.程序中背景图片的显示，因为现在看上去有点怪怪的
2.程序的优化
大家有什么好的建议请留言，或联系我
我的Email:speboy@126.com
评论