思路:利用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
% >
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *
* 作 者: 我本有心
= 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 >
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *
* 作 者: 我本有心
= 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 >
< 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 >