The tree menu can be said to be the most widely used application in the project. In the past, regardless of the use of the Microsoft Control tree, or a relatively good Arai type, are all read out the data, and then outline. So if the amount of data is large, the first display will require customers to wait a long time, reducing the customer's experience. Today, with Ajax, things get easier.
This use refers to the "conquest of web2.0 development technology detailed" example.
The platform I use is struts+spring+hibernate, but it is struts that deals with Ajax. I couldn't post the whole code, so I posted the important foreground Ajax code, and the backstage code looked at the technology you were using.
1, JSP page <% @ Page language = "java" contentType = "text/html; charset=gb2312 "import =" JAVA.UTIL.*,COM.WEHAVE.OA.CECONTRACT.MODEL.TBJYHTFLB "%>
< HTML >
< head >
< title > Insert title here </title >
< link rel = "stylesheet" href = ". /css/tree.css ">
< script type = "Text/javascript" src = ". /js/tree_ajax.js "></script >
< script type = "Text/javascript" src = ". /js/tree_htfl.js "></script >
< script languge = "JavaScript" >
function ShowDetail (id,name,flag) {
Window.parent.right.location = "Getcontract.go?method=dogetcontract&folderid=" + ID + "&&foldername=" "+ NAME +" &&flag= "+ flag;
}
</script >
< body bgcolor = "#F6F9FF" >
< tbody >
< table cellpadding = "0" cellspacing = "0" width = "+" >
< div id = "load" style = "Display:none" > < img src = ". /images/tree_loading.gif "> Loading data. </div >
< ul class = "Tree" >
<% list treelist = (list) request.getattribute ("Treefolder");
Iterator it = Treelist.iterator ();
while (It.hasnext ()) {
Out.println (It.next (). toString ());
}
%>
</table >
</tbody >
</Body >
</HTML >
2, JS code
function showhide (ID)
{
var el= document.getElementById (ID);
var bexpand = true;
var images = El.getelementsbytagname ("IMG");
if (Images[0].src.indexof ("Tree_minus.gif")!=-1)
{
Bexpand = false;
Images[0].src= ". /images/tree_plus.gif ";
}else{
Images[0].src= ". /images/tree_minus.gif ";
}
var subs=el.lastchild;
if (Bexpand)
subs.style.display= "Block";
Else
Subs.style.display= "None";
}
function Getsubtree (ID, Submiturl)
{
var Submiturl=submiturl
Postxmlhttp (Submiturl, ' Parsesubtree ("' +id+ ') ', ' Load (" ' +id+ ') ');
}
function Parsesubtree (ID)
{
var el= document.getElementById (ID);
var ulelmt= document.createelement ("UL");
Ulelmt.innerhtml=_xmlhttprequestobj.responsetext;
El.appendchild (ULELMT);
var images = El.getelementsbytagname ("IMG");
Images[0].setattribute ("src", ". /images/tree_minus.gif ");
Images[0].setattribute ("onclick", New Function ("Showhide (' +id+")));
var atag = el.getelementsbytagname ("A");
Atag[0].setattribute ("onclick", New Function ("Showhide (' +id+")));
var loaddiv= document.getelementbyid ("load");
Loaddiv.style.display= "None";
}
function load (ID)
{
var loaddiv= document.getelementbyid ("load");
loaddiv.style.display= "Block";
}
var _postxmlhttpprocesspostchangecallback;
var _xmlhttprequestobj;
var _loadingfunction;
function Postxmlhttp (Submiturl, Callbackfunc, Loadfunc)
{
_postxmlhttpprocesspostchangecallback = Callbackfunc;
_loadingfunction = Loadfunc;
if (window.createrequest)
{
try{
_xmlhttprequestobj=window.createrequest ();
_xmlhttprequestobj.open (' POST ', submiturl,true);
_xmlhttprequestobj.onreadystatechange=postxmlhttpprocesspostchange;
_xmlhttprequestobj.send ();
}
catch (ee) {}
}
else if (window. XMLHttpRequest)
{
_xmlhttprequestobj=new XMLHttpRequest ();
_xmlhttprequestobj.overridemimetype (' Text/xml ');
_xmlhttprequestobj.open (' POST ', submiturl,true);
_xmlhttprequestobj.onreadystatechange=postxmlhttpprocesspostchange;
_xmlhttprequestobj.send ("");
}
else if (window. ActiveXObject)
{
_xmlhttprequestobj=new ActiveXObject ("Microsoft.XMLHTTP");
_xmlhttprequestobj.open (' POST ', submiturl,true);
_xmlhttprequestobj.onreadystatechange=postxmlhttpprocesspostchange;
_xmlhttprequestobj.send ();
}
} ;
function Postxmlhttpprocesspostchange ()
{
if (_xmlhttprequestobj.readystate==4)
{
if (_xmlhttprequestobj.status==200) {
SetTimeout (_postxmlhttpprocesspostchangecallback, 2);
}else{
alert (_xmlhttprequestobj.status);
}
}
if (_xmlhttprequestobj.readystate==1)
{
SetTimeout (_loadingfunction, 2);
}
}
3, Action Code
/** */ /**
* Expand First Level directory