ajax动态树问题?

我正在写一个ajax树,基本操作都有了,由于该项目的跳转控制不清楚,所以留了一个ajax接口
给你代码参考,不过我做的是类似vista目录结构的树结构,没有虚线的那种
var TREE_TABLE_ID='RoleTreeTable';
var ROLE_SHOW_TYPE={role:'role',user:'user'};
var TREE_ROW_HEIGHT=30;
var NODE_OPEN='../esena/picture/roleTree/open.gif';
var NODE_CLOSE='../esena/picture/roleTree/close.gif';
var NODE_ROLE='../esena/picture/roleTree/role.gif';
var NODE_USER='../esena/picture/roleTree/user.gif';
function Role(roleId,roleName,descrip,roleType){
this.roleId=roleId;
this.roleName=roleName;
this.descrip=descrip;
this.roleType=roleType;
}
Role.prototype.addNewRowAndInnerTable=function(rowIndex,level){
var outerRow;
var outerCell;
outerRow=$(TREE_TABLE_ID).insertRow(rowIndex);
outerRow.attachEvent('oncontextmenu',showRightMenu);
outerRow.level=level;
outerRow.roleId=this.roleId;
outerRow.rowType=this.roleType;
outerRow.style.height=TREE_ROW_HEIGHT+'px';
outerRow.id='row_'+this.roleId;
outerCell=outerRow.insertCell(0);
outerCell.innerHTML='<table cellpadding=0 cellspacing=0 border=0></table>';
return outerCell.children[0];
}
function showRightMenu(){
var obj=event.srcElement;
while(obj.roleId==null){
obj=obj.parentElement;
}
alert(obj.roleId)
event.returnValue=false;
}
Role.prototype.drawContent=function(rowIndex,level){
var table=this.addNewRowAndInnerTable(rowIndex,level);
var row=table.insertRow();
row.rowId=table.parentElement.parentElement.id;
var cell=row.insertCell(0);
cell.style.width=12*level+'px';
cell=row.insertCell(1);
cell.style.width='30px'
cell.level=level;
if(this.roleType==ROLE_SHOW_TYPE.role){
cell.innerHTML='<img src='+NODE_CLOSE+' class=imgOP onclick=changeNode()><img src='+NODE_ROLE+' class=small>';
}else{
cell.innerHTML='<img src='+NODE_USER+' class=small>';
}
cell=row.insertCell(2);
cell.innerText=this.roleName;
if(table.parentElement.offsetHeight>TREE_ROW_HEIGHT){$(TREE_TABLE_ID).style.width=$(TREE_TABLE_ID).currentStyle.width.slice(0,-2)*1+50;}
}
window.onload=function(){
projectRoot.drawContent(0,1);
}
function changeNode(){
var img=event.srcElement;
if(img.isOpen!=true){img.isOpen=true;openNode(img);}else{img.isOpen=false;closeNode(img);}
}
function openNode(img){
img.src=NODE_OPEN;
showChildrenNode(img);
}
function closeNode(img){
img.src=NODE_CLOSE;
hiddeChildrenNode(img);
}
function showChildrenNode(img){
var cell=img.parentElement;
var rowId=cell.parentElement.rowId;
var rowCursor=$(TREE_TABLE_ID).rows[0];
var rowIndex=0;
while(rowCursor!=null){
if(rowCursor.id==rowId)break;
rowCursor=rowCursor.nextSibling;rowIndex++;
}
if(rowCursor.nextSibling!=null&&rowCursor.nextSibling.level>rowCursor.level){
var nowLevel=rowCursor.level;
rowCursor=rowCursor.nextSibling;
while(rowCursor!=null){
if(rowCursor.level==nowLevel+1){
rowCursor.style.display='';
if(rowCursor.rowType==ROLE_SHOW_TYPE.role){
rowCursor.cells[0].children[0].rows[0].cells[1].children[0].src=NODE_CLOSE;
}
}else if(rowCursor.level<=nowLevel){
break;
}
rowCursor=rowCursor.nextSibling;
}
return;
}
var children=getChildrenData(rowId);
for(var index=0;index<children.length;index++){
children[index].drawContent(rowIndex+index+1,cell.level+1);
}
}
function hiddeChildrenNode(img){
var cell=img.parentElement;
var rowId=cell.parentElement.rowId;
var rowCursor=$(TREE_TABLE_ID).rows[0];
var rowIndex=0;
while(rowCursor!=null){
if(rowCursor.id==rowId)break;
rowCursor=rowCursor.nextSibling;rowIndex++;
}
var nowLevel=rowCursor.level;
rowCursor=rowCursor.nextSibling;
while(rowCursor!=null){
if(rowCursor.level>nowLevel){
rowCursor.style.display='none';
}else{
break;
}
rowCursor=rowCursor.nextSibling;
}
}
function getChildrenData(parentId){
return [new Role(Math.ceil(Math.random()*1000000),'子项目1','子项目1','role'),new Role(Math.ceil(Math.random()*1000000),'子项目2','子项目2','role'),new Role(Math.ceil(Math.random()*1000000),'子项目2','子项目2','user')];
}
function $(i){return document.getElementById(i);}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0">
<meta name="陈淼" http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>中心网络</title>
<script language='javascript' src='/esena/script/roleTree.js' charset="UTF-8"></script>
</head>
<style type="text/css">
<!--
#RoleTreeDiv{width:300px;height:500px;border:1px solid gray;overflow:scroll;}
#RoleTreeTable{position:relative;float:left;width:200px;}
#RoleTreeTable td{position:relative;float:left;border-width:0px;height:12px;width:auto;}
#RoleTreeTable table td{position:relative;float:left;border-width:0px;width:auto;}
.imgOP{position:absolute;left:2px;top:4px;cursor:hand;}
.small{position:absolute;left:12px;top:1px;width:16px;height:14px;}

-->
</style>
<script language='javascript' charset="UTF-8">
projectRoot=new Role(1000001,'项目组','军工项目','role');
</script>
<body>
<div id="RoleTreeDiv" >
<table id="RoleTreeTable" cellpadding=0 cellspacing=0 border=0></table>
</div>
</body>
</html>
仅供参考阿