动态实现树形菜单
树形菜单在开发软件和网站中经常用到，但是会遇到一个问题，在网站中当你点开的时候，由于页面刷新了，又合起来来了，这种问题是用iframe不会出现，但是在网站中很少会用到框架，最近就碰到了这样的问题，在网上找了很多js写的树形菜单，我需要分四级，但是都没找到合适的，乱七八糟的代码都有，很头疼，没办法，自己就想办法写了一个，这个是在知道分几级的情况下，关于无限极没研究，可以再基础上在下点功夫也可以！
原理大概是这样的：
第一步：需要把一级到四级样式写好，位置固定好
第二步：动态循环生成菜单，一级正常动态循环出来，二级到四级根据参数传递过来的id与上一级别的id判断是否相等来判断
是否循环出来
看看代码吧
树形菜单是个公用的部分，我们一般会放到用户控件里，代码如下：
View Code
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="protype.ascx.cs" Inherits="Cms.Web.control.protype" %>
<div class="zy_con_l">
<div class="zy_con_ltt">品牌展示</div>
<div class="zy_ppzslb">
<ul>
<%
Cms.BLL.Channel bll = new Cms.BLL.Channel();
System.Data.DataSet dt = bll.GetList(" KindId=1 and ParentId=0");
if (dt.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row in dt.Tables[0].Rows)
{
string title = row["title"].ToString();
int id = Convert.ToInt32(row["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>'><%=title%></a>
<ul>
<%
if (Request.QueryString["classId"] != null && Request.QueryString["classid"].ToString() == id.ToString())
{
System.Data.DataSet dt2 = bll.GetList(" KindId=1 and ParentId=" + id);
if (dt2.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row2 in dt2.Tables[0].Rows)
{
string title2 = row2["title"].ToString();
int id2 = Convert.ToInt32(row2["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>&classId2=<%=id2 %>'><%=title2%></a>
<ul>
<%
if (Request.QueryString["classId2"] != null && Request.QueryString["classId2"].ToString() == id2.ToString())
{
System.Data.DataSet dt3 = bll.GetList(" KindId=1 and ParentId=" + id2);
if (dt3.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row3 in dt3.Tables[0].Rows)
{
string title3 = row3["title"].ToString();
int id3 = Convert.ToInt32(row3["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>&classId2=<%=id2 %>&classId3=<%=id3 %>'><%=title3%></a>
<ul>
<%
if (Request.QueryString["classId3"] != null && Request.QueryString["classId3"].ToString() == id3.ToString())
{
System.Data.DataSet dt4 = bll.GetList(" KindId=1 and ParentId=" + id3);
if (dt4.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row4 in dt4.Tables[0].Rows)
{
string title4 = row4["title"].ToString();
int id4 = Convert.ToInt32(row4["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>&classId2=<%=id2 %>&classId3=<%=id3 %>&classId4=<%=id4 %>'><%=title4%></a></li>
<%}
}
} %>
</ul>
</li>
<%}
}
} %>
</ul>
</li>
<%}
}
} %>
</ul>
</li>
<%
}
}%>
</ul>
</div>
</div>
<div class="zy_con_l">
<div class="zy_con_ltt">品牌展示</div>
<div class="zy_ppzslb">
<ul>
<%
Cms.BLL.Channel bll = new Cms.BLL.Channel();
System.Data.DataSet dt = bll.GetList(" KindId=1 and ParentId=0");
if (dt.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row in dt.Tables[0].Rows)
{
string title = row["title"].ToString();
int id = Convert.ToInt32(row["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>'><%=title%></a>
<ul>
<%
if (Request.QueryString["classId"] != null && Request.QueryString["classid"].ToString() == id.ToString())
{
System.Data.DataSet dt2 = bll.GetList(" KindId=1 and ParentId=" + id);
if (dt2.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row2 in dt2.Tables[0].Rows)
{
string title2 = row2["title"].ToString();
int id2 = Convert.ToInt32(row2["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>&classId2=<%=id2 %>'><%=title2%></a>
<ul>
<%
if (Request.QueryString["classId2"] != null && Request.QueryString["classId2"].ToString() == id2.ToString())
{
System.Data.DataSet dt3 = bll.GetList(" KindId=1 and ParentId=" + id2);
if (dt3.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row3 in dt3.Tables[0].Rows)
{
string title3 = row3["title"].ToString();
int id3 = Convert.ToInt32(row3["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>&classId2=<%=id2 %>&classId3=<%=id3 %>'><%=title3%></a>
<ul>
<%
if (Request.QueryString["classId3"] != null && Request.QueryString["classId3"].ToString() == id3.ToString())
{
System.Data.DataSet dt4 = bll.GetList(" KindId=1 and ParentId=" + id3);
if (dt4.Tables[0].Rows.Count != 0)
{
foreach (System.Data.DataRow row4 in dt4.Tables[0].Rows)
{
string title4 = row4["title"].ToString();
int id4 = Convert.ToInt32(row4["Id"].ToString());
%>
<li><a href='ProductList.aspx?classId=<%=id %>&classId2=<%=id2 %>&classId3=<%=id3 %>&classId4=<%=id4 %>'><%=title4%></a></li>
<%}
}
} %>
</ul>
</li>
<%}
}
} %>
</ul>
</li>
<%}
}
} %>
</ul>
</li>
<%
}
}%>
</ul>
</div>
</div>
引用的页面里
View Code
<head runat="server">
<title>佳音琴行</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<link href="images/zy_home.css" rel="stylesheet" type="text/css" />
<style>
*{ margin:0; padding:0;}
li{ list-style:none; line-height:28px;}
a{text-decoration:none;color:#343434;border:none;}
a:hover{text-decoration:none; color:#F00;}
.zy_ppzslb{width:208px; background:url(images/zy_ppzs_lbbg.gif) repeat-y; font:"宋体"; font-size:12px; float:left; padding-top:8px;}
.zy_ppzslb ul{ padding-left:15px; overflow:hidden;}
.zy_ppzslb ul li{ background:url(images/yi.gif) no-repeat 0 7px; text-indent:15px;}
.zy_ppzslb ul li ul li{ background:url(images/xtb2.gif) no-repeat 0 9px; text-indent:12px;}
.zy_ppzslb ul li ul li ul li{ background:url(images/sj.gif) no-repeat 0 9px; text-indent:12px;}
.zy_ppzslb ul li ul li ul li ul li{ background:url(images/xtb3.gif) no-repeat 0 10px; text-indent:8px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table width="990" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" style="margin:0 auto;">
<tr>
<td align="left" valign="top">
<uc1:protype ID="protype1" runat="server" />
</td>
<td align="left" valign="top">
<div class="zy_con_r">
<div class="zy_con_rtt"><p>品牌展示</p><span>您当前位置：首页>品牌展示</span></div>
<ul class="zy_ppzs_bot">
<asp:Repeater ID="rptList" runat="server">
<ItemTemplate>
<li><a href='<%=GetUrl() %>id=<%#Eval("Id")%>' class="zy_ppzs_bot_pic"><img src='<%#Eval("ImgUrl") %>' alt='<%#Eval("Title")%>'/></a><p class="zy_ppzs_bot_lbwz"><a href='ProductView.aspx?id=<%#Eval("Id")%>'>品牌：<%#Eval("Title")%><br>型号：<%#Eval("ModelType") %></a></p></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<div class="spClear">
<asp:Label ID="lbmsg" runat="server"></asp:Label>
</div>
<div class="fenye">
<webdiyer:aspnetpager ID="AspNetPager1" runat="server" CssClass="formfield"
CustomInfoClass="formbutton"
CustomInfoHTML="第<font color='red'><b>%CurrentPageIndex%</b></font>页 共%PageCount% 页 %StartRecordIndex%-%EndRecordIndex%"
CustomInfoTextAlign="Center" FirstPageText="首页" horizontalalign="Center"
InputBoxStyle="width:19px" LastPageText="尾页" meta:resourceKey="AspNetPager1"
NextPageText="下一页" PageSize="15"
PrevPageText="前一页" showcustominfosection="Left" ShowInputBox="Always"
ShowNavigationToolTip="True" style="FONT-SIZE: 12px"
SubmitButtonClass="formfield" SubmitButtonText="GO" width="506px"
onpagechanging="AspNetPager1_PageChanging" PageIndexBoxType="TextBox"
ShowPageIndexBox="Never" AlwaysShow="True">
</webdiyer:aspnetpager></div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<title>佳音琴行</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<link href="images/zy_home.css" rel="stylesheet" type="text/css" />
<style>
*{ margin:0; padding:0;}
li{ list-style:none; line-height:28px;}
a{text-decoration:none;color:#343434;border:none;}
a:hover{text-decoration:none; color:#F00;}
.zy_ppzslb{width:208px; background:url(images/zy_ppzs_lbbg.gif) repeat-y; font:"宋体"; font-size:12px; float:left; padding-top:8px;}
.zy_ppzslb ul{ padding-left:15px; overflow:hidden;}
.zy_ppzslb ul li{ background:url(images/yi.gif) no-repeat 0 7px; text-indent:15px;}
.zy_ppzslb ul li ul li{ background:url(images/xtb2.gif) no-repeat 0 9px; text-indent:12px;}
.zy_ppzslb ul li ul li ul li{ background:url(images/sj.gif) no-repeat 0 9px; text-indent:12px;}
.zy_ppzslb ul li ul li ul li ul li{ background:url(images/xtb3.gif) no-repeat 0 10px; text-indent:8px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table width="990" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" style="margin:0 auto;">
<tr>
<td align="left" valign="top">
<uc1:protype ID="protype1" runat="server" />
</td>
<td align="left" valign="top">
<div class="zy_con_r">
<div class="zy_con_rtt"><p>品牌展示</p><span>您当前位置：首页>品牌展示</span></div>
<ul class="zy_ppzs_bot">
<asp:Repeater ID="rptList" runat="server">
<ItemTemplate>
<li><a href='<%=GetUrl() %>id=<%#Eval("Id")%>' class="zy_ppzs_bot_pic"><img src='<%#Eval("ImgUrl") %>' alt='<%#Eval("Title")%>'/></a><p class="zy_ppzs_bot_lbwz"><a href='ProductView.aspx?id=<%#Eval("Id")%>'>品牌：<%#Eval("Title")%><br>型号：<%#Eval("ModelType") %></a></p></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<div class="spClear">
<asp:Label ID="lbmsg" runat="server"></asp:Label>
</div>
<div class="fenye">
<webdiyer:aspnetpager ID="AspNetPager1" runat="server" CssClass="formfield"
CustomInfoClass="formbutton"
CustomInfoHTML="第<font color='red'><b>%CurrentPageIndex%</b></font>页 共%PageCount% 页 %StartRecordIndex%-%EndRecordIndex%"
CustomInfoTextAlign="Center" FirstPageText="首页" horizontalalign="Center"
InputBoxStyle="width:19px" LastPageText="尾页" meta:resourceKey="AspNetPager1"
NextPageText="下一页" PageSize="15"
PrevPageText="前一页" showcustominfosection="Left" ShowInputBox="Always"
ShowNavigationToolTip="True" style="FONT-SIZE: 12px"
SubmitButtonClass="formfield" SubmitButtonText="GO" width="506px"
onpagechanging="AspNetPager1_PageChanging" PageIndexBoxType="TextBox"
ShowPageIndexBox="Never" AlwaysShow="True">
</webdiyer:aspnetpager></div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
后台代码：
View Code
public partial class ProductList1 : System.Web.UI.Page
{
public int pcount = 0; //总条数
public int classId;
protected void Page_Load(object sender, EventArgs e)
{
if (!int.TryParse(Request.Params["classId"] as string, out this.classId))
{
this.classId = 0;
}
if (!Page.IsPostBack)
{
this.lbmsg.Visible = false;
RptBind("");
}
if ((Request.Params["classId"] != null) && (Request.Params["classId"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId"].ToString());
if ((Request.Params["classId2"] != null) && (Request.Params["classId2"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId2"].ToString());
if ((Request.Params["classId3"] != null) && (Request.Params["classId3"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId3"].ToString());
if ((Request.Params["classId4"] != null) && (Request.Params["classId4"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId4"].ToString());
}
}
}
RptBind("ClassId in (" + GetAllId(classId) + ")");
}
}
public string GetUrl()
{
string url = "ProductView.aspx?";
if ((Request.Params["classId"] != null) && (Request.Params["classId"].ToString() != ""))
{
url+= "&classId="+Request.Params["classId"].ToString();
}
if ((Request.Params["classId2"] != null) && (Request.Params["classId2"].ToString() != ""))
{
url += "&classId2=" + Request.Params["classId2"].ToString();
}
if ((Request.Params["classId3"] != null) && (Request.Params["classId3"].ToString() != ""))
{
url += "&classId3=" + Request.Params["classId3"].ToString();
}
if ((Request.Params["classId4"] != null) && (Request.Params["classId4"].ToString() != ""))
{
url += "&classId4=" + Request.Params["classId4"].ToString();
}
url += "&";
return url;
}
/// <summary>
/// 获得下级的所有id
/// </summary>
System.Text.StringBuilder str = new System.Text.StringBuilder();
int fag = 0;
protected string GetAllId(int classid)
{
if(fag==0)
{
str.Append(classid+",");
}
Cms.BLL.Channel bll = new BLL.Channel();
DataSet ds = bll.GetList(" KindId=1 and ParentId="+classid);
foreach (DataRow row in ds.Tables[0].Rows)
{
fag = 1;
int id = Convert.ToInt32(row["Id"].ToString());
str.Append(id + ",");
GetAllId(id);
}
return str.ToString().Remove(str.ToString().LastIndexOf(","));
}
#region 列表绑定
private void RptBind(string strWhere)
{
Cms.BLL.ProductInfo bll = new Cms.BLL.ProductInfo();
DataSet ds = bll.GetList(strWhere);
DataView dv = ds.Tables[0].DefaultView;
//利用PAGEDDAGASOURCE类来分页
PagedDataSource pds = new PagedDataSource();
AspNetPager1.RecordCount = dv.Count;
pds.DataSource = dv;
pds.AllowPaging = true;
pds.CurrentPageIndex = AspNetPager1.CurrentPageIndex - 1;
pds.PageSize = AspNetPager1.PageSize;
//获得总条数
pcount = bll.GetCount(strWhere);
if (this.pcount < 0)
{
this.lbmsg.Visible = true;
this.lbmsg.Text = "暂时没有产品";
}
//绑定数据
rptList.DataSource = pds;
rptList.DataBind();
}
#endregion
protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
AspNetPager1.CurrentPageIndex = e.NewPageIndex;
RptBind("");
}
}
{
public int pcount = 0; //总条数
public int classId;
protected void Page_Load(object sender, EventArgs e)
{
if (!int.TryParse(Request.Params["classId"] as string, out this.classId))
{
this.classId = 0;
}
if (!Page.IsPostBack)
{
this.lbmsg.Visible = false;
RptBind("");
}
if ((Request.Params["classId"] != null) && (Request.Params["classId"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId"].ToString());
if ((Request.Params["classId2"] != null) && (Request.Params["classId2"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId2"].ToString());
if ((Request.Params["classId3"] != null) && (Request.Params["classId3"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId3"].ToString());
if ((Request.Params["classId4"] != null) && (Request.Params["classId4"].ToString() != ""))
{
classId = Convert.ToInt32(Request.Params["classId4"].ToString());
}
}
}
RptBind("ClassId in (" + GetAllId(classId) + ")");
}
}
public string GetUrl()
{
string url = "ProductView.aspx?";
if ((Request.Params["classId"] != null) && (Request.Params["classId"].ToString() != ""))
{
url+= "&classId="+Request.Params["classId"].ToString();
}
if ((Request.Params["classId2"] != null) && (Request.Params["classId2"].ToString() != ""))
{
url += "&classId2=" + Request.Params["classId2"].ToString();
}
if ((Request.Params["classId3"] != null) && (Request.Params["classId3"].ToString() != ""))
{
url += "&classId3=" + Request.Params["classId3"].ToString();
}
if ((Request.Params["classId4"] != null) && (Request.Params["classId4"].ToString() != ""))
{
url += "&classId4=" + Request.Params["classId4"].ToString();
}
url += "&";
return url;
}
/// <summary>
/// 获得下级的所有id
/// </summary>
System.Text.StringBuilder str = new System.Text.StringBuilder();
int fag = 0;
protected string GetAllId(int classid)
{
if(fag==0)
{
str.Append(classid+",");
}
Cms.BLL.Channel bll = new BLL.Channel();
DataSet ds = bll.GetList(" KindId=1 and ParentId="+classid);
foreach (DataRow row in ds.Tables[0].Rows)
{
fag = 1;
int id = Convert.ToInt32(row["Id"].ToString());
str.Append(id + ",");
GetAllId(id);
}
return str.ToString().Remove(str.ToString().LastIndexOf(","));
}
#region 列表绑定
private void RptBind(string strWhere)
{
Cms.BLL.ProductInfo bll = new Cms.BLL.ProductInfo();
DataSet ds = bll.GetList(strWhere);
DataView dv = ds.Tables[0].DefaultView;
//利用PAGEDDAGASOURCE类来分页
PagedDataSource pds = new PagedDataSource();
AspNetPager1.RecordCount = dv.Count;
pds.DataSource = dv;
pds.AllowPaging = true;
pds.CurrentPageIndex = AspNetPager1.CurrentPageIndex - 1;
pds.PageSize = AspNetPager1.PageSize;
//获得总条数
pcount = bll.GetCount(strWhere);
if (this.pcount < 0)
{
this.lbmsg.Visible = true;
this.lbmsg.Text = "暂时没有产品";
}
//绑定数据
rptList.DataSource = pds;
rptList.DataBind();
}
#endregion
protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
AspNetPager1.CurrentPageIndex = e.NewPageIndex;
RptBind("");
}
}
这样点开的时候在刷新页面也不会隐藏了....
多思考，多创新，才是正道！
