zoukankan      html  css  js  c++  java

  • 动态实现树形菜单

          树形菜单在开发软件和网站中经常用到，但是会遇到一个问题，在网站中当你点开的时候，由于页面刷新了，又合起来来了，这种问题是用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{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="第&lt;font color='red'&gt;&lt;b&gt;%CurrentPageIndex%&lt;/b&gt;&lt;/font&gt;页 共%PageCount%&nbsp;页 %StartRecordIndex%-%EndRecordIndex%" 
                CustomInfoTextAlign="Center" FirstPageText="首页" horizontalalign="Center" 
                InputBoxStyle="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("");
            }
        }

    这样点开的时候在刷新页面也不会隐藏了....
  • 相关阅读:
    springboot项目下载文件功能中-切面-导致的下载文件失败的bug
    解决laydate动态设置初始值的问题
    简易MySQL存储过程
    css选择器（第n个类选择器）的坑
    session过期情况下ajax请求不会触发重新登录的问题
    session过期情况下ajax请求不会触发重新登录的问题
    springboot配置多数据源mongodb
    css平移动画的实现
    springboot中使用JOIN实现关联表查询
    解决springboot项目中@Value注解参数值为null的问题
  • 原文地址：https://www.cnblogs.com/shuang121/p/2497244.html
Copyright © 2011-2022 走看看