JavaScript + XML树型菜单

转帖|其它|编辑:郝浩|2008-09-03 11:30:17.000|阅读 2200 次

概述:JavaScript + XML树型菜单

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

思路:利用ASP读取数据库数据,生成XML文件,然后用JS调入XML数据生成树型菜单

1.数据结构

表名:InfoClass

字段名称  数据类型           说明

SID     int               类别ID

SName      nvarchar(50)    类别名称

ParentID   int               父类ID,根分类父ID为0

2.ASP生成XML文件程序

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Session.CodePage = "65001"
Response.Charset = "utf-8"

Call InfoClass()

Sub BuildXMLStr(pid,str) ''递归类别及其子类别存入字符串

    Dim crs,tempStr
    Set crs=Server.CreateObject("ADODB.Recordset")
    Set crs=cn.Execute("Select SID,SName,ParentID From [InfoClass] Where ParentID="&pid&" Order By ParentID Asc,SID Desc")

    Do While (crs.Eof=False)
   
        tempStr = " id=''" & crs("SID") &"''"
        If (crs("ParentID") = 0) Then
            str = str & "<rootLevel" & tempStr & ">" & vbcrlf
            str = str & "<selfName>" & crs("SName") & "</selfName>" & vbcrlf
        Else
            str = str & "<level" & tempStr & ">" & vbcrlf
            str = str & "<selfName>" & crs("SName") & "</selfName>" & vbcrlf
            str = str & "<parentID>" & crs("parentID") & "</parentID>" & vbcrlf
        End If

        Call BuildXMLStr(crs("SID"),str) ''递归调用
       
        If (crs("ParentID") = 0) Then
            str = str & "</rootLevel>" & vbcrlf
        Else
            str = str & "</level>" & vbcrlf
        End If
       
        crs.MoveNext()
       
    Loop
    
    crs.Close():Set crs=Nothing

End Sub

Sub  SaveXMLFile(str)
    Dim stream
    Set stream = Server.CreateObject("ADODB.Stream")
    stream.Type = 2
    stream.Mode = 3
    stream.Charset = "utf-8"
    stream.Open()
    stream.WriteText(str)
    stream.SaveToFile Server.MapPath("/XML/InfoClass.xml"),2
    stream.Close()
    Set stream = Nothing
End Sub

Sub InfoClass()

    Response.ContentType = "text/xml"
    Dim str
    str = "<?xml version=''1.0'' encoding=''utf-8''?>" & vbcrlf
    str = str & "<menu>" & vbcrlf
    Call BuildXMLStr(0,str)
    str = str & "</menu>"
   
    Call SaveXMLFile(str)
    Response.ContentType = "text/html"
   
End Sub
%>
 
3.XML文件结构

<?xml version=''1.0'' encoding=''utf-8''?>
<menu>
<rootLevel id=''2''>
<selfName>美国</selfName>
</rootLevel>
<rootLevel id=''1''>
<selfName>中国</selfName>
<level id=''4''>
<selfName>河南</selfName>
<parentID>1</parentID>
</level>
<level id=''3''>
<selfName>山东</selfName>
<parentID>1</parentID>
<level id=''6''>
<selfName>菏泽</selfName>
<parentID>3</parentID>
<level id=''8''>
<selfName>曹县</selfName>
<parentID>6</parentID>
</level>
<level id=''7''>
<selfName>东明</selfName>
<parentID>6</parentID>
</level>
</level>
<level id=''5''>
<selfName>济南</selfName>
<parentID>3</parentID>
</level>
</level>
</rootLevel>
</menu>
 
4.JavaScript构建树型菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript + XML树型菜单</title>
<style type="text/css">
li.plus
{
    list-style-type:none;
    list-style-image:url(Images/Plus.png); /*展开时图片,如"+"*/
    cursor:hand;
}

li.minus
{
    list-style-type:none;
    list-style-image:url(Images/Minus.png); /*折叠时图片,如"-"*/
    cursor:hand;
}

li.item
{
    list-style-type:none;
    list-style-image:url(Images/Item.png); /*无子项目时图片*/
    cursor:hand;
}
</style>
</head>

<body>
<ul id="tree">
    <li>树</li>
</ul>
<script language="javascript" type="text/javascript">
treeMenu("tree"); //树

