動態實現樹形菜單

本文轉載自查看原文 2012-05-12 14:32 5050

樹形菜單在開發軟件和網站中經常用到，但是會遇到一個問題，在網站中當你點開的時候，由於頁面刷新了，又合起來來了，這種問題是用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>

引用的頁面里

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>

后台代碼：

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( "");
        }
    }

這樣點開的時候在刷新頁面也不會隱藏了....

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 dtree實現動態加載樹形菜單，動態插入樹形菜單 JQuery實現動態生成樹形菜單 java樹形菜單實現如何用vue實現樹形菜單？ vue js 實現樹形菜單動態樹形菜單的幾種遞歸寫法小結 antd實現動態樹形搜索 C# 樹形菜單的相關實現 layui 實現三級樹形菜單 vue組件遞歸實現樹形菜單