OA软件无限级树形菜单(读数据库)源程序(VB.NET)

公告

Posted on 2008-01-26 22:59 蓝箭GZ 阅读(1122) 评论(0) 编辑收藏举报

参考源码:(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)

left.aspx文件

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Left.aspx.vb" Inherits="Web_Test" Theme="Theme_1"%>

<!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 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">

</body>
</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("" & 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("" & 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代码参考:

*{margin:0px;padding:0px;}

A:link{color: #000000; TEXT-DECORATION: none;}
A:visited {COLOR: #000000; TEXT-DECORATION: none}
A:active {COLOR: #3333ff; TEXT-DECORATION: none}
A:hover {
COLOR: #ff0000;
TEXT-DECORATION: none;
background-color: #000066;
}

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

img{
   border:0px;
   width:16px;
   height:16px;
}

.menu{
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;
}

.m_main{
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;
}

.m_main a:hover{
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;
}

.m_sub_y2{
display: block;
width: auto;
}

.m_sub_y2 a:link, .m_sub_y2 a:visited{
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;
}

.m_sub_y2 a:hover{
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;
}

.m_sub_y2 a:active{
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;
}

.m_sub_n2 a:hover{
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_n3{
display: block;
width: auto;
border: 1px solid #999999;
margin-left: 10px;
}

.m_sub_y3{
display: block;
width: auto;
margin-left: 10px;
}

.m_sub_y3 a:link, .m_sub_y3 a:visited{
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;
}

.m_sub_y3 a:hover{
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;
}

.m_sub_y3 a:active{
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;
}

.m_sub_n3 a:hover{
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;
}

.m_sub_y4{
display: block;
width: auto;
margin-left: 20px;
}

.m_sub_y4 a:link, .m_sub_y4 a:visited{
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;
}

.m_sub_y4 a:hover{
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;
}

.m_sub_y4 a:active{
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;
}

.m_sub_n4 a:hover{
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;
}

.m_sub_y5{
display: block;
width: auto;
margin-left: 30px;
}

.m_sub_y5 a:link, .m_sub_y5 a:visited{
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;
}

.m_sub_y5 a:hover{
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;
}

.m_sub_y5 a:active{
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;
}

.m_sub_n5 a:hover{
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;
}

/*第n级子菜单CSS*/

菜单级数可通过数据库无限分级,只是要加入相关级的CSS以产生缩进及其它效果!

此菜单系统暂时未考虑根据用户权限而显示相关菜单的功能!

刷新页面返回顶部