The use of Ajax Technology Tree menu (turn)

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.