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把他插入到相应的地方去。?
1 楼 lijiabin102 2008-11-21 这个树有动态删除动态调整节点的功能吗?还有挂上3000条数据生成的速度是多少呢? 2 楼 starting 2008-11-21 lijiabin102 写道