function createXMLDom() //创建XMLDOM对象函数,跨浏览器解决方案
{
    var xmlDom;
   
    if (window.ActiveXObject) //IE
    {
        xmlDom = new ActiveXObject("Microsoft.XMLDOM");
        xmlDom.async = false;
        xmlDom.load("/XML/InfoClass.xml");
        if (xmlDom.parseError.errorCode != 0)
        {
            window.alert("XML文件加载错误. errorCode:" + xmlDom.parseError.errorCode + " reason:" + xmlDom.parseError.reason);
            return false;
        }
        else
        {return xmlDom;}
    }
    else if (document.implementation && document.implementation.createDocument) //FireFox
    {
        xmlDom = document.implementation.createDocument("","",null);
        xmlDom.async = false;
        xmlDom.load("/XML/InfoClass.xml");
        return xmlDom;
    }
    else
    {
        window.alert("不支持XMLDOM对象");
        return false;
    }
}

function treeMenu(ulID)
{
    var xmlDom = createXMLDom(); //创建XMLDOM对象
    var menu = xmlDom.documentElement; //xml文档根节点
    var rootLevels = menu.getElementsByTagName("rootLevel"); //一级分类集合
       
    var ul = document.getElementById(ulID);
    for (var i=0;i<rootLevels.length;i++) //循环显示一级分类
    {
        var selfID = rootLevels[i].getAttribute("id");
        var selfName = rootLevels[i].getElementsByTagName("selfName")[0].firstChild.nodeValue;
        var li = document.createElement("li");
        li.innerHTML = selfName;
        li.id = selfID;
           
        var levels = rootLevels[i].getElementsByTagName("level"); //集合
        if (levels.length > 0) //有子类
        {
            li.className = "plus";
            li.onclick = function () {liClick(this,this.id,xmlDom);} //单击事件
        }
        else //无子类
        {
            li.className = "item";
        }
        ul.appendChild(li);
    }
}

function liClick(li,id,xmlDom,event)
{
    var childUL = li.getElementsByTagName("ul"); //ul集合
   
    if (childUL.length > 0)//折叠
    {closeChild(li,childUL);}
    else //展开
    {openChild(li,id,xmlDom);}
   
    cancelBuble(event); //plus停止事件冒泡
}

function openChild(li,id,xmlDom) //展开函数
{
    li.className = "minus"; //折叠图标
   
    var levels = xmlDom.documentElement.getElementsByTagName("level"); //level集合
    var ul = document.createElement("ul");
    for (var m=0;m<levels.length;m++)
    {
        var selfID = levels[m].getAttribute("id");
        var selfName = levels[m].getElementsByTagName("selfName")[0].firstChild.nodeValue;
        var parentID = levels[m].getElementsByTagName("parentID")[0].firstChild.nodeValue;
       
        if (id == parentID) //属于id子类
        {
            var ulli = document.createElement("li");
            ulli.innerHTML = selfName;
            ulli.id = selfID;
           
            var childLevels = levels[m].getElementsByTagName("level"); //集合
            if (childLevels.length > 0) //有子类
            {
                ulli.className = "plus";
               
                /*停止事件冒泡,跨浏览器解决方案 Start*/
                if (window.ActiveXObject) //IE
                {ulli.onclick = function () {liClick(this,this.id,xmlDom,event);}} //单击事件
                else //FireFox
                {ulli.onclick = function (event) {liClick(this,this.id,xmlDom,event);}} //单击
                /*停止事件冒泡,跨浏览器解决方案 End*/
            }
            else //无子类
            {
                ulli.className = "item";
               
                /*停止事件冒泡,跨浏览器解决方案 Start*/
                if (window.ActiveXObject) //IE
                {ulli.onclick = function () {cancelBuble(event);}} //item停止事件冒泡
                else //FireFox
                {ulli.onclick = function (event) {cancelBuble(event);}} //item停止事件冒泡
                /*停止事件冒泡,跨浏览器解决方案 End*/
            }
           
            ul.appendChild(ulli);
        }
       
    }
   
    li.appendChild(ul);
}

function closeChild(li,childUL) //折叠函数
{
    li.className = "plus"; //展开图标
   
    for (var j=0;j<childUL.length;j++) //循环删除ul,ul可能有子ul、li孙ul、li
    {childUL[j].parentNode.removeChild(childUL[j]);}
}

function cancelBuble(domEvent) //停止事件冒泡函数,跨浏览器解决方案
{
    if (window.ActiveXObject) //IE
    {domEvent.cancelBubble = true;}
    else //FireFox
    {domEvent.stopPropagation();}
}
</script>
</body>
</html>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:DIY部落

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP