利用asp脚本制作异步装载的树形结构.txt

用纯ＡＳＰ代码实现图片上传并存入数据库中

利用ASP脚本制作异步装载的树形结构（一）（转）——好东东！！    


--------------------------------------------------------------------------------

 【天啦】 于 00-6-20 上午 10:52:50 加贴在 Joy ASP ↑：

　 　 树形结构是描述层次数据的常见方法。本文介绍的树形结构生成程序主要由一个ASP页面、二个JavaScript函数构成。该树形结构是异步的，也就是说，节点数据仅在必要时才读取，而不是一次性全部发送到客户端。 




　　 一、概述 

　　 树形结构中所有的节点都必须包含以下属性：本身的ID，父节点的ID，以及本节点的说明（节点文本）。本文用到了一个Access数据库Tree.mdb来保存这些节点信息。Tree.mdb包含表tblTree，其定义如下：
　　 　　 字段名称 类型 说明 
ElementID 自动编号 节点的唯一标识 
ParentElementID 数字 父节点的ID 
ElementText 文本 节点文本 



　　 本程序利用Tree.dsn文件定义Tree.mdb数据源。Tree.dsn内容可以用控制面板中的ODBC数据源配置程序得到，内容如下： 

　[ODBC]
　DRIVER=Microsoft Access Driver (*.mdb)
　UID=admin
　UserCommitSync=Yes
　Threads=3
　SafeTransactions=0
　PageTimeout=5
　MaxScanRows=8
　MaxBufferSize=512
　ImplicitCommitSync=Yes
　FIL=MS Access
　DriverId=25
　DefaultDir=d:Inetpubwwwroot
　DBQ=d:InetpubwwwrootTree.mdb
　　 注意运行本文程序时，应当修改Tree.dsn中的DefaultDir和DBQ，使其指向正确的目录和文件。 

　　 客户端功能分两部分实现：其一是一个普通的浏览器窗口，其二为一个IFRAME。IFRAME是不可见的，它的作用是负责浏览器窗口与服务器之间的通信。下面是示例程序的一个运行界面：

　　 



　　 　　 　　 　　 【图1】 

　　 树形结构各个节点之间的关系可以用< DIV >标记表示如下：

　　 



　　 　　 　　 　　 【图2】 

　　 在这里，文档的< BODY >是第一层节点（divTree0）的容器，第一层总共包含四个节点，这四个节点又分别是其子节点组的容器。例如，上图中divTree0包含了div1、div2、div3和div4（它们分别对应一个节点）；而div1又是divTree1的容器，divTree1包含了div5——div8，div5又是divTree5的容器；而divTree5包含了div9……。 

　　 鼠标单击事件由各个节点本身（div1，div2，……）响应，而不是由容器响应。节点响应鼠标单击事件后将禁止事件进一步向上（向父节点）传递。这部分功能在GetTree函数内实现，请参见该函数代码以了解具体实现方法。 

　　 整个树形结构的作用过程可用下图表示：

　　 



　　 　　 　　 　　 【图3】 

　　 二、服务器端代码 

　　 客户端脚本向服务器发送的请求包含了一个节点标识，服务器脚本GetTreeData.asp查找数据库获得该节点的所有子字节点，并将这些子节点返回给客户程序。GetTreeData.asp代码如下: 

　< % Dim rstTree
　   Dim strSQL
　   Dim strData
　   
　   If Request.QueryString("Level") = ""  Then
　      Response.End
　   End If
　
　   strSQL = "SELECT * FROM tblTree WHERE  ParentElementId = " 
　   strSQL = strSQL & Request.QueryString("Level") & " ORDER BY ElementID "
　
　   Set rstTree = Server.CreateObject("ADODB.Recordset")
　   rstTree.Open strSQL,"FileDSN=d:inetpubwwwroot    ree.dsn"
　
　   strData = ""
　   Do While Not rstTree.EOF
　      strData = strData & rstTree("ElementId") & "|" & rstTree("ParentElementId") & "|" &      
　rstTree("ElementText") & "|"
　      rstTree.MoveNext
　   Loop
　rstTree.Close % >
　
　< HTML >
　 < BODY OnLoad="parent.PopulateTree(＇< %=strData% >＇);" >< /BODY >
　< /HTML >
　　 注意：在实际使用中应相应地更改DSN文件所在路径。这段代码并不复杂，但请注意以下两点：第一，客户请求的格式应该为“GetTreeData.asp?Level=节点ID”；第二，返回客户端的节点列表格式为“节点标识|父节点标识|节点文本|……”。 




利用ASP脚本制作异步装载的树形结构（二）（转）——好东东！！    


--------------------------------------------------------------------------------

 【天啦】 于 00-6-20 上午 10:55:26 加贴在 Joy 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直接返回。如果子节点存在，则可以利用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源代码。