菜单生成的效果 :
参考源码:(VB.NET)
数据库结构(测试用ACCESS数据库)
表:System_Menu
序号
|
字段名
|
类型
|
长度
|
精度
|
小数位数
|
默认值
|
允许空
|
主键
|
说明
|
1
|
ID
|
Long
|
4
|
|
|
|
√
|
√
|
菜单ID
|
2
|
NAME
|
Text
|
100
|
|
|
|
|
|
菜单名
|
3
|
IMAGE
|
Text
|
100
|
|
|
|
√
|
|
菜单图片
|
4
|
Url
|
Text
|
50
|
|
|
|
√
|
|
菜单链接
|
5
|
PID
|
Long
|
4
|
|
自动
|
0
|
|
|
上级菜单ID
|
6
|
Sub
|
Boolean
|
1
|
|
|
|
√
|
|
是否有下级菜单
|
7
|
Level
|
Long
|
4
|
|
自动
|
0
|
|
|
菜单所在层(根=0)
|
<head id="Head1" runat="server">
<title>OA菜单</title>
<script language="javascript">
//单击打开或关闭子菜单
function showMenu(iNo){
if(document.getElementById(iNo).style.display=="none")
document.getElementById(iNo).style.display="block"
else
document.getElementById(iNo).style.display="none"
}
</script>
</head>
<body bgcolor="ButtonFace">
</html>
left.aspx.vb文件
命名空间加入:
Imports System.Data
Imports System.Data.OleDb
Page_Load一事件加入如下代码:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim myConnection2 As New OleDbConnection
Dim myCommand2 As New OleDbCommand
Dim dbname2 As String
Dim abc2 As OleDbDataReader
dbname2 = Server.MapPath("../App_Data/OA.mdb")
myConnection2 = New OleDbConnection("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=" & dbname2)
myConnection2.Open()
myCommand2.CommandText = "select * from System_Menu where PID=0 order by ID"
myCommand2.Connection = myConnection2
abc2 = myCommand2.ExecuteReader()
Response.Write(Chr(13) & Chr(13))
Response.Write("<!--OA菜单开始-->" & Chr(13) & Chr(13))
' Response.Write("<div class='menu'>" & Chr(13))
Do While abc2.Read()
Response.Write("<ul>" & Chr(13))
Response.Write("<li class='m_main'>")
Response.Write("<a href='javascript:showMenu(" & abc2.Item("ID") & ");'>")
Response.Write(abc2.Item("Name") & "</a></li>" & Chr(13))
Response.Write("<ul id='" & abc2.Item("ID") & "' style='display:none;'>" & Chr(13))
TreeMenu(abc2.Item("ID"), abc2.Item("Name")) '取根菜单的所有子菜单项
Response.Write("</ul>" & Chr(13) & Chr(13))
Loop
abc2.Close()
myCommand2.Connection.Close()
myConnection2.Close()
Response.Write("<!--OA菜单结束!-->" & Chr(13) & Chr(13) & Chr(13))
End Sub
加入递归的程序
Sub TreeMenu(ByVal ID2, ByVal Name2)
'ID2--根菜单项ID
'Name2--根菜单项名称
Dim myConnection As New OleDbConnection
Dim myCommand As New OleDbCommand
Dim dbname As String
Dim abc As OleDbDataReader
dbname = Server.MapPath("../App_Data/OA.mdb")
myConnection = New OleDbConnection("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=" & dbname)
myConnection.Open()
myCommand.CommandText = "select * FROM System_Menu where PID=" & ID2 & " order by ID"
myCommand.Connection = myConnection
abc = myCommand.ExecuteReader()
Do While abc.Read()
If abc.Item("Sub") Then '如果有下级菜单,则递归调用显示下级菜单
Response.Write("<li class='m_sub_y" & abc.Item("Level") & "'>")
Response.Write("<a href='javascript:showMenu(" & abc.Item("ID") & ");' title='展开/收缩'>")
Response.Write(abc.Item("Name") & "</a></li>" & Chr(13))
Response.Write("<ul id='" & abc.Item("ID") & "' style='display:none';>" & Chr(13))
TreeMenu(abc.Item("ID"), abc.Item("Name"))
' Response.Write(abc.Item("Name") & "<br/><a href='http://www.google.com'>okok</>")
Else ''否则,直接画出叶级部门
Response.Write("<li class='m_sub_n" & abc.Item("Level") & "'>")
Response.Write("<a href='" & abc.Item("Url") & "' target='main' title='" & abc.Item("Url") & "'>")
Response.Write(abc.Item("Name") & "</a></li>" & Chr(13))
End If
Loop
abc.Close()
myCommand.Connection.Close()
myConnection.Close()
Response.Write("</ul>" & Chr(13))
end sub
theme1用到的CSS代码参考:
A:visited {COLOR: #000000; TEXT-DECORATION: none}
A:active {COLOR: #3333ff; TEXT-DECORATION: none}
A:hover {
COLOR: #ff0000;
TEXT-DECORATION: none;
background-color: #000066;
}
list-style: none;
margin: 0;
padding: 0;
}
border:0px;
width:16px;
height:16px;
}
height:100%;
background-color: #D4D0C8;
width: 139px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin: 2px;
}
height: 35px;
width: 139px;
display: block;
text-align: center;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
vertical-align: middle;
}
.m_main a:link, .m_main a:visited{
text-decoration: none;
font-size: 12px;
width: 139px;
color: #FFFFFF;
background-image: url(m_main1.gif);
height: 35px;
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
line-height: 35px;
vertical-align: middle;
padding-left: 0px;
}
text-decoration: none;
font-size: 12px;
width: 139px;
color: #FFFFFF;
background-image: url(m_main1x.gif);
background-repeat: no-repeat;
height: 35px;
background-position: 0px 0px;
line-height: 35px;
vertical-align: middle;
display: block;
padding-left: 0px;
}
/*第一级子菜单CSS*/
.m_sub_n2{
display: block;
width: auto;
border: 1px solid #999999;
}
display: block;
width: auto;
}
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
line-height: 35px;
width: auto;
vertical-align: middle;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
border: 1px solid #999999;
background-color: #D4D0C8;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
background-color: #CC0033;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
border: 1px solid #999999;
}
.m_sub_n2 a:link, .m_sub_n2 a:visited{
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
background-image: url(m_sub_y1.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
width: auto;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-image: url(m_sub_y3.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
}
display: block;
width: auto;
border: 1px solid #999999;
margin-left: 10px;
}
display: block;
width: auto;
margin-left: 10px;
}
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
line-height: 35px;
width: auto;
vertical-align: middle;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
background-color: #D4D0C8;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
background-color: #CC0033;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
border: 1px solid #999999;
}
.m_sub_n3 a:link, .m_sub_n3 a:visited{
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
background-image: url(m_sub_y1.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
width: auto;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-image: url(m_sub_y3.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
}
/*第三级子菜单CSS*/
.m_sub_n4{
display: block;
width: auto;
border: 1px solid #999999;
margin-left: 20px;
}
display: block;
width: auto;
margin-left: 20px;
}
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
line-height: 35px;
width: auto;
vertical-align: middle;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
background-color: #D4D0C8;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
background-color: #CC0033;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
border: 1px solid #999999;
}
.m_sub_n4 a:link, .m_sub_n4 a:visited{
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
background-image: url(m_sub_y1.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
width: auto;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-image: url(m_sub_y3.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
}
/*第四级子菜单CSS*/
.m_sub_n5{
display: block;
width: auto;
border: 1px solid #999999;
margin-left: 30;
}
display: block;
width: auto;
margin-left: 30px;
}
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
line-height: 35px;
width: auto;
vertical-align: middle;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
background-color: #D4D0C8;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
background-color: #CC0033;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
line-height: 35px;
width: auto;
display: block;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
position: relative;
border: 1px solid #999999;
}
.m_sub_n5 a:link, .m_sub_n5 a:visited{
text-decoration: none;
font-size: 12px;
color: #000000;
display: block;
background-image: url(m_sub_y1.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
width: auto;
}
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-image: url(m_sub_y3.png);
background-repeat: repeat-x;
background-position: 0px 0px;
line-height: 35px;
}