AJAX动态结构树

Davidtwins110 2009-08-13 11:55:17

tree.jsp

<%@ page language="java" pageEncoding="gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>动态tree</title>

 <style>a{TEXT-DECORATION:none}</style>

 <link rel="stylesheet" type="text/css" href="css/tree.css">

 

 <script type="text/javascript" src="ext/ajax.js"></script>

 <script type="text/javascript">

  function treeAcion(nodeId,level){

  //id:父节点id ; level：节点层次

   var node = document.getElementById('child'+nodeId); 

   var varImg = document.getElementById("varImg"+nodeId);  

   if(node.style.display == "none"){

   //向页面treeAction.jsp异步请求节点的下级节点，并将下级节点显示在id为"child"+nodeId的层里

    sendRequest("treeAction.jsp?id="+nodeId+"&level="+level,"child"+nodeId);

    if(node.innerHTML != ""){  

    //有下级时才显示  

     node.style.display = "" ;

     //更改节点前的图片

     varImg.innerHTML="<img  src='images/minus.gif'/>" ;

    }    

   }else{

    node.style.display = "none" ;

    //更改节点前的图片

    varImg.innerHTML="<img  src='images/plus.gif'/>" ;

   }   

   return false ;

  }

 </script>

  </head>



  <body>

    <div id="node0" class="treeClass"><a href="#" onclick="return treeAcion('0','0')" >根接点</a></div>

    <div id="child0" style="display:none;"></div>



    <script type="text/javascript">

     treeAcion('0','0');

    </script>

  </body>

</html>

-------------------------
treeAction.jsp



<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>

<jsp:directive.page import="test.TreeBiz"/>

<jsp:directive.page import="test.TreeDemo;"/>

<%

	try{

  TreeBiz treeBiz = new TreeBiz() ;

  int id = Integer.valueOf(request.getParameter("id")) ;//父节点id

  int level = Integer.parseInt(request.getParameter("level")) ;  //父节点层次

  int curLevel = level+1 ;//计算当前节点层次

  String space = "" ; //菜单前竖虚线数目  

  List<TreeDemo> liChild = treeBiz.getChlids(treeBiz.getTreeDemoById(id));//定义要取得的直属下级列表

   for(int i= 1 ; i<curLevel ; i++){//根据级次生成竖虚线数目   

   space +="<td width='19' nowrap><img src='images/line.gif'></td> " ;

  	}  

  for(int i=0 ; i<liChild.size() ; i++){

   TreeDemo treeNode = liChild.get(i) ;

   String imgSrc = "" ;//图标名称

   if(treeBiz.getChlids(treeNode).size() == 0){

   //不存在下级菜单

    if(i==liChild.size()-1){ 

    //到了最后一个菜单

     imgSrc = "joinbottom.gif" ;

    }else{

     imgSrc = "join.gif" ;

    }    

   }else{

   //存在下级菜单并且到了最后一个

  	if(i==liChild.size()-1){         

    imgSrc = "plusbottom.gif" ;

    }else{

    //不是最后一个存在下级菜单的

    	imgSrc = "plus.gif" ;

    }

   }

%>

   <div id="node<%=treeNode.getId()%>"  class="treeClass">

   <table cellspacing="0" cellpadding="0" align="center" border="0" height="100%" width="100%">

    <tr>

     <%=space %>

     <td width='19' nowrap id="varImg<%=treeNode.getId()%>"><img  src="images/<%=imgSrc%>"/></td>

     <td nowrap>

      <a href="#" onclick="return treeAcion('<%=treeNode.getId()%>',<%=curLevel %>);"><%=treeNode.getItemName()%></a>

     </td>

    </tr>

   </table>

   </div>

   <div id="child<%=treeNode.getId()%>" style="display:none;"></div><%   

  }

  

 }catch(Exception e){

  out.println("<font color='red'>出错了：</font>"+e.getMessage());

 }

%>

----------------------
问题是：树可以显示，但是当最后一个节点有孩子节点的时候显示就有问题。如下示意图：
a
|-b
c
|-d
| |_e
就多出了c下面的竖线。怎么修改上门的jsp文件中的判断语句可以消除这个问题呢？

...全文

58 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

zxy2001225 2011-06-29

打赏
举报

我需要啊，已经给你留言了，谢谢啦

Davidtwins110 2009-08-16

打赏
举报

[Quote=引用 1 楼 xiaozejun 的回复:]
这个问题正在学习中过来向高手们学习学习帮顶楼主问题解决后请记得将解决问题的方式详细解说一下让我们也学习学习
[/Quote]
这个问题还是没解决，但是我换了一个方法来做树。
使用“梅花雪树”控件也很好，速度也很快。
现在做了个JSP版本的tree很好用。
有需要的可以留下联系方式。