学习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 写道
这个树有动态删除动态调整节点的功能吗?还有挂上3000条数据生成的速度是多少呢?
动态删除,动态调整可能要自己用脚本去实现,请问你3000条数据还要用树吗?
3 楼
yunmanfan
2008-12-02
starting 写道
lijiabin102 写道
这个树有动态删除动态调整节点的功能吗?还有挂上3000条数据生成的速度是多少呢?
动态删除,动态调整可能要自己用脚本去实现,请问你3000条数据还要用树吗?
不是的,楼主,楼上说的有道理。如果是在大型项目中,真正形成树的数据可能是几十万条,所以还是要考虑性能的问题。