Tree menus are widely used in projects. In the past, both the Microsoft Control tree and the excellent alicloud tree read all the data and then display it hierarchically. In this way, if the data volume is large, the first display will take a long time for the customer to reduce the customer experience. Now Ajax is easy to use.
For more information about this application, see the example of conquering Web2.0 development technology.
I am using STRUTS + spring + hibernate, but I am dealing with Ajax, that is, struts. I cannot post the entire code, so I can post the important front-end Ajax code. As for the background code, it depends on your own technology.
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 merge Ge = "JavaScript">
Function showdetail (ID, name, flag ){
Window. Parent. Right. Location = "getcontract. Go? Method = dogetcontract & folderid = "+ ID +" & Foldername = "+ name +" & flag = "+ flag;
}
</SCRIPT>
</Head>
<Body bgcolor = "# f6f9ff">
<Tbody>
<Table cellpadding = "0" cellspacing = "0" width = "300">
<Div id = "LOAD" style = "display: none"> 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 ("");
ATAG [0]. setattribute ("onclick", new function ("showhide ('" + ID + "')"));
VaR loaddiv = Document. getelementbyid ("LOAD ");
Loaddiv. style. Display = "NONE ";
}
Function load (ID)