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

菜单生成的效果 :

 参考源码:(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("<!--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代码参考:
*{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以产生缩进及其它效果!
此菜单系统暂时未考虑根据用户权限而显示相关菜单的功能!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值