导航条——树状导航菜单

Posted 2020-07-27 柯南&

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>