DataList 嵌套 Repeater 实现 二级菜单
实现本文所讲的效果首先要对：Jquery Css 略懂。
因为本人在这方面，也是个小白！只实现了一部分效果，还请大家补充！
内容分析：
首先在页面上放置一个datalist， 然后在datalist里面放置一个Repeater。
在datalist的ItemDataBound事件中给Repeater绑定值。再用Jqury控制导航
的显示与隐藏。
代码在附件效果如图：
主导航：
二级导航，CSS未控制好：
使用注意事项：
引入：Jquery 1.3.2.min.js
所使用的数据库为Access，结构,数据如图：
逻辑处理的方法代码
using System;
using System.Collections.Generic;
using System.Web;
using System.Data.OleDb;//引入oledb
using System.Data;
using System.Collections;
using System.IO;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
/// <summary>
/// 描述：数据访问类，业务处理类
/// 功能：提供数据访问，业务处理的方法
/// 作者：R3
/// 时间：2011-01-04 16:13:59
/// </summary>
public class Bll_Manager
{
HttpResponse Response = null;
public Bll_Manager(HttpResponse response)
{
Response = response;
//
// TODO: Add constructor logic here
//
}
//数据库连接
private static OleDbConnection con;
public static OleDbConnection Con
{
get
{
if (con == null)
{
con = new OleDbConnection
(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\db1.mdb;" +
"Persist Security Info=True");
}
else if (con.State == ConnectionState.Broken)
{
con.Close();
con.Open();
}
else if (con.State == ConnectionState.Closed)
{
con.Open();
}
return con;
}
}
#region GetBySQL 查询-返回datatable
public static DataTable GetBySQL(string sql)
{
OleDbCommand cmd = new OleDbCommand(sql, Con);//执行命令
OleDbDataAdapter da = new OleDbDataAdapter(cmd);//装载结果
DataTable dt = new DataTable();//创建datata
da.Fill(dt);//填充datatable
return dt;//返回结果
}
#endregion
#region ExcuteCmd 执行修改，删除,添加
public static int ExcuteCmd(string sql)
{
OleDbCommand cmd = new OleDbCommand(sql, Con);//执行命令
int rs = cmd.ExecuteNonQuery();//返回执行结果
return rs;
}
#endregion
#region IsNumber 判断是否是数字
public static bool IsNuber(string number)
{
bool isCheck = true;
if (string.IsNullOrEmpty(number))
{
isCheck = false;
}
else
{
char[] charNumber = number.ToCharArray();
for (int i = 0; i < charNumber.Length; i++)
{
if (!char.IsNumber(charNumber[i]))
{
isCheck = false;
break;
}
}
}
return isCheck;
}
#endregion
#region GetIp 获得IP地址
public static string GetIp()
{
if (System.Web.HttpContext.Current.Request.ServerVariables["HTTP_VIA"] != null)
{
return System.Web.HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"].
Split(new char[] { ',' })[0];
}
else
{
return System.Web.HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"];
}
}
#endregion
}
：
后台代码：
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindRptOne();
}
}
///绑定第一个Repeater
public void BindRptOne()
{
//查询主导航
string strBigType = "select * from N_bigtype order by b_id";
//绑定一级Repeater
rpt1.DataSource = Bll_Manager.GetBySQL(strBigType);
rpt1.DataBind();
}
///绑定第二个Repeater
protected void rpt1_ItemDataBound(object sender, DataListItemEventArgs e)
{
//判断是否是listItem项
if(e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
{
//查找第二个Repeater
Repeater rpt2 = e.Item.FindControl("Rpt2") as Repeater;
//循环获取Datalist的DataKeys
int b_id = 0;
for (int i = 0; i < rpt1.Items.Count;i++ )
{
b_id = Convert.ToInt32(rpt1.DataKeys[i + 1].ToString());
}
//sql
string strSmallType = "select * from N_smallType where b_id =" + b_id + " order by s_name";
//source
rpt2.DataSource = Bll_Manager.GetBySQL(strSmallType);
//bind
rpt2.DataBind();
}
}
}
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Title="for_Repeater" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<!--导航样式控制-->
<style type="text/css">
ul{list-style:left;}
li {list-style:none; display:inline; text-align:center;}
dt{ display:block; float:left; padding:20px; background-color:InactiveCaption; }
#menu dt a{ text-decoration:none;}
#menu dt a:hover,#menu dt a:active{Color:Red; background-color:White; float:left}
#menu dt a:visited,#menu dt a:link{Color:black; float:left;}
#menu dd{ float:left; padding-top:80px; cursor:pointer; width:80px;}
</style>
<!--用Jquery控制导航-->
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script src="Scripts/index.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript" >
/**
用Jqueru控制Dd Dt的显示。
*/
$(document).ready(function () {
$('#menu ul li').each(function () {
$(this).children("dd").css("display", "none");
$(this).children("dt").mouseover(function () {
$(this).next().css("display", "block");
}).mouseout(function () {
$(this).next().css("display", "none");
});
$(this).children("dd").mouseover(function () {
$(this).css("display", "block");
}).mouseout(function () {
$(this).css("display", "none");
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" style="width:1024px;">
<ul>
<!--第一个Repeater-->
<asp:DataList ID="rpt1" DataKeyField="b_id" runat="Server" onitemdatabound="rpt1_ItemDataBound" RepeatDirection="Horizontal">
<ItemTemplate>
<li style="width:1024px; ">
<!--一级导航--->
<dt>
<a href="#"><%#Eval("b_name") %></a>
</dt>
<dd>
<!--第二个Repeater-->
<asp:Repeater ID="rpt2" runat="Server">
<ItemTemplate>
<!--二级导航--->
<a href="#"><%#Eval("s_name") %></a>
</ItemTemplate>
</asp:Repeater>
</dd>
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</form>
</body>
</html>