ajax +xml 实现部门树型结构显示

250757862 · 发表于 2013-1-29 09:31:04

时间的效果如下：

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='&nbsp;';
            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.firstChild.nodeValue;
                     var deptid = fid.firstChild.nodeValue;
                     mdisplay+="<tr><td>";
                     mdisplay+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                     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)" ><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 实现部门树型结构显示

浏览过的版块

最佳新人