導航條——樹狀導航菜單

1.概述

    對於一個導航文字很多，並且可以對導航內容進行分類的網站來說，可以將頁面中的導航文字以樹狀圖的形式顯示，樹狀圖的導航菜單在實際開發應用中非常多。應用它可以方便用戶查看。運行本實例，如圖1所示，單擊節點名稱前的加號“+”可以展開指定的節點，單擊減號“—”可以收縮子節點。

 

2.技術要點

    本實例主要是通過JavaScript控制表格行的<tr>標簽的顯示或隱藏來實現節點的顯示和隱藏。控制<tr>標簽的顯示和隱藏，主要是在JavaScript中控制<tr>標簽對象的display屬性來實現。display屬性前面已經介紹過，所以此處不再贅述。

 

3.具體實現

（1）利用JavaScript定義一個函數ShowTR()，用於顯示或隱藏表格中指定行的內容。關鍵代碼如下：

（1）利用JavaScript定義一個函數ShowTR()，用於顯示或隱藏表格中指定行的內容。關鍵代碼如下：
function ShowTR(objImg,objTr){
            if(objTr.style.display == ""){   //折疊展開的節點
                  objTr.style.display = "none";
                  objImg.src = "images/jia.gif";    //改變圖標
                  objImg.alt = "展開";         //設置工具提示為“展開”
            }else{                                 //展開折疊的節點
                  objTr.style.display = "";
                  objImg.src = "images/jian.gif";  //改變圖標
                  objImg.alt = "折疊";         //設置工具提示為“折疊”
            }
}

（2）為了實現在默認情況下第1節點為展開狀態，可以在該函數后面加入以下代碼，用於當第1個節點包括子節點時，設置第1個節點為展開狀態，關鍵代碼如下：

<%
            if(m>1)  //設置第1個節點為展開狀態
                  out.println("<script language='javascript'>ShowTR(img1,OpenRep1)  //設置第1個節點為展開狀態</script>");
%>

（3）從視圖V_Type中查詢商品的分類信息。關鍵代碼如下：

<%
            ConnDB conn=new ConnDB();
            ResultSet rs_superType=conn.executeQuery("select ID,superType from V_Type group by ID,superType order by superType desc");
%>

（4）循環顯示商品分類信息，並查詢各分類中所包括的子類名稱，如果該分類有相對應的子類，則在節點前顯示加號“+”，否則顯示減號“—”。注意：需要為每個包含子節點的節點設置超鏈接，該超鏈接執行的操作時調用自定義的JavaScript函數showTR()，實現節點的展開與折疊。關鍵代碼如下：

<table width="100%" height="40"  border="0" cellpadding="0" cellspacing="0">
      <%
                  int ID_superType=0;
                  String superType="";
                  int m=1;
                  while(rs_superType.next()){
                           ID_superType=rs_superType.getInt(1);
                           superType=rs_superType.getString(2);
                        String sql="select * from V_Type where ID="+ID_superType;
                        ResultSet rs_subType=conn.executeQuery(sql);
                        String subType="";
                        int subID=0;
                        //獲取記錄總數
                        rs_subType.last();
                        int subType_RC=rs_subType.getRow();
                        rs_subType.first();
                   %>
            <tr>
                  <td>
                        <%if(subType_RC<=0){%>
                        <img src="images/jian_null.gif" width="38" height="16" border="0">
                        <%=superType%>
                        <%}else{%>
                        <a href="Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)">
                              <img src="images/jia.gif" border="0" alt="展開" id="img<%=m%>">
                        </a>
                        <a href="Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)"><%=superType%></a>
                        <%}%>
           </td>
                  <%if (subType_RC>0){%>
                    <tr id="OpenRep<%=m%>" style="display:none;">
                     <td colspan="6">
                        <%do{
                              subType=rs_subType.getString(3);
                              subID=rs_subType.getInt(4);
                        %>
                       <table width="100%"  border="0" cellspacing="-2" cellpadding="-2">
                   <tr>
                      <td height="25" align="center">
                              <table width="90%"  border="0" cellspacing="0" cellpadding="0">
                            <tr onMouseOver="this.style.background='#EEEEEE'" 
                                    onMouseOut="this.style.background=''">
                    <td width="15%">&nbsp;</td>
                    <td width="10%" align="center">
                                    <img src="images/folder.gif" width="16" height="16" border="0"> 
                              </td>
                    <td width="75%"><a href="#"><%=subType%></a></td>
                       </tr>
                          </table>
                              </td>
                   </tr>
                 </table>
                         <%     m++;  //注意，該條語句一定不能少
                              }while(rs_subType.next());
                        %>
                     </td>
                     <%}%>
                    </tr>
                  <%}%>
</table>