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 >
</ head >
< body >
< table >
< tr >
< td >
< select id = " linkage "  class = " open " >
     < option selected = " selected " > 请选择 </ option >
</ select >
< input type = " hidden "  id = " lastLinkageSelectName "  name = " lastLinkageSelectName "  value = " T "   /><!-- 用于保存最后一级select name属性,以便服务器端接收 -->

</ td >

< td > 1 </ td >
</ tr >

</ table >
<!--
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
*     作 者：  我本有心
=     QQ:      381584252
*      E - Mail: hztgcl1986@ 163 .com
=      转载请注明出处及作者！
*      版权所有,侵权必究！！！
=
*     http: // www.8848so.com，人物搜索，8848So    
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
-->
< script language = " javascript "  type = " text/javascript "  defer = " defer " >
linkageMenu( " linkage " , 8 )  // 第一个参数：select对象ID，第二个参数：欲选中的项目ID,如果不需要选中,则传-1

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  linkageMenu(rootSelectID,selectedID)
{
     var  xmlDom  =  createXMLDom();  // 创建XMLDOM对象
     var  menu  =  xmlDom.documentElement;  // xml文档根节点
     var  rootLevels  =  menu.getElementsByTagName( " rootLevel " );  // 一级分类集合
        
     var  rootSelect  =  document.getElementById(rootSelectID);
    rootSelect.onchange  =   function  () {selectChange(rootSelectID, this ,xmlDom);};
    
     var  selectedTF  =   false ;  // 是否找到欲选中项目，{预先选中时代码}
     for  ( var  i = 0 ;i < rootLevels.length;i ++ )  // 循环创建一级分类
    {
         var  selfID  =  rootLevels[i].getAttribute( " id " );
         var  selfName  =  rootLevels[i].getElementsByTagName( " selfName " )[ 0 ].firstChild.nodeValue;
        
         var  option  =  document.createElement( " option " );
        option.text  =  selfName;
        option.value  =  selfID;
        
         if  (selfID  ==  selectedID)  // 选择，{预先选中时代码}
        {
            option.selected  =   true ;
            selectedTF  =   true ;
        } 
        
        rootSelect.options.add(option);
    }
    
     if  (selectedID  !=   - 1   &&  selectedTF  ==   false )  // 寻找欲选中项目，{预先选中时代码}
    {forSearchParent(rootSelectID,selectedID,xmlDom)}    
}

function  selectChange(rootSelectID,previousSelect,xmlDom)
{
     var  nextSelectID  =  linkageID(rootSelectID,previousSelect.id);  // 下一个select对象ID
     var  nextSelect  =  document.getElementById(nextSelectID);
    
     // 用于保存最后一级select name属性(name与id相同),以便服务器端接收 Start
     var  lastLinkageSelect  =  document.getElementById( " lastLinkageSelectName " );
     if  (lastLinkageSelect  &&  nextSelect)  // 假设nextSelectID = linkage3,则赋值linkage2
    {lastLinkageSelect.value  =  previousSelect.id;}  // 保存最后一个select对象name
     else   if  (lastLinkageSelect)  // 假设nextSelectID = linkage3,则赋值linkage3
    {lastLinkageSelect.value  =  nextSelectID;}
     // 用于保存最后一级select name属性(name与id相同),以便服务器端接收 End    
    
     if  (nextSelect) {closeChild(nextSelectID,rootSelectID); }  // 如果存在子类，则删除
    openChild(rootSelectID,previousSelect,xmlDom);  // 创建新子类
}

function  openChild(rootSelectID,previousSelect,xmlDom)  // 展开函数
{
     var  previousValue  =  previousSelect.options[previousSelect.selectedIndex].value;
     var  levels  =  xmlDom.documentElement.getElementsByTagName( " level " );  // level集合
    
     var  nextSelect  =  document.createElement( " select " );
    nextSelect.className  =   " open " ;
    nextSelect.id  =  linkageID(rootSelectID,previousSelect.id);  // 返回新select对象ID
    nextSelect.onchange  =   function  () {selectChange(rootSelectID, this ,xmlDom);};
    
     var  option  =  document.createElement( " option " );  // 新建一option对象，处于选中状态，作为默认
    option.value  =   "" ;
    option.text  =   " 请选择 " ;
    option.selected  =   true ;
    nextSelect.options.add(option);

     for  ( var  m = 0 ;m < levels.length;m ++ )  // 循环创建父ID为value的option对象
    {
         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  (previousValue  ==  parentID)
        {
            option  =  document.createElement( " option " );
            option.value  =  selfID;
            option.text  =  selfName;
            nextSelect.options.add(option);
        }
    }
        
    nextSelect.options.length  >   1 ? previousSelect.parentNode.appendChild(nextSelect):nextSelect  =   null ;
}

