实现树型结构(二)

实现树型结构(第二部分)
作者：ACE      最后更新：06/08/2000      类别：原创

在上一部分，我们讨论了如何读取数据，并得到了表示层次关系的结果集。在这一部分，我们来看如何用脚本语言实现类似 MSDN 的界面。

可以在服务器端也可以在客户端完成这样的功能，这就要看需要了。在服务器端完成需要占用服务器的处理时间及相关资源，在客户端完成需要浏览器支持脚本语言(一般是 JavaScript)，并要下载执行脚本。

在我们的示例里采用客户端执行脚本的方法。

1. 将数据发送到浏览器

看下列代码：

Dim GetRSString
Dim cnn
Dim rs
Dim l_ID
l_ID = "1"      ‘’表示根节点

Set cnn = Server.CreateObject("ADODB.Connection")
Set rs = Server.CreateObject("ADODB.RecordSet")
cnn.Open "Provider=SQLOLEDB;.......................略
rs.Open "sp_listfile " & l_ID,cnn

GetRSString = rs.GetString(2,,"?quot;","~~") ‘’adClipString
rs.Close
Set rs = Nothing
cnn.Close
Set cnn = Nothing

Response.Write "<FORM id=‘’rs‘’ name=‘’rs‘’>" &_
           "<INPUT type=‘’hidden‘’ id=‘’rsCache‘’ name=‘’rsCache‘’ value=‘’" & GetRSString & "‘’></FORM>" &_
        "<SCRIPT language=JavaScript src=‘’Listfile.js‘’></SCRIPT>" &_
        "<Script language=Javascript>LoadRecords(" + l_ID + ");</Script>"

在上面的代码中，用 GetString 的方法得到了以 ?quot;和~~ 分隔的字符串，并用隐藏表单进行存储。 Listfile.js 里的脚本实现了我们想要得功能，LoadRecords 是其中的一个函数。

2. Listfile.js 中的脚本

这是全部代码：

function ToggleDisplay(oButton, oItems)
{
    if ((oItems.style.display == "") || (oItems.style.display == "none"))    {
        oItems.style.display = "block";
        oButton.src = book_open.src;
    }    else {
            oItems.style.display = "none";
            oButton.src = book_close.src;
    }
    
}
function LoadRecords(l_ID)    {
    var strRecords=document.all("rsCache").value;
    var arrRecords=strRecords.split("~~");
    var arrFields;
    var Current_level;
    var Current_ID;
    var strTemp;
    var strList;
    var Prior_ID;
    var Prior_level=-1;
    var i;
    var j;
    Prior_ID=l_ID;
    strList = "<TABLE><TR><TD height=300 valign=top class=Newscontents><!--" + l_ID + "-->";
    for (i=0;i<arrRecords.length;i++)    
    {
        arrFields=arrRecords[i].split("?quot;");
        Current_level = arrFields[0];
        Current_ID = arrFields[1];
        if (arrFields[2] == 0)
        {
            strTemp = "<DIV><IMG SRC=‘’images/plus.gif‘’ ID=‘’i_" + Current_ID +
                    "‘’ onclick=‘’ToggleDisplay(i_" + Current_ID + ",f_" +
                    Current_ID + "_d);‘’ width=31 height=15 style=‘’position:relative;left:" +
                    (Current_level*17) + ";top:3;cursor:hand;‘’> <A ID=‘’f_" + Current_ID +
                    "‘’ style=‘’position:relative;left:" + (Current_level*17) +
                    ";cursor:hand;‘’ onclick=‘’ToggleDisplay(i_" + Current_ID + ",f_" +
                    Current_ID + "_d);‘’>" + arrFields[3] + "</A></DIV><DIV ID=‘’f_" +
                    Current_ID + "_d‘’ style=‘’display: none;‘’><!--" + Current_ID + "--></DIV>";
            if (Current_level > Prior_level)    
            {
                strTemp += "<!--LEVEL" + Current_level + "-->";
                strList = strList.replace("<!--" + Prior_ID + "-->",strTemp);
            }
            else    
            {
                if (Current_level == Prior_level)    
                {
                    strTemp += "<!--LEVEL" + Current_level + "-->";
                    strList = strList.replace("<!--LEVEL" + Current_level + "-->",strTemp );
                }
                else
                {
                    for (j=parseInt(Current_level)+1;j<=Prior_level;j++)    
                    {
                        strList = strList.replace("<!--LEVEL" + i + "-->","")
                    }
                    strTemp += "<!--LEVEL" + Current_level + "-->";
                    strList = strList.replace("<!--LEVEL" + Current_level + "-->",strTemp );
                }
            }
        }
        else    
        {
            strTemp = "<DIV><IMG SRC=‘’images/message.gif‘’ width=11 height=14  style=‘’position:relative;left:" +
            (Current_level*17+20) + ";top:2;cursor:hand;‘’>  ";
            strTemp += "<A ID=‘’f_" + Current_ID + "‘’ HREF=‘’page.asp?article=" + arrFields[3] +
            "‘’ TARGET=MAIN style=‘’position:relative;left:" + (Current_level*17 +16) +
            ";cursor:hand;‘’>" + arrFields[3] + "</A></DIV><!--LEVEL" + Current_level + "-->";
            if (Current_level > Prior_level)
                strList = strList.replace("<!--" + Prior_ID + "-->",strTemp);
            else
                strList = strList.replace("<!--LEVEL" + Current_level + "-->",strTemp);
        }
    
        Prior_ID = Current_ID;
        Prior_level = Current_level;
    }
    strList += "</TD></TR><TR><TD height=10><img style=‘’display:none;‘’ " +
        "src=‘’images/plus.gif‘’ id=book_close><img style=‘’display:none;‘’ " +
        "src=‘’images/minus.gif‘’ id=book_open> </TD></TR></TABLE>";
document.write(strList);
}


终于写完了，大家自己看吧，如果你有更好的主意别望了告诉我。

 

原文转自：http://www.ltesting.net