java web树状导航菜单_导航条——树状导航菜单

1.概述

对于一个导航文字很多，并且可以对导航内容进行分类的网站来说，可以将页面中的导航文字以树状图的形式显示，树状图的导航菜单在实际开发应用中非常多。应用它可以方便用户查看。运行本实例，如图1所示，单击节点名称前的加号“+”可以展开指定的节点，单击减号“—”可以收缩子节点。

2.技术要点

本实例主要是通过JavaScript控制表格行的

标签的显示或隐藏来实现节点的显示和隐藏。控制标签的显示和隐藏，主要是在JavaScript中控制标签对象的display属性来实现。display属性前面已经介绍过，所以此处不再赘述。

3.具体实现

(1)利用JavaScript定义一个函数ShowTR()，用于显示或隐藏表格中指定行的内容。关键代码如下：

(1)利用JavaScript定义一个函数ShowTR()，用于显示或隐藏表格中指定行的内容。关键代码如下：functionShowTR(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("");%>

(3)从视图V_Type中查询商品的分类信息。关键代码如下：

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

(4)循环显示商品分类信息，并查询各分类中所包括的子类名称，如果该分类有相对应的子类，则在节点前显示加号“+”，否则显示减号“—”。注意：需要为每个包含子节点的节点设置超链接，该超链接执行的操作时调用自定义的JavaScript函数showTR()，实现节点的展开与折叠。关键代码如下：

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();%>

0){%>

subType=rs_subType.getString(3);

subID=rs_subType.getInt(4);%>

}while(rs_subType.next());%>