function  closeChild(nextSelectID,rootSelectID)  // 折叠函数
{
     var  selects  =  document.getElementsByTagName( " select " );  // select集合
     // 序号,如:linkage1中的1
     var  selectNum  =  parseInt(nextSelectID.substr(rootSelectID.length,nextSelectID.length  -  rootSelectID.length)); 
     var  selectArray  =   new  Array();
    
     for  (j = 0 ;j < selects.length;j ++ )  // 如：id=linkage2,则保存linkage2、linkage3......
    {
         var  tempNum  =  selects[j].id.substr(rootSelectID.length,selects[j].id.length  -  rootSelectID.length);
         if  (parseInt(tempNum)  >=  selectNum)
        {selectArray.push(selects[j].id);}
    }
    
     for  ( var  n  in  selectArray)  // 循环删除
    {
         var  tempSelect  =  document.getElementById(selectArray[n]);
        tempSelect.parentNode.removeChild(tempSelect);
    }
}

function  linkageID(rootSelectID,previousSelectID)  // 动态构造select对象ID，命名规则：如selectID="linkage",则依次为linkage1,linkage2...
{
     if  (rootSelectID  ==  previousSelectID)
    { return  rootSelectID  +   1 ;}
     else
    {
         var  nextSelectID  =  previousSelectID;  // 如：linkage1
         // 如："linkage1"长度 - "linkage"长度,得到序号1
        nextSelectID  =  nextSelectID.substr(rootSelectID.length,previousSelectID.length  -  rootSelectID.length); 
        nextSelectID  =  rootSelectID  +  (parseInt(nextSelectID)  +   1 );  // 如："linkage" + 2(序号+1)
         return  nextSelectID;
    }
}


function  forSearchParent(rootSelectID,selectedID,xmlDom)  // {预先选中时代码}
{
     var  levels  =  xmlDom.getElementsByTagName( " level " );  // level集合
     for  ( var  n = 0 ;n < levels.length;n ++ )  // 循环查找欲选中level
    {
         var  selfID  =  levels[n].getAttribute( " id " );
         if  (selfID  ==  selectedID) 
        {
             var  level  =  levels[n];
             break ;
        }
    }
    
     var  parentArray  =   new  Array();
     var  parentLevel  =  level;
     if  (level)  // 欲选中level存在
    {    
         while  ( true )  // 循环将欲选中level对象及其所有父级对象存入数组
        {
             if  (parentLevel.nodeName  ==   " rootLevel " )  // 一级分类
            {
                parentArray.push(parentLevel);
                 break ;
            }
             else
            {
                parentArray.push(parentLevel);
                parentLevel  =  parentLevel.parentNode;
            }
        }
        
    }
    
     /* 以下代码：假设欲选中"东明",其父类依次为："菏泽"、"山东"、"中国",所在select不同 ------------------------ Start */
     var  rootSelect  =  document.getElementById(rootSelectID);
     for  ( var  x = 0 ;x < rootSelect.options.length;x ++ )  // 此循环目的为选中option对象text为"中国"并触发其所在select对象onchange事件
    {
         if  (rootSelect.options[x].value   ==  parentArray[parentArray.length - 1 ].getAttribute( " id " ))
        {
            rootSelect.options[x].selected  =   true ;
            rootSelect.onchange();
             break ;
        }
    }
    
     // 此循环目的为选中option对象text为"山东"、"菏泽"、"东明"并触发其所在select对象onchange事件
     var  previousSelectID  =  rootSelectID;
     for  ( var  y = parentArray.length - 2 ;y >= 0 ;y -- ) 
    {
         var  nextSelectID  =  linkageID(rootSelectID,previousSelectID);
        previousSelectID  =  nextSelectID;
         var  nextSelect  =  document.getElementById(nextSelectID);
         for  ( var  z = 0 ;z < nextSelect.options.length;z ++ )
        {
             if  (nextSelect.options[z].value  ==  parentArray[y].getAttribute( " id " ))
            {
                nextSelect.options[z].selected  =   true ;
                nextSelect.onchange();
                 break ;
            }
        }
    }
     /* 以上代码：假设欲选中"东明",其父类依次为："菏泽"、"山东"、"中国",所在select不同 ------------------------ End */
    
}
</ script >
</ body >
</ html >