动态实现树形菜单
树形菜单在开发软件和网站中经常用到，但是会遇到一个问题，在网站中当你点开的时候，由于页面刷新了，又合起来来了，这种问题是用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( "");
}
}
这样点开的时候在刷新页面也不会隐藏了....