JavaScript + XML树型菜单

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

 

1.数据结构

表名：InfoClass

字段名称   数据类型          说明

SID         int                类别ID

SName    nvarchar(50)  类别名称

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

2.ASP生成XML文件程序

 

< ! --
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
*     作 者：  我本有心
=     QQ:      381584252
*      E - Mail: hztgcl1986@ 163 .com
=      转载请注明出处及作者！
*      版权所有,侵权必究！！！
=
*     http: // www.8848so.com，人物搜索，8848So    
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
-->
< %@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文件结构

 

<!--
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * 
*    作 者：  我本有心
=    QQ:     381584252
*     E-Mail: hztgcl1986@163.com
=     转载请注明出处及作者！
*     版权所有,侵权必究！！！
=
*    http://www.8848so.com，人物搜索，8848So    
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * 
-->
<? 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 >
<!--
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
*     作 者：  我本有心
=     QQ:      381584252
*      E - Mail: hztgcl1986@ 163 .com
=      转载请注明出处及作者！
*      版权所有,侵权必究！！！
=
*     http: // www.8848so.com，人物搜索，8848So    
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
-->
< 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 >