ajax +xml 实现部门树型结构显示
时间的效果如下：
?
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());
??? }
?
?
样式还要优化，今天一天基本在研究这些。时间过的很快，转眼又到了下班的时间。
最近输入汉字老是出现错误字，大概是因为用拼音输入法的原因吧，发音太差了。
今天天气很好，但是还是有些小冷。。
?
嗯，一天又过去了。加油~
?
