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));
//ale