树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型，还是比较优秀的阿赖树型，都是将数据全部读出，然后再分级显示。这样如果数据量大，那么第一次显示将需要客户等待很长一段时间，降低了客户的体验度。如今使用ajax，事情变得简单了。
此运用参考了《征服web2.0开发技术详解》的例子。
我使用的平台是struts+spring+hibernate，但与ajax打交道的也就是struts。我无法将整个代码贴出来，因此把重要的前台ajax代码贴出来，至于后台的代码就看你自己所使用的技术了。
1、jsp页面
JavaZoo.com © 2006. Code Language:html4strict.
-
<% @ 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_htfl.js">
</script>
-
-
function ShowDetail(ID,NAME,FLAG){
-
window.parent.right.location ="getContract.go?method=doGetContract&folderID=" +ID + "&&folderName="+NAME+"&&flag="+FLAG;
-
}
-
</script>
-
</head>
-
-
-
<table
cellpadding="0"cellspacing="0"width="300">
-
<div
id="load"style="display:none">
<img
src="../images/tree_loading.gif">Loading data..
</div>
-
-
<% List treeList = (List)request.getAttribute("treefolder");
-
Iterator it=treeList.iterator();
-
while(it.hasNext()){
-
out.println(it.next().toString());
-
}
-
%>
-
</table>
-
</tbody>
-
</body>
-
</html>
-
Parsed in 0.270 seconds, using GeSHi 1.0.7.12
2、tree_htfl.js 代码
JavaZoo.com © 2006. Code Language:javascript.
-
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", newFunction("showHide('"+id+"')"));
-
var aTag = el.getElementsByTagName("A");
-
aTag[0].setAttribute("onclick", newFunction("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);
-
}
-
}
-
Parsed in 0.192 seconds, using GeSHi 1.0.7.12
3、action代码
JavaZoo.com © 2006. Code Language:java.
-
/**
-
* 展开第一层目录
-
*/
-
public ActionForward doGetFolderList(
-
ActionMapping mapping,
-
ActionForm form,
-
HttpServletRequest req,
-
HttpServletResponse res){
-
List
list = treeCatalogService.
getChildren("0");
-
-
-
while
(it.hasNext()){
-
TbJyhtflb htfl=(TbJyhtflb)it.next();
-
String
s=treeCatalogService.
renderTreeViewAjax(htfl
);
-
TreeFolder.add(s);
-
}
-
req.setAttribute("treefolder",TreeFolder);
-
return mapping.findForward("foldertree");
-
}
-
-
/** */
/**
-
* 展开下级目录
-
*/
-
public ActionForward doGetSubFolderList(
-
ActionMapping mapping,
-
ActionForm form,
-
HttpServletRequest req,
-
HttpServletResponse res){
-
String
parentID = req.
getParameter("parentID");
//获得id的值
-
if
(parentID!=null&&!parentID.equals("")){//如果不为null和空
-
res.setContentType("text/html;charset=GB2312");
-
List
list = treeCatalogService.
getChildren(parentID
);
-
-
try
{
-
-
while
(it.hasNext()){
-
TbJyhtflb htfl=(TbJyhtflb)it.next();
-
out.println(treeCatalogService.renderTreeViewAjax(htfl));
-
}
-
out.close();
-
-
e.printStackTrace();
-
}
-
}
-
return
null;
-
}
-
Parsed in 0.462 seconds, using GeSHi 1.0.7.12
4、service层代码
JavaZoo.com © 2006. Code Language:java.
-
/**
-
* 函数说明：展开目录
-
* 参数说明： 目录对象
-
* 返回值：展开目录的HTML代码
-
*/
-
public
String
renderTreeViewAjax
(TbJyhtflb htfl
){
-
-
String
ID=htfl.
getTbJyhtflbZlId();
-
String
NAME=htfl.
getTbJyhtflbMc();
-
String
FLAG=htfl.
getTbJyhtflbLb();
-
content.append("<li id='"+ID+"'>");
-
if
(treeCatalogDAO.canExpand(ID))
-
content.append("<img src=../images/tree_plus.gif onClick=\"getSubTree('"+ID+"')\">");
-
else
-
content.append("<img src=../images/tree_blank.gif>");
-
content.append("<img src=../images/tree_folder.gif><a href=\"javascript:ShowDetail('"+ID+"','"+NAME+"','"+FLAG+"')\"");
-
if
(treeCatalogDAO.canExpand(ID)){
-
String
submitURL=
"getFolderList.go?method=doGetSubFolderList&parentID="+ID;
-
content.append(" onClick=\"getSubTree('"+ID+"',submitURL)\"");
-
}
-
content.append(">"+NAME+"</a>");
-
-
content.append("</li>");
-
return content.toString();
-
}
-
Parsed in 0.326 seconds, using GeSHi 1.0.7.12
5、tree.css代码：
JavaZoo.com © 2006. Code Language:css.
-
p{
-
font-family:arial;
-
-
}
-
a{
-
color:#000;
-
font-family:arial;
-
font-size:0.8em;
-
}
-
-
.tree{
-
margin:0px;
-
padding:0px;
-
}
-
.tree ul{/**//*子结点*/
-
margin-left:20px; /**//* Left spacing */
-
padding-left:0px;
-
}
-
.tree li{/**//* 结点 */
-
list-style-type:none;
-
vertical-align:middle;
-
-
}
-
.tree li a{/**//* 结点连接 */
-
color:#000;
-
text-decoration:none;
-
font-family:arial;
-
font-size:0.8em;
-
padding-left:2px;
-
}
-
Parsed in 0.043 seconds, using GeSHi 1.0.7.12
posted on 2006-10-03 21:08
马尔代夫 阅读(109)
评论(0) 编辑 收藏 所属分类:
AJAX