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; 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="1024px;">
         <ul>

         <!--第一个Repeater-->
                <asp:DataList ID="rpt1" DataKeyField="b_id" runat="Server" onitemdatabound="rpt1_ItemDataBound"  RepeatDirection="Horizontal">
                   <ItemTemplate>
         	            <li style="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>