您的位置:首页精文荟萃软件资讯 → 利用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——一款好用的电子日记本