asp生成树状的方法

下面是程序的启动页面tree.htm：

< html >

< script src="renderer.js" language="javascript" >< /script >

< head >< /head >

< body id=bodytree name="bodytree" onload="gettree();" >

< iframe id=getdata style="display:none" >< /iframe >

< /body >

< /html >

该页面装载时将执行renderer.js中的gettree函数。html代码中的iframe部分实现了客户端和服务器端的通讯机制。

javascript函数gettree的代码如下：

function gettree() {

if (event.type == ＇load＇) {

if (typeof(divtree0)!=＇object＇)

getdata.window.location.href = ＇gettreedata.asp?level=0＇;

} else {

try {

objmanip = eval(＇divtree＇+ event.srcelement.getattribute(＇elementid＇));

if (objmanip.style.display == ＇none＇) {

objmanip.style.display = ＇＇;

} else {

objmanip.style.display = ＇none＇;

}

} catch (e) {

getdata.window.location.href = ＇gettreedata.asp?level=＇+ event.srcelement.getattribute(＇elementid＇);

}

event.cancelbubble = true;

}

}

当文档装载时，onload事件被触发，gettree函数得以执行。函数检查容器divtree0是否存在，并为iframe（id为

getdata）读取第一层节点（这些节点的父节点id为0）。如前所述，所有的节点都必须处理鼠标单击事件，而且事件句柄都是

gettree函数。当某个节点（如div1）接收到一个鼠标事件时，程序将执行gettree函数中的else部分。如果发送该事件的节点已

经读取了子节点，则程序检查这些子节点是否已经显示，然后切换子节点的显示状态，从而实现了该层节点的扩展或折叠效果。检

查子节点是否显示的if语句封装在一个try块内，因此当子节点不存在时，程序将执行catch部分，调用服务器脚本

gettreedata.asp读取子节点内容。最后，程序设置event.cancelbubble = true，目的是禁止上一层容器处

理该事件。

服务器脚本gettreedata.asp返回的html代码类如：

< html >

< body onload="parent.populatetree(＇1|0|节点1|2|0|节点2|3|0|节点3|4|0|节点4|＇);" >

< /body >

< /html >

可以看到，这里的onload事件又调用了另外一个javascript函数populatetree。populatetree函数代码如下：

function populatetree(strdata) {

var arrsplitdata;

var icnt;

var objtempdiv;

var objmaindiv;

if (strdata==＇＇) return;

arrsplitdata = strdata.split("|");

objmaindiv = document.createelement(＇div＇);

objmaindiv.id = ＇divtree＇+ arrsplitdata[1];

objmaindiv.style.csstext = ＇position:relative;left:10px;cursor:hand;＇;

for (icnt=0;icnt< arrsplitdata.length-1;icnt+=3) {

objtempdiv = document.createelement(＇< div onclick=＇gettree()＇onselectstart=＇return false;＇> ＇);

objtempdiv.id = ＇div＇+ arrsplitdata[icnt];

objtempdiv.innerhtml = arrsplitdata[icnt+2];

objtempdiv.setattribute(＇elementid＇,arrsplitdata[icnt]);

objtempdiv.setattribute(＇parentelementid＇,arrsplitdata[icnt+1]);

objtempdiv.style.csstext = ＇position:relative;cursor:hand;color:red;width:100px;font-size:x-small; ＇;

objmaindiv.appendchild(objtempdiv);

}

if (arrsplitdata[1]==＇0＇)

document.body.appendchild(objmaindiv);

else

eval(＇div＇+ arrsplitdata[1]).appendchild(objmaindiv);

}

我们已经知道，populatetree函数由onload事件调用，它的参数是一个字符串，比如上例中的“1|0|节点1|2|0|节点

2|3|0|节点3|4|0|节点4|”，它是一个“节点标识|父节点标识|节点文本|……”的列表。

如果某个节点不含子节点，则该参数是一个空字符串，此时populatetree直接返回。如果子节点存在，