ajax动态树的实现

一.设计思想:

1.布局css+div:好处就不多说了

2.利用ajax,当点击树中某个节点时才生成其子节点,这样能避免了客户端一次性加载整棵树,执行速度快

3.树的生成用java控制而不是像Dtree的实现是用javascript实现,dtree实现的js代码看了你都会头晕,而且这种树是一次性加载,如果你想利用异步请求(ajax)获得一个树,那么实现起来相当麻烦。因为异步请求后执行是在服务器端执行的,js又不能在服务器端执行。但如果数是用 java实现就不一样了,呵呵。

4.本程序实现分四层:视图层tree.jsp,treeAction.jsp(可以在通过控制层实现);业务层 com.tree.biz.TreeBiz;数据持久层用hibernate,数据库层用mysql

二。数据设计:

很明显,运用表内关联是不错的选择,有多种实现方式,设计了个parid字段用于标识父级id(也可以通过编号来控制,01,01001,01002的形式,具体根据项目的需求来定)建库脚本如下:

************************************数据脚本 start********************************




create database if not exists `template`;

USE `template`;



DROP TABLE IF EXISTS `tree_demo`;

CREATE TABLE `tree_demo` (
  `id` bigint(20) NOT NULL auto_increment,
  `item_num` varchar(20) default NULL,
  `item_name` varchar(50) default NULL,
  `item_parId` bigint(20) default '0',
  PRIMARY KEY  (`id`)
) TYPE=MyISAM;



insert into `tree_demo` values

(1,'','一级菜单1',0),

(2,'','一级菜单2',0),

(3,'','一级菜单3',0),

(4,'','一级菜单4',0),

(5,'','一级菜单5',0),

(6,'','二级菜单11',1),

(7,'','二级菜单12',1),

(8,'','二级菜单13',1),

(9,'','三级菜单121',7),

(10,'','三级菜单122',7),

(11,'','三级菜单123',7),

(12,'','三级菜单124',7),

(13,'','二级菜单21',2),

(14,'','二级菜单22',2);

*************************************数据脚本 end******************************************

三,持久层实现,我是在myeclipse6.0中实现的,所以pojo类和dao的生成很简单,文件名是 com.tree.hibernate.TreeDemo;com.tree.hibernate.TreeDemoDAO;

四,业务逻辑层:com.tree.biz.TreeBiz;代码如下

****************************com.tree.biz.TreeBiz     start**************************************

package com.tree.biz;

import java.util.List;

import com.tree.hibernate.TreeDemo;
import com.tree.hibernate.TreeDemoDAO;

public class TreeBiz {
private TreeDemoDAO dao;
public TreeBiz(){
  dao = new TreeDemoDAO() ;
}
public TreeDemo getTreeDemoById(Long id){
  return dao.findById(id) ;
}

public List getChlids(TreeDemo treeNode){
  List li = null ;
  li = dao.findByItemParId(treeNode!=null?treeNode.getId():0) ;
  return li ;
}

}

*************************************com.tree.biz.TreeBiz     end***********************************

五,视图层

1.css的实现代码

***********************************************tree.css        start*******************************

TABLE{
border:0px;
margin:0px;
padding:0px;
font-size:12px;
}
DIV{
border:0px;
margin:0px;
padding:0px;
}
.treeClass{
height:16px; 
width:200px;   
font-size:12px;
}

******************************************tree.css     end**********************************

2.ajax.js实现

******************************************ajax.js        start**********************************

// JavaScript Document



var divObject ;
function createXMLHttpRequest() {
  //alert("1");
if (window.ActiveXObject) {
  return  new ActiveXObject("Microsoft.XMLHTTP");
} else {
  if (window.XMLHttpRequest) {
  return new XMLHttpRequest();
  }
}
}

function sendRequest(url,showAreaId){//第1个是提交的url,第2个是定义要将服务器返回的信息显示在哪个id域里
var xmlHttp = createXMLHttpRequest();
url += "&sessionId="+parseInt(Math.random()*(10000000));
//alert(url);
xmlHttp.onreadystatechange = function(){
  if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
    //alert(xmlHttp.responseText);
    document.getElementById(showAreaId).innerHTML=xmlHttp.responseText;
   }else{
    alert('请求的页面异常'+xmlHttp.responseText);
    return;
   }
  } 
};

xmlHttp.open("GET",url, false); 
xmlHttp.send(null);
}

******************************************ajax.js        end***********************************

3.tree.jsp,这个页面用于显示树

******************************************tree.jsp      start***********************************

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>纯jsp 动态tree</title>

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

<script type="text/javascript" src="../../js/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"){
    sendRequest("treeAction.jsp?id="+nodeId+"& level="+level,"child"+nodeId);//向页面treeAction.jsp异步请求节点的下级节点,并将下级节点显示在id 为"child"+nodeId的层里
    if(node.innerHTML != ""){  //有下级时才显示 
     node.style.display = "" ;
     varImg.innerHTML="<img  src='../images/o.gif'/>" ;//更改节点前的图片
    }   
   }else{
    node.style.display = "none" ;
    varImg.innerHTML="<img  src='../images/c.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>

<!--这里我通过js事件来生成一级根目录,如果想在服务器端生成这个树,则把这段代码换成java实现,具体参照 treeAction.jsp-->
    <script type="text/javascript">
     treeAcion('0','0');
    </script>
  </body>
</html>

******************************************tree.jsp          end***********************************

4.treeAction.jsp 用于生成指定节点的下级节点,可以根据需要用servlet,或struts来做控制层实现

******************************************treeAction.jsp      start***********************************

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<jsp:directive.page import="com.tree.biz.TreeBiz"/>
<jsp:directive.page import="com.tree.hibernate.TreeDemo;"/>
<%
try{
  TreeBiz treeBiz = new TreeBiz() ;
  Long id = Long.valueOf(request.getParameter("id")) ;//父节点id
  int level = Integer.parseInt(request.getParameter("level")) ;  //父节点层次
  int curLevel = level+1 ;//计算当前节点层次
  String space = "" ;             // 菜单前竖虚线数目
  for(int i= 1 ; i<curLevel ; i++){//根据级次生成竖虚线数目  
   space +="<td width='19' nowrap><img src='../images/g.gif'></td> " ;
  } 
  List<TreeDemo> liChild = treeBiz.getChlids(treeBiz.getTreeDemoById(id));//定义要取得的直属下级列表
  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 = "e.gif" ;
    }else{
     imgSrc = "l.gif" ;
    }   
   }else{          // 存在下级菜单
    imgSrc = "c.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());
}
%>

你可能感兴趣的:(DAO,Ajax,Hibernate,jsp,css)