时间的效果如下：
jsp页面代码：
<html>
<head>
<sd:head parseContent="true"/>
<base href="<%=basePath%>"/>
<title>部门管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" language="javascript" src="<%=basePath%>javascript/jiaoyan.js"></script>
<link rel="stylesheet" href="<%=basePath%>manage/css/EditPage.css" type="text/css"></link>
</head>
<script type="text/javascript" language="javascript">
var xmlHttp;
var dep;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("microsoft.xmlhttp");
}
}
//根据单击部门的节点请求数据
function getMembers(depart){
if(depart!="null"){
dep=depart;
createXMLHttp();
xmlHttp.onreadystatechange = showMembers;
var url="<%=basePath%>deptMaster/deptMaster!findTree.action?formInfo.fHIGHERDEPARTMENT="+dep;
xmlHttp.open("post",url);
xmlHttp.send(null);
}
}
function hideMenu(){
if(document.getElementById(dep).parentNode.style.display=='none'){
document.getElementById(dep).parentNode.style.display = 'block';
} else if(document.getElementById(dep).parentNode.style.display = 'block'){
document.getElementById(dep).parentNode.style.display = 'none';
}
document.getElementById(dep).innerHTML=' ';
return null;
}
//将返回的数据显示在单击的节点下
function showMembers(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var membersData = xmlHttp.responseXML.getElementsByTagName('name');
var fid=xmlHttp.responseXML.getElementsByTagName('fid');
var mdisplay = '';
for(var i=0;i<membersData.length;i++){
//这里的js调整了很长时间，xml不太熟。firstChild，parentNode，parentElement 等等的用法，有些在IE和//FireFox面还不一样。树结构的样式也是，在FireFox上和IE上还是有差别
var deptname=membersData[i].firstChild.nodeValue;
var deptid = fid[i].firstChild.nodeValue;
mdisplay+="<tr><td>";
mdisplay+=" ";
mdisplay+="<a href='javascript:void(0)' onClick=getMembers('"+deptid+"')>";
mdisplay+="<IMG width='17' height='16' src='Resources/plus.gif' border=0>";
mdisplay+="</a><a href=deptMaster/deptMaster/deptMaster\!ToEdit.action?formInfo.FID="+deptid+">";
mdisplay+=deptname;
mdisplay+="</a><br/>";
mdisplay+="</td></tr>";
mdisplay+="<tr style='display:none'><td height='20' id="+deptid+"></td></tr>";
}
if(mdisplay.length>0){
if(document.getElementById(dep).parentNode.nodeName=="TD"){
document.getElementById(dep).parentElement.parentElement.style.display = 'block';
}
document.getElementById(dep).parentNode.style.display = 'block';
document.getElementById(dep).innerHTML = mdisplay;
}
}
}
}
</script>
<html>
<body>
<table>
<TR>
<td>
<a href="javascript:void(0)" onClick="getMembers('1')"><IMG width="17" height="16" src="Resources/plus.gif" border=0></a>总公司
</td>
</TR>
<tr style="display:none">
<td height="20" id="1"></td>
</tr>
</table>
</body>
</html>
java代码：
/**
* 返回部门的树形结构图
* @return
* @throws Exception
*/
public void findTree() throws Exception{
DepartmentMasterInfo deptInfo=new DepartmentMasterInfo();
deptInfo.setFHIGHERDEPARTMENT(formInfo.getFHIGHERDEPARTMENT());
infoList=this.getManager().findAll(deptInfo);
StringBuffer academys = new StringBuffer("<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"no\" ?>\n");
response=getResponse();
response.setContentType("text/xml");
response.setCharacterEncoding("utf-8"); //这里也是要加上的，不然中文就是乱码了
academys.append("<depts>");
for(DepartmentMasterInfo departmentMaster:infoList){
academys.append("<dept>");
academys.append("<name>" +departmentMaster.getFNAME()+ "</name>\n");
academys.append("<fid>" +departmentMaster.getFID()+ "</fid>\n");
academys.append("</dept>");
}
academys.append("</depts>");
response.getWriter().write(academys.toString());
}
样式还要优化，今天一天基本在研究这些。时间过的很快，转眼又到了下班的时间。
最近输入汉字老是出现错误字，大概是因为用拼音输入法的原因吧，发音太差了。
今天天气很好，但是还是有些小冷。。
嗯，一天又过去了。加油~
分享到：
相关推荐
这个“AJAX+XML实现的树型菜单”示例是AJAX技术的一个经典应用，主要用于提升用户体验，通过异步加载数据来构建交互式的树状导航结构。 首先，我们要理解AJAX的基本工作原理。它通过JavaScript创建XMLHttpRequest...
Ajax（Asynchronous JavaScript and XML）与ASP（Active Server Pages）结合可以实现动态加载和交互，提高用户体验。以下是一个基于Ajax和ASP实现无限级分类树的代码示例。 首先，我们需要创建一个类（Cls_Leibie）...
综上所述，"js＋Ajax实现的树型菜单"项目结合了JavaScript的DOM操作、事件处理和Ajax的数据通信，以构建一个高效、互动的树型菜单。无论是动态加载还是一次性加载所有数据，都提供了良好的用户体验。在实际应用中，...
【JSP+Ajax 无刷新树型菜单数据库版】是一个技术实现方案，它结合了Java Server Pages（JSP）和Asynchronous JavaScript and XML（Ajax）技术，用于创建一个动态、无需页面整体刷新的树型菜单。这个解决方案的核心是...
本项目是基于JSP技术实现的无刷新树型菜单，利用Ajax技术进行后台数据的动态加载，提供了一种高效、用户友好的界面交互体验。以下将详细阐述其中涉及的技术点及其重要性。 首先，**JSP（JavaServer Pages）** 是一...
本文提出了一种新型的动态树型结构的实现方案，该方案利用了Yahoo用户界面库和Ajax（异步JavaScript和XML）技术。这种方法能够构建出结构清晰、具有良好扩展性的多层次框架。文章还介绍了如何将数据存储在数据库中并...
例如，通过DOM操作（Document Object Model）添加、删除或修改元素，以及使用AJAX（Asynchronous JavaScript and XML）异步从服务器获取数据，实现实时更新。 其次，JavaServer Pages（jsp）是一种用于开发动态Web...
基于AJAX技术的动态树型结构的设计与实现 本文主要介绍了基于AJAX技术的动态树型结构的设计与实现，文章首先对AJAX技术的概念、特点和原理进行了介绍，然后提出了使用AJAX技术实现科研管理系统中动态树型结构的设计...
"ext+Struts2+Spring+Hibernate 树型菜单"是一个典型的Java Web开发框架组合，用于创建具有树状结构的用户界面，通常用于数据的层级展示，比如部门结构、文件目录等。下面将详细解释这些技术和如何协同工作。 **...
### 基于Ajax技术的树型结构目录的实现 #### 摘要与背景介绍 随着互联网技术的快速发展，树型结构作为一种重要的数据组织形式，其应用范围日益扩大。从传统的文件系统到复杂的数据库索引，乃至现代的网页导航栏...
在JavaScript中，读取XML文件并将其转换为树形结构是一项常见的任务，特别是在处理服务器返回的数据或者构建动态网页时。本教程将详细讲解如何通过JavaScript实现这一功能。 首先，我们需要理解XML（Extensible ...
【XSLT与AJAX实现的树型导航】 在网页设计和开发中，树型导航是一种常见的用户界面元素，它能有效地展示层级关系，帮助用户快速理解和浏览网站结构。本项目利用XSLT（可扩展样式表语言转换）和AJAX（异步JavaScript...
内容索引:ASP源码,Ajax相关,Treeview,树形菜单 Ajax +XML 无刷新树状型菜单，用ASP结合ajax技术读取存储在XML里的菜单项，然后由AJAX控制ASP进行无刷新输出，而且它支持无限级菜单分类，演示如www.okbase.net截图所...
6. **AJAX**：为了实现异步更新，通常会使用AJAX（Asynchronous JavaScript and XML）技术。通过发送XMLHttpRequest对象，可以在不刷新整个页面的情况下与服务器交换数据并更新部分页面内容。 7. **JSON**：数据在...
【基于Ajax的无限树型菜单实现】 在网页交互设计中，树型菜单是一种常见的导航结构，它能够清晰地展示层次关系，便于用户浏览和操作。然而，一次性加载所有菜单项可能会造成页面加载速度慢，特别是在数据量较大的...
本文将深入探讨如何利用Ajax实现一个无限树型菜单，以及相关的核心知识点。 一、Ajax基础 Ajax的核心是通过JavaScript与服务器进行异步通信，它主要包括以下组件： 1. XMLHttpRequest对象：负责与服务器建立HTTP...
在本主题“树型菜单AJAX实现”中，我们将探讨如何利用AJAX来动态加载和操作树型菜单。 1. **AJAX基础** AJAX的核心是JavaScript的XMLHttpRequest对象，它允许在后台与服务器交换数据并更新部分网页，而无需重新...