js结合ajax和struts2.0----树

学习js有一段时间了，觉得它的灵活性是在是太厉害了，特别是结合一些js框架的应用。能上一些复杂的问题变的很的简单。今天我要和大家分享的js结合ajax和struts2.0的一颗树。该想法的主要逻辑是：首先显示根节点，然后通过点击根节点，发送AJAX请求，从后台数据库中查询子节点，再通过回调函数把子节点插入到根节点下面，以此类推。这样不管有多大的树都不会变得很迟钝。如jsp代码： 

• <form id="form1" name="form1" method="post" action="">	
  	<s:iterator value="buildingList" status="List">
  	<div  id="<s:property value="jzwbh" />" hasDtl='0'>
  	<img src='<%=path%>/console/images/tree/plus2.gif' id="budling" onclick="lookDtl('<s:property value="jzwbh" />');"  />
  	<input id="dzms" name="dzms" size="35" value=<s:property value="DZMS" /> onclick="displayBudlingInfo('<s:property value="jzwbh" />')" style="border-bottom:0px; border-left:0px;  border-right:0px; border-top:0px;cursor:pointer"/></div>
  	</s:iterator>	

    
• 点击树的节点，执行lookDtl脚本，则通过ajax从数据库取出其需要的下一层的数据。将其数据返回显示到一个jsp页面，在ajax的回调函数中，把刚才的那个jsp页面插入显示父级树的页面上。以下是lookDtl和回调函数

  function lookDtl(jzwbh){
  	budlingDivObj=document.getElementById(jzwbh);	
  	var thisId=budlingDivObj.hasDtl;
  	if(thisId=='0'){
  		var _url="rkHouse_getHouseByJzwbh.do?jzwbh="+jzwbh+"&tempTime="+((new Date()).getTime());			
  		sendAjax(_url,"houseBak","text");
  	}else{
  		var childLen=budlingDivObj.childNodes.length;
  			
  		try{			
  			for(var i=4;i<=childLen;i++){
  				var  tt=budlingDivObj.childNodes[i];
  				//parent.alert(i+"= "+tt.innerHTML)
  				if(tt.style.display=='none'){  //判断是否已查询过数据
  					tt.style.display='';
  				}else{
  					tt.style.display='none'
  				}
  			}
  		}catch(err){}
  	
  	}
  	
  }
  function houseBak(_str){	
  	budlingDivObj.hasDtl='1';
  	var oldbudling=budlingDivObj.innerHTML;
  	budlingDivObj.innerHTML=oldbudling+_str;
  	
  }

   
• ajax返回的页面的代码和最前面添出来的代码是一样的，这样随便有多少级的树都可以案同样的方法做。最主要的是用好把已好的div用innerHTML把他插入到相应的地方去。

 

这个树有动态删除动态调整节点的功能吗？还有挂上3000条数据生成的速度是多少呢？

动态删除，动态调整可能要自己用脚本去实现，请问你3000条数据还要用树吗？

不是的，楼主，楼上说的有道理。如果是在大型项目中，真正形成树的数据可能是几十万条，所以还是要考虑性能的问题。