正文
Asp.Net生成无限级菜单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
首先创建SQL脚本
if exists (select * from sysobjects where id = OBJECT_ID('[Menu]') and OBJECTPROPERTY(id, 'IsUserTable') = 1)
DROP TABLE [Menu]
CREATE TABLE [Menu] (
[ID] [bigint] IDENTITY (1, 1) NOT NULL,
[MenuName] [nvarchar] (200) NULL,
[Menu_ICON] [bigint] NOT NULL DEFAULT (0),
[Menu_URL] [varchar] (500) NULL,
[ParentID] [bigint] NOT NULL DEFAULT (0),
[AddTime] [datetime] NOT NULL,
[ICON_URL] [varchar] (500) NULL)
ALTER TABLE [Menu] WITH NOCHECK ADD CONSTRAINT [PK_sys_menu] PRIMARY KEY NONCLUSTERED ( [ID] )
SET IDENTITY_INSERT [Menu] ON
页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="common_menu.aspx.cs" Inherits="AccordMenu.common_menu" %> <!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
body
{
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
h1
{
font: bold 16px Arial, Helvetica, sans-serif;
}
p
{
font: 11px Arial, Helvetica, sans-serif;
}
a
{
color: #900;
text-decoration: none;
}
a:hover
{
background: #900;
color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu, ul#navmenu li, ul#navmenu ul
{
margin: 0;
border: 0 none;
padding: 0;
width: 160px; /*For KHTML*/
list-style: none;
}
ul#navmenu li
{
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a
{
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a
{
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a, ul#navmenu li.iehover li a
{
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a
{
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a
{
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a
{
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a
{
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover
{
background: #CCC;
color: #FFF;
}
ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul
{
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul
{
display: none;
}
ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul
{
display: block;
}
</style>
<script type="text/javascript">
<!--
navHover = function () {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.className += " iehover";
}
lis[i].onmouseout = function () {
this.className = this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover); function gotoURL(szURL) {
if (szURL == "") return;
window.open(szURL, 'Main', '');
} function SelectMenu(object, szURL) {
for (var i = 0; i < document.all.length; i++) {
if (document.all(i).className == "SelectedMenuLevel2")
document.all(i).className = "MenuLevel2"
else if (document.all(i).className == "SelectedMenuLevel1")
document.all(i).className = "MenuLevel1"
}
if (object.className == "MenuLevel2")
object.className = "SelectedMenuLevel2";
else if (object.className == "MenuLevel1")
object.className = "SelectedMenuLevel1";
gotoURL(szURL);
}
function resizeMenu() {
if (Menu.style.display == '') {
Menu.style.display = 'none';
resizeIcon_Show.style.display = 'none';
resizeIcon_Hidden.style.display = '';
top.Bottom.cols = '7,*';
}
else {
Menu.style.display = '';
resizeIcon_Show.style.display = '';
resizeIcon_Hidden.style.display = 'none';
top.Bottom.cols = '180,*';
}
}
-->
</script>
</head>
<body>
<table height="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td id="Menu" style="width: 180">
<!--**-->
<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td valign="middle" align="center" background="../images/Desk/ResizeBg.gif" style="width: 7px">
</td>
<td>
<ul id="navmenu">
<%= _menu %>
</ul>
</td>
</tr>
</table>
</td>
<td valign="middle" align="center" background="../images/Desk/ResizeBg.gif" style="width: 7px">
<span id="resizeIcon_Show" style="cursor: hand" onclick="javascript:resizeMenu()"
title="隐藏菜单">
<img src="../images/Desk/Resize_Hidden.gif" width="7" height="48"></span> <span id="resizeIcon_Hidden"
style="display: none; cursor: hand" onclick="javascript:resizeMenu()" title="显示菜单">
<img src="../images/Desk/Resize_Show.gif" width="7" height="48"></span>
</td>
</tr>
</table>
<script language="javascript" event="oncontextmenu" for="document">
if (!event.ctrlKey) return false;
</script>
</body>
</html>
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Text; namespace AccordMenu
{ public partial class common_menu : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
//try
//{
// string CheckSessionStr = Session["id"].ToString();
//}
//catch
//{
// Response.Write("<script language=javascript>alert('请登录');top.location='../index.aspx'</script>");
//} if (!IsPostBack)
{
ListMenu();
}
} protected string _menu = string.Empty;
public void ListMenu()
{
StringBuilder sb = new StringBuilder();
DataTable _list = new DataTable();
string ConctionStr = "Data Source=127.0.0.1;Initial Catalog=AccordMenu;Integrated Security=False;User ID=sa;Password=sa";
using (SqlConnection conec = new SqlConnection(ConctionStr))
{
conec.Open();
string SqlText = "SELECT * FROM sys_menu";
SqlCommand Comand = new SqlCommand(SqlText, conec);
SqlDataAdapter Adaper = new SqlDataAdapter(Comand);
Adaper.Fill(_list);
Adaper.Dispose();
Comand.Dispose();
conec.Close();
}
DataRow[] rows = _list.Select("ParentID=0");
foreach (DataRow dr in rows)
{
string id = dr["ID"].ToString();
string name = dr["MenuName"].ToString();
sb.AppendFormat("<li ID=\"{2}\"><a href=\"javascript:;\" onclick=\"gotoURL('{0}');\">{1}</a>\r\n", dr["Menu_URL"].ToString(), name, id);//href可以写需要的链接地址
sb.Append(GetSubMenu(id, _list));
sb.Append("</li>\r\n");
}
_menu = sb.ToString(); } /// <summary>
/// 递归调用生成无限级别
/// </summary>
/// <param name="pid"></param>
/// <param name="dt"></param>
/// <returns></returns>
private string GetSubMenu(string pid, DataTable dt)
{
StringBuilder sb = new StringBuilder();
DataRow[] rows = dt.Select("ParentID=" + pid);
sb.Append("<ul>\r\n");
foreach (DataRow dr in rows)
{
string id = dr["ID"].ToString();
string name = dr["MenuName"].ToString();
sb.AppendFormat("<li ID=\"{2}\"><a href=\"javascript:;\" onclick=\"gotoURL('{0}');\">{1}</a>\r\n", dr["Menu_URL"].ToString(), name, id);//href可以写需要的链接地址
sb.Append(GetSubMenu(id, dt)); //递归
sb.Append("</li>\r\n");
}
sb.Append("</ul>\r\n");
return sb.ToString();
} }
}
