-
您的位置:首页 → 精文荟萃 → 软件资讯 → 利用ASP脚本制作异步装载的树形结构(二)
利用ASP脚本制作异步装载的树形结构(二)
时间:2004/10/7 19:05:00来源:本站整理作者:蓝点我要评论(0)
-
三、客户端代码
下面是程序的启动页面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源代码
相关阅读
Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
-
热门文章
360快剪辑怎么使用 36金山词霸如何屏幕取词百度收购PPS已敲定!3
最新文章
微信3.6.0测试版更新了微信支付漏洞会造成哪
360快剪辑怎么使用 360快剪辑软件使用方法介酷骑单车是什么 酷骑单车有什么用Apple pay与支付宝有什么区别 Apple pay与贝贝特卖是正品吗 贝贝特卖网可靠吗
人气排行
xp系统停止服务怎么办?xp系统升级win7系统方电脑闹钟怎么设置 win7电脑闹钟怎么设置office2013安装教程图解:手把手教你安装与qq影音闪退怎么办 QQ影音闪退解决方法VeryCD镜像网站逐个数,电驴资料库全集同步推是什么?同步推使用方法介绍QQ2012什么时候出 最新版下载EDiary——一款好用的电子日记本
查看所有0条评论>>