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

最新推荐文章于 2023-02-22 16:13:00 发布

iteye_5697

最新推荐文章于 2023-02-22 16:13:00 发布

阅读量100

点赞数

分类专栏： ajax 文章标签： XML 数据结构 Ajax JavaScript IE ViewUI

本文链接：https://blog.csdn.net/iteye_5697/article/details/82034277

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

时间的效果如下：

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>

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());
    }

样式还要优化，今天一天基本在研究这些。时间过的很快，转眼又到了下班的时间。

最近输入汉字老是出现错误字，大概是因为用拼音输入法的原因吧，发音太差了。

今天天气很好，但是还是有些小冷。。

嗯，一天又过去了。加油~

iteye_5697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax +xml 实现部门树型结构显示

时间的效果如下： jsp页面代码： &lt;html&gt; &lt;head&gt; &lt;sd:head parseContent="true"/&gt; &lt;base href="&lt;%=basePath%&gt;"/&gt; &lt;title&gt;部门管理&lt;/title&a
复制链接

扫一扫

专栏目录