如何实现树图的动态伸缩？_Java Web开发

如何实现树图的动态伸缩？

各位大虾，本人做了一个动态树图与后台数据库的内容相关联，可是做好以后这个数据库的一级目录就不能缩回去了，二级目录一直展露在外面，请问有什么修改代码的好方法？谢谢
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="querybean" scope="session" class="test.QueryBean"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文件夹式菜单</title>
<STYLE type=text/css>
A {
FONT-SIZE: 12pt; TEXT-TRANSFORM: none; COLOR: red
}
A:hover {
FONT-SIZE: 12pt; COLOR: red; TEXT-DECORATION: underline
}
A:link {
FONT-SIZE: 12pt; COLOR: blue; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12pt; COLOR: blue; TEXT-DECORATION: none
}
body {
background-image: url(picture/DiscOutline.gif);
}
.style2 {
font-size: 18px;
color: #0000FF;
}
.style3 {color: #0000FF}
</STYLE>

<SCRIPT language=javascript>
<!--
//定义一个标记变量用来表明是不是Netscape浏览器
var isNetscape;
//赋初值为false
isNetscape=false;
//定义一个标记变量用来表明是不是IE浏览器
var isIE;

//赋初值为false
isIE=false;
//定义一个存放浏览器名称的变量
var thename;
//取得浏览器名称
thename=navigator.appName;
//定义存放扫描结果的变量
var result;
//扫描取得的浏览器名称中是否包含Netscape字符串
result=thename.indexOf("Netscape");
//如果结果不是-1,表示包含
if(result!=-1)
{
//把相应的标记变量设置为true
isNetscape=true;
}
//否则,表示不包含
else{
//把相应的标记变量设置为false
isNetscape=false;
}
//扫描取得的浏览器名称中是否包含Microsoft Internet Explore字符串
result=thename.indexOf("Microsoft Internet Explore");
//如果结果不是-1,表示包含
if(result!=-1)
{
//把相应的标记变量设置为true
isIE=true;
}
//否则,表示不包含
else{
//把相应的标记变量设置为false
isIE=false;
}
//定义一个标记变量用来表明是不是IE浏览器或者是Netscape浏览器
var ienets;
//如果isNetscape或isIE变量为true,表示是IE浏览器或者是Netscape浏览器
if(isNetscape||isIE)
{
//设置该变量为true
ienets=true;
}
//否则,表示既不是IE浏览器也不是Netscape浏览器
else{
//设置该变量为false
ienets=false;
}
//如果是IE浏览器或者是Netscape浏览器
if(ienets)
{
//对文档对象进行操作
with(document)
{
//向文档中写入定义层叠样式表的代码
write("<style type='text/css'>");
//如果是Netscape浏览器
if (isNetscape)
{
//向文档中写入定义三个层叠样式表类的代码
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
//否则就是IE浏览器
else{
//向文档中写入定义层叠样式表类的代码
write(".child {display:none}")
}
//向文档中写入定义层叠样式表的结束标记
write("</STYLE>");
}
}

//定义取得索引的函数
function getIndex(obj)
{
var temp;
//定义存放该页面中层数的变量
var len;
//取得该页面中的层数
len=document.layers.length;
//定义一个临时变量
var i;
//下面的循环查找一个层对象
for (i=0; i<len; i++)
{
//定义一个存放临时层对象的变量
var tempobj;
//取得一个层对象
tempobj = document.layers[i];
//如果这个层对象就是我们要找的层对象
if (tempobj.id == obj)
{
//取得该层对象的下标
temp = i;
//跳出这个循环语句
break;
}
}
//返回这个下标
return temp;
}

//定义重新排列各层的函数
function arrange()
{
//定义存放第一个层的左上角相对与该页面左上角的纵坐标的变量
var firstY;
//取得第一个层的左上角相对与该页面左上角的纵坐标
firstY=document.layers[thefirstIndex].pageY;
//定义存放第一个层的高度的变量
var height;
//取得第一个层的高度
height=document.layers[thefirstIndex].document.height;
//定义存放下一个位置的纵坐标的变量
var nextY;
//计算出下一个位置的纵坐标
nextY = firstY+height;
//定义一个存放该页面中的层数的变量
var len;
//取得该页面中的层数
len=document.layers.length;
//定义一个临时变量
var i;
//下面的循环实现把没有隐藏的层重新排列
for (i=thefirstIndex+1; i<len; i++)
{
//定义一个存放临时层对象的变量
var tempobj;
//取得一个层对象
tempobj = document.layers[i];
//如果该层对象没有隐藏
if (tempobj.visibility != "hide")
{
//设置该层对象的纵坐标
tempobj.pageY = nextY;
//定义一个存放该层对象的高度的变量
var tempheight;
//取得该层对象的高度
tempheight=tempobj.document.height
//计算出下一个位置的纵坐标
nextY += tempheight;
}
}
return;
}

//定义该打开该页面时执行的函数
function begin()
{
//如果既不是IE浏览器也不是Netscape浏览器
if (!ienets)
{
//弹出警告信息对话框
alert("请使用IE浏览器或者Netscape浏览器打开本页面!");
//直接返回,不再向下执行
return;
}
//否则,表示是IE浏览器或者Netscape浏览器
else{
//如果是Netscape浏览器
if(isNetscape)
{
//定义存放该页面中的层数的变量
var len;
//取得该页面中的层数
len=document.layers.length;
//定义一个临时变量
var i;
//下面的循环把所有的子菜单项所在的层隐藏
for (i=0; i<len; i++)
{
//定义存放存放一个临时层对象的变量
var obj;
//取得一个层对象
obj = document.layers[i];
//定义存放扫描结果的变量
var h;
//对该层对象的标识进行扫描
h=obj.id.indexOf("Child");
//如果包含"Child"
if (h != -1)
{
//隐藏该层对象
obj.visibility = "hide";
}
}
//调用函数重新排列各层
arrange();
}
//否则,就是IE浏览器
else{
//定义一个存放数组对象的变量
var group;
//取得整个文档中所有div文本块组成的数组
group = document.all.tags("DIV");
//定义一个临时变量
var i;
//下面的循环用来隐藏子菜单项
for (i=0; i<group.length; i++)
{
//定义一个暂时存放各个文本块对象的变量
var obj;
//取得相应的文本块
obj = group(i);
//如果该文本块对象是子菜单项
if (obj.className == "child")
{
//隐藏该文本块
obj.style.display = "none";
}
}
}
return;
}
}

//定义处理菜单单击事件的函数
function expandIt(obj)
{
//如果既不是IE浏览器也不是Netscape浏览器
if (!ienets)
{
//弹出相应的警告信息
alert("请使用IE浏览器或者是Netscape浏览器打开本页面!");
//直接返回,不做任何处理
return;
}
//否则是IE浏览器或者是Netscape浏览器
else{
//如果是IE浏览器
if (isIE)
{
//定义一个临时存放文本块对象的变量
var tempobj;
//取得相应的文本块对象
tempobj = eval(obj + "Child");
//如果该文本块是隐藏的
if (tempobj.style.display == "none")
{
//使该文本块显示出来
tempobj.style.display = "block";
}
//否则,如果该文本块不是隐藏的
else {
//使该文本块隐藏起来
tempobj.style.display = "none";
}
}

//否则就是Netscape浏览器
else {
//定义一个存放临时层对象的变量
var tempobj;
//取得该菜单的子菜单所在的层对象
tempobj = eval("document." + obj + "Child");
//如果该层对象是隐藏的
if (tempobj.visibility == "hide")
{
//显示该层对象
tempobj.visibility = "show";
}
//否则,如果该层对象是显示的
else {
//隐藏该层对象
tempobj.visibility = "hide";
}
//调用函数重新排列没有隐藏的层对象
arrange();
}
return;
}
}
//定义设置浏览器状态栏信息的函数
function setstatus(val)
{
//定义一个临时变量
var msg;
//取得要设置的信息
msg=val;
//把信息显示在状态栏上
window.status=msg;
return;
}
// -->
</SCRIPT>
</head>

<body>
<SCRIPT language=javascript>

</SCRIPT>
<FONT face=金山简行楷 color=green size=4>EPON网络体系结构</FONT>
<P align=left><FONT
color=#000000><a href="picture.jsp" target="topFrame1">显示配置菜单首页</a></FONT></P>
<div align="left"><img src="picture/Agent.bmp" width="30" height="30"> <span class="style2"><a href="tree4.jsp">Agent（127.0.0.1）刷新</a></span><a href="/tree4.jsp" target="_self"><span class="style3"></span></a><br align=left>
 </br>
</div>
<%
ResultSet rs;
rs=querybean.getQuery("SELECT * FROM OLT ");//执行SQL语句并返回结果
ResultSet as;
rs.last();
int flag = rs.getRow();
rs.beforeFirst();
//out.println(flag);
//out.println(num);
//while(rs.next()){
as=querybean.getQuery("SELECT * FROM tree ");//执行SQL语句并返回结果
as.last();
int num = as.getRow();
for(int i=1;i<=flag;i++){
//char a = (char)i;
%>
<DIV class=parent id=KB1Parent><A
href="tree/tree_index.jsp" target="topFrame1"
onclick="expandIt('KB1');return false;" onmouseover="setstatus('OLT信息')" onmouseout="setstatus('')"> <IMG height=18 src="picture/OLT.gif"
width=35 border=0><IMG height=11 alt="" src="picture/ecblank.gif" width=12 border=0><%rs.next();%>OLT<%=rs.getString(1)%></A></DIV>

<%as.beforeFirst();%>
<%for(int j=1;j<=num;j++){%>
<%as.next();%><%if(as.getString(i) ==null){break;}else{%>
<A onmouseover="setstatus('ONU信息')"
onmouseout="setstatus('')" href="configure/ONU_parameter.jsp"
target=topFrame1><IMG height=11 alt="" src="picture/ecblank.gif" width=20 border=0> <IMG height=18
src="picture/ONU.gif" width=32 border=0>
<%=as.getString(i)%></A><br><%}%><%}%>
<%}%>
<SCRIPT language=JavaScript>

</SCRIPT>
</body>
</html>

搜索更多相关主题的帖子: 伸缩动态

----------------解决方案--------------------------------------------------------
其实归根到底都是js实现的，你可以尝试用ajax实现
----------------解决方案--------------------------------------------------------
当然了，你也可以用css+div
----------------解决方案--------------------------------------------------------