技术资料 > ASP技术 > 打印相关 : 利用ASP脚本制作异步装载的树形结构（二）

利用ASP脚本制作异步装载的树形结构（二）

March 25,2004

三、客户端代码

　　下面是程序的启动页面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直接返回。如果子节点存在，则可以利用split函
数将子节点列表以数组形式保存。再接下来，就可以创建该层节点的容器，比如divTree0，然后遍历数组创建各个节点，如
div1,div2……。如果某个节点的父节点ID为0，说明该节点没有父节点，程序将把容器divTree0加入文档的BODY；否则当该节点
的父节点ID不为0，则创建与其父节点对应的容器“divTree< < 父节点ID > >”。在创建节点的同时指定了鼠标单击事件的句柄
GetTree函数。

　　注：可以修改GetTreeData.asp，使其返回的子节点列表（即PopulateTree的参数）形式为“节点ID|节点文本|……”，也
就是省略父节点ID，因为任何一组子节点列表其父节点总是相同的。同时，还必须修改PopulateTree函数，使其接受两个参数，第
一个参数是子节点列表，第二个是父节点ID。当节点数量较多时，采用这种方法有利于减少数据传输量，提高效率。

　　四、其他说明

　　综上所述，整个程序的工作过程可以描述为：

浏览器读入文档，执行GetTree函数。
GetTree调用GetTreeData.asp，读取第一层节点数据，然后回调PopulateTree函数。
PopulateTree函数生成divTree0以及节点div1，div2，……。
用户单击任意一个节点。
GetTree函数检查 “divTree< < 节点ID > >” 是否已经存在，如存在则切换子节点显示状态，否则读取子节点列表。
GetTreeData.asp返回子节点列表，回调PopulateTree函数。
PopulateTree生成相应的容器“divTree< < 父节点ID > >”，并生成节点“Div< < 节点ID1 > >”，“div< < 节点ID2 >
>”……。
重复步骤4。
　　运行示例程序步骤如下（默认目录d:Inetpubwwwroot）：

创建一个目录，把所有文件拷贝到该目录。
在Web服务器上发布该目录。
修改Tree.dsn中的数据库路径。
修改GetTreeData.asp中Tree.dsn文件路径。
用浏览器打开Tree.htm。
　　示例程序中的IFRAME是隐藏的，如果要显示它，则请删除IFRAME的属性“STYLE="display:none"”，此时还可以查看节点
的HTML源代码