javascript操作xml產生樹形菜單

來源:互聯網
上載者:User

這個效果應該不算什麼稀奇,網上也有現成的代碼,我這個也沒什麼特別的地方,只是因為我自己寫的,也算是為學習DOM後一個練習;在IE下測試通過;

 

實現效果是這樣的:
讀取XML文檔;
採用遞迴產生無限級的樹形菜單;
能夠響應滑鼠事件,展開與拆疊子級菜單;

首先是產生一個XML文檔,我用的是XML Spy的編輯器;
<?xml version="1.0" encoding="utf-8"?>
       <menu>
         <menu name="明星名人">
           <menu name="華人明星" url="">
             <menu name="大陸新秀" url="">
               <menu name="周筆暢" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
               <menu name="周筆暢" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
               <menu name="周筆暢" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
             </menu>
             <menu name="香港" url="">
               <menu name="成龍" url="http://post.baidu.com/f?kw=%B3%C9%C1%FA" target="_blank"/>
             </menu>
           </menu>
           <menu name="日韓明星" url="Admin_Dep.aspx">
             <menu name="金喜善" url="http://post.baidu.com/f?kw=%BD%F0%CF%B2%C9%C6" target="_blank"/>
             <menu name="金喜善" url="http://post.baidu.com/f?kw=%BD%F0%CF%B2%C9%C6" target="_blank"/>
           </menu>
           <menu name="歐美明星" url="#"/>
         </menu>
         <menu name="娛樂">
           <menu name="快樂男聲" url="#" target="_blank">
             <menu name="陳楚生" url="http://post.baidu.com/f?kw=%B3%C2%B3%FE%C9%FA"     target="_blank"/>
             <menu name="蘇醒" url="http://post.baidu.com/f?kw=%CB%D5%D0%D1"/>
           </menu>
         </menu>
         <menu name="體育">
           <menu name="體育俱樂部" url="#"/>
         </menu>
         <menu name="軍事">
           <menu name="戰鬥機" url="#"/>
         </menu>
       </menu>
儲存檔案名稱為menu.xml

在HTML中,Javascript代碼如下:
//建立XMLdom對象,並載入xml,xmlFilePath為xml的文本路徑
function CreateXMLDoc(xmlFilePath)
{
if(window.ActiveXObject)
{
    //獲得操作的xml檔案的對象
    var msXMLdom = new ActiveXObject('Microsoft.XMLDOM');
    msXMLdom.async = false;
    msXMLdom.load(xmlFilePath);
    return msXMLdom;
}
else
{
    var oXmlHttp = new XMLHttpRequest() ;
    oXmlHttp.open( "GET", xmlFilePath, false ) ;
    oXmlHttp.send(null) ;
    return oXmlHttp.responseXML;

}
}
//建立對象
var xmlDoc;
xmlDoc=CreateXMLDoc("menu.xml");
var rootNode=xmlDoc.lastChild;

 

然後寫一個產生樹的函數:

//返回樹形結構的HTML代碼,參數node為節點名,level為當前節點相對於根節點的深度值
function BuilderTree(nodeName,level)
{
//子功能表項,縮排的像素數
var indent=10;
var temp="";
level=level==null ? 0 : level;
var nodes=nodeName.childNodes;
for(var i=0;i<nodes.length;i++)
{
    //當該節點沒下級節點時
    if(nodes[i].childNodes.length<1)
    {
    //當前菜單的名稱
    temp+="<div style='margin-left:"+level*indent+"px;cursor:hand;''>";
    temp+="<b>-</b> ";
    //是否開啟新視窗
    var target=nodes[i].getAttribute("target")==null ? "" : "target='"+nodes[i].getAttribute("target")+"'";
    temp+="<a href='"+nodes[i].getAttribute("url")+"' "+target+">"+nodes[i].getAttribute("name")+"</a>";
    temp+="</div>";
    continue;
    }
    //當前菜單的名稱
    temp+="<div style='margin-left:"+level*indent+"px;cursor:hand;' onclick='show(this)'>";
    temp+="<b>+</b> <b>"+nodes[i].getAttribute("name")+"</b>";
    temp+="</div>";
    //當前菜單的下級內容
    temp+="<div style='margin-left:"+indent+"px;cursor:hand;display:none'>";
    temp+=BuilderTree(nodes[i],level+1);
    temp+="</div>";
}
return temp;
}

在上面的代碼中,用到了遞迴來實現遍曆XML中的所有資料;

然後,為了實現滑鼠事件,再寫一個方法;

show函數如下:
//操作某個節點的下一節點nextSibling是否顯示;
function show(obj)
{
//當前節點的下一節點
var nextNode=obj.nextSibling;
//當前節點的頭部符號節點,就是功能表項目前面+、-號
var subNode=obj.firstChild.firstChild;
if(nextNode.nodeType==1)
{
            with(eval(nextNode))
            {
             if(style.display=="")
             {
              style.display="none";
              subNode.nodeValue="+";
             }else
             {
              style.display="";
              subNode.nodeValue="-";
             }
            }
}
}
因為每個菜單所屬的子級內容與它自身並不在一個div中,這裡僅傳了this就是自身,為了操作它僅隨後面的一個div,用到了nextSibling方法;並用 var subNode=obj.firstChild.firstChild;找到每個菜單頭部的加減號用於展開或拆疊時顯示;

看完上面這些,最終是要輸出的,在HTML頁面的body中,寫入:
<div id="TreeMenu"></div>

然後head中,寫入
<script type="text/javascript" language="javascript" defer="defer">
//將處理過的XML資料,插入到頁面的相應位置
var d=document.getElementById("TreeMenu");
d.innerHTML=BuilderTree(rootNode);
</script>

這樣就OK了。

代碼中我寫了一些注釋,應該不難看懂,我就不再做過多的解釋了。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。