jsp+javascript+数据库实现树形目录实例



jsp+javascript+数据库实现树形目录实例源码。以实现商品分类为例，假设商品对应着大分类和小分类，现在要达到的效果如下：单击一级目录（大分类），则显示对应的所有二级目录（小分类）信息。

步骤和知识点：

1） 查询数据库，获取大分类信息和每个大分类下对应的小分类信息，并通过javascript自定义函数实现结点的隐藏和显示

<%

ExecuteDb execute=new ExecuteDb();//ExecuteDb是一个与数据库操作相关的类

ResultSet rs=execute.executeQuery(“select ID,TypeName from tb_superType group by ID,TypeName order by TypeName desc”);

%>

……//html页面布局

<%

//获得大分类的信息

int superID=0;

String supertype=””;

int m=1;

while (rs.next()){

superID=rs.getInt(1);

supertype=rs.getString(2);

//查询每个大分类下的小分类信息

ResultSet rs_sub=execute.executeQuery(“select * from tb_subType where superType=”+superID);

int subID=0;

String subtype=““;

//获取小分类的记录数

rs_sub.last();

int sub_rc=rs_sub.getRow();

rs_sub.first();

%>

……//html页面布局

<%

//小分类不存在的情况处理

if(sub_rc<=0)

{%>

<img src=”……” width=”38” height=”16” border=”0”/><%=supertype%>

<%}%>//if

<a href=”Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)”>

<img src=”……” border=”0” alt=”展开” id=”img<%=m%>”></a>

<a href=”Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)”><%=supertype%>


</a>

<%}%>//else

……

<%

if(sub_rc>0){%>

<tr id=”OpenRep<%=m%>” style=”display:none;”>//设置为隐藏状态

<td>

<%

//获取各小分类信息

do{

subID=rs_sub.getInt(1);

subtype=rs_sub.getString(3);

%><%=subtype%><br>//此处应该重新布局，使得页面布局更加合理

<%

m++;//m的值增1，此处一定不要忘记

while(rs_sub.next());

%>

</td>

<%}%>//if(sub_rc>0)

</tr>

2） 函数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=”折叠”;

}

})

ps:

display属性：指定一个对象是否被隐藏，适用范围包括标签body、table、input、div、span、img、textarea等。支持继承性，也就是说如果table被隐藏，则其包含所有的行和单元格都被隐藏。可以设置为none（隐藏）、block（把元素当成块元素显示）、inline（把元素当成内联元素显示）、list-item（把元素当成列表项显示。例如<tr style=”display:none”>表示将行隐藏