作为一个刚入行的IT小鸟,每天学习,是必须的!
光自学肯定是不够的!由于本人IQ比较低,经常一个小问题都会想不明白。
还好有媳妇儿的帮助,才把这个功能给实现了。
现在就在这里总结下,以示敬意。o(∩_∩)o 哈哈
分析:
前台页面,放置两个Repeater,然后在Repeater1 里面放置一个 HiddenField控件,用来获取标题。
然后在Repeater1 的ItemDataBound 事件种根据获取的标题来加载 二级标题。
数据库访问代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.OleDb; using System.Data; /// <summary> /// Summary description for MyDBHelper /// </summary> public class MyDBHelper { public MyDBHelper() { // // TODO: Add constructor logic here // } //连接字符串 public static string strConStr=@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\NoDB.mdb;" +"Persist Security Info=True"; //连接数据库 static OleDbConnection con; public static OleDbConnection Con { get { if(con==null) { con = new OleDbConnection(strConStr); } else if(con.State== ConnectionState.Broken) { con.Close(); con.Open(); } else if( con.State== ConnectionState.Closed) { con.Open(); } return con; } } //执行查询 返回Datatable #region public static DataTable GetBySQL(string sql) { DataTable dt = new DataTable(); OleDbCommand cmd = new OleDbCommand(sql, Con); OleDbDataAdapter da = new OleDbDataAdapter(cmd); da.Fill(dt); return dt; } #endregion //执行删除 增加 修改 #region public static int ExcuteBySQL(string sql) { OleDbCommand cmd = new OleDbCommand(sql, Con); int rs = cmd.ExecuteNonQuery(); return rs; } #endregion }
页面代码:
<!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> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <script src="../Script/jquery-1.3.2.min.js" language="javascript" type="text/javascript"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function () { //$("#divNavigation>dl>dt>dd").css("display","none"); $("#divNavigation>dl>dt>dd").hide(); $.each($("#divNavigation>dl>dt"), function () { $(this).click(function () { $("#divNavigation>dl>dt>dd").not($(this).next()).slideUp(); $(this).next().slideToggle(500); }); }); $("ul li").mousemove(function () { $(this).css("background-color", "#ccc"); }).mouseout(function () { $(this).css("background-color", "#eee"); }) ; /* 鼠标经过 */ $("#divNavigation dl").each(function () { $(this).children("dt").mouseover(function () { $(this).next().css("display", "block"); //$(this).next().animate({ opacity: 'show' }, 700); }).mouseout(function () { $(this).next().css("display", "none"); //$(this).next().animate({ opacity: 'hide' }, 700); }); /* 鼠标移动到dd上 */ $(this).children("dd").mouseover(function () { $(this).css("display", "block"); }).mouseout(function () { $(this).css("display", "none"); }); }); }); </script> <style type="text/css"> dl,dd,dt,ul,li { margin:0; padding:0; height :25px; line-height:25px; font-family:微软雅黑; font-size:12px; } #divNavigation { 240px; text-align:center; } #divNavigation dl dt { border-top:1px solid #ccc; background-color:#ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc; height:40px; line-height:40px; font-size:18px; cursor:pointer } #divNavigation ul li { list-style:none; } #divNavigation li { border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; line-height:25px; background-color:#eee; } </style> </head> <body> <form id="form1" runat="server"> <div> <div style="1024px;height:50px;margin:0 auto; text-align:center; vertical-align:middle"> <asp:Repeater ID="rptNavigation" runat="server" onitemdatabound="rptNavigation_ItemDataBound" > <ItemTemplate> <div id="divNavigation" style="margin-left:1px;margin-top:10px;height:30px; float:left;"> <asp:HiddenField id="hf" runat="server" Value='<%#Eval("n_name") %>'/> <dl> <dt><%#Eval("n_name") %></dt> <dd> <ul style=""> <asp:Repeater ID="rptS" runat="server"> <ItemTemplate> <li><%#Eval("n_name") %></li> </ItemTemplate> </asp:Repeater> </ul> </dd> </dl> </div> </ItemTemplate> </asp:Repeater> </div> <!-- 备份 <div id="divNavigation" style="margin-top:10px;height:30px; float:left;"> <dl> <dt>基本信息管理</dt> <dd> <ul style=""> <li>Jquery</li> <li>WPF</li> <li>Asp.net</li> <li>Winform</li> </ul> </dd> </dl> </div> --> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
CS 代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class web_web : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { BindNavigation(); } //绑定主导航 public void BindNavigation() { string sql = "select * from vip_navigation where n_bid=0"; rptNavigation.DataSource = MyDBHelper.GetBySQL(sql); rptNavigation.DataBind(); } //项绑定事件 protected void rptNavigation_ItemDataBound(object sender, RepeaterItemEventArgs e) { //查找隐藏域 HiddenField hfValue = (HiddenField)e.Item.FindControl("hf"); //得到隐藏域的值 string strName = hfValue.Value; //查找第二个Repeater Repeater repts = (Repeater)e.Item.FindControl("rptS"); //根据查找到的名称,来获取ID string sql1 = "select n_id from vip_navigation where n_name='" + strName + "'"; DataTable dt = MyDBHelper.GetBySQL(sql1); int id = 0; foreach (DataRow dr in dt.Rows) { id = (int)dr["n_id"]; } //根据ID获取二级导航 repts.DataSource = MyDBHelper.GetBySQL("select n_name from vip_navigation where n_bid=" + id); repts.DataBind(); } }
效果: