动态实现树形菜单

最新推荐文章于 2021-11-21 18:00:46 发布
最新推荐文章于 2021-11-21 18:00:46 发布
阅读量131 收藏
点赞数
文章标签： c# ui

      树形菜单在开发软件和网站中经常用到，但是会遇到一个问题，在网站中当你点开的时候，由于页面刷新了，又合起来来了，这种问题是用iframe不会出现，但是在网站中很少会用到框架，最近就碰到了这样的问题，在网上找了很多js写的树形菜单，我需要分四级，但是都没找到合适的，乱七八糟的代码都有，很头疼，没办法，自己就想办法写了一个，这个是在知道分几级的情况下，关于无限极没研究，可以再基础上在下点功夫也可以！

原理大概是这样的：

第一步：需要把一级到四级样式写好，位置固定好

第二步：动态循环生成菜单，一级正常动态循环出来，二级到四级根据参数传递过来的id与上一级别的id判断是否相等来判断

           是否循环出来

看看代码吧

树形菜单是个公用的部分，我们一般会放到用户控件里，代码如下：

 

ExpandedBlockStart.gif 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>

 引用的页面里

 

ExpandedBlockStart.gif 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= " 第&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= " 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>

 

后台代码：

 

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

这样点开的时候在刷新页面也不会隐藏了....

weixin_34259159
关注
网页树形菜单
06-23
zTree的一个jsp例子
动态构建树形菜单
XYZ
08-09 594
因为项目中商品分类有三个层次，即 大类1 中类2 小类3 因此，这里使用element-ui级联选择器。根据官网教程，我们需要在后台构建如下的Json数据。 [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, { value: 'kekong', label:
Axure RP 9树与菜单树的实现【教程五】
亲测，只为展现最完美的有效！
11-21 1万+
一、树介绍 在Axure RP中，说的就是树形小部件，树型小部件最常用于模拟文件浏览器和可视化其他层次结构。单击树小部件的各个节点可以在页面上显示不同的小部件，或者在项目中打开不同的页面。 但是自带的树不怎么好用，比如不能修改间距，很多想要的样式都不能实现。鉴于此，我们很有必要自己实现树结构。 □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □
又一个动态树形菜单
anjichan4261的博客
09-08 112
<!--#includefile="inc/conn.asp"--><SCRIPTlanguage=javascript><!--vartt='start';varii='start';functionturnit(ss,bb){if(ss.style.display=="none"){if(tt!='start')...
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
layui树形菜单动态遍历的例子
10-16
在本文中，我们将深入探讨如何在layui框架中实现树形菜单的动态遍历。layui是一个流行的前端组件库，提供了一系列丰富的UI组件，其中包括树形菜单。动态遍历树形菜单通常用于显示层级结构的数据，例如文件系统、组织...
jQuery使用zTree插件实现树形菜单和异步加载
10-22
### jQuery使用zTree插件实现树形菜单和异步加载的相关知识点 #### 1. jQuery与zTree插件介绍 **jQuery** 是一个快速、小巧、功能强大的 JavaScript 库。它通过提供一种简捷的方式来访问和操作文档对象模型（DOM）...
Vue.js组件tree实现无限级树形菜单
10-20
总的来说，这个Vue.js组件展示了如何使用Vue的核心特性，如组件、数据绑定、事件处理和计算属性，来实现动态交互的无限级树形菜单。这样的组件在实际开发中非常实用，因为它能够有效地组织和展示层级关系复杂的数据...
javascript实现树形菜单的方法
10-23
JavaScript 实现树形菜单是一种常见的前端开发技术，用于在网页中构建层次结构的导航系统。在本示例中，我们看到一个使用纯 JavaScript 编写的简单树形菜单的实现，它涉及到了动态操作DOM元素以及处理节点属性的技术...
jquery实现树形菜单完整代码
10-23
使用jQuery来实现树形菜单可以极大地提高开发效率，并且能实现良好的浏览器兼容性。本文将详细介绍如何使用jQuery实现一个树形菜单，并提供完整的代码示例。 首先，树形菜单的实现通常涉及到HTML结构、CSS样式以及...
使用 zTree 动态加载树形菜单
08-10
NULL 博文链接：https://xurichusheng.iteye.com/blog/2200545
树形菜单动态绑定（请认真看完）
weixin_44540247的博客
06-28 1039
树形菜单在很多项目中都很实用，我所了解的Tree插件只有两个，一个是layui自带的样式，不过比较简陋，新版本似乎是更新出来了，但使用还是不怎么方便，另一个则是jQuery的另一个zTree插件，我一般做树形菜单都喜欢用jQuery的zTree来做，因为操作比较简单（个人原因，可能有人觉得layui也行），更有些牛人使用原生js写出来的，当然不能轻易模仿。那今天我就拿我熟悉的jQuery树形菜单插...
树形菜单
weixin_30399155的博客
06-21 82
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>树形菜单</title> <style> body { font: 12px/20px ...
用JQuery+CSS来实现树形菜单
nc_wanjing的专栏
03-22 1570
一、实现功能 想要做成树形菜单，无非就是点击父菜单，则把它的子菜单显示出来。 二、设计思路 要想实现此效果，则当点击父菜单时，给父菜单添加事件，调用toggle()函数来把它的子菜单显示出来。 并把子菜单的“+”号改为“-”号。 三、完成以上两步后，则开始用代码实现了 1.在你的html里面设计几个来 +体育新闻     篮球新闻
三级动态树形菜单
anjichan4261的博客
03-29 587
三级树形菜单,之前有发过一个那个和这个还是有区别的.表结构仍然是我一直发的那样的.注意,不能打开二级类 就是说只能打开大类和三级类.当有类别无三级类时候,就不适用了. <!--#includefile="inc/conn.asp"--><TABLEwidth=190><TR>...
asp mysql 可编辑树状,基于数据库动态生成树形目录-ASP教程,数据库相关
weixin_39631649的博客
03-29 252
一、 目录树的广泛应用为了这段内容，在百度上搜了搜，内容一大通，相关的竟没有。搜什么搜嘛？用处不是明摆着吗？资源管理器文件夹的管理，论坛中多级论坛的管理，java中的awt正是缺乏包括树形目录这样的组件才用处受限……谁这么没礼貌，一点面子都不给，叫我怎么讲下去？清了清嗓子：在我们项目中常常会出现自关联的数据表，从整体看去，整个表就呈现为一个树形数据结构。当我们对这个表进行显示、编辑时，如果不采用...
帆软下拉复选框，层级树状选择
hzp666的博客
03-04 7540
treelayer函数 1.概述 语法：treelayer(TreeObject, Int, Boolean, String) 定义：返回一个树对象 TreeObject 第 n 层的值，一般为树数据集，或下拉树、视图树等树对象，并且可以设置返回值类型及分隔符。 详细解释： 对象 定义 值 TreeObject tree 对象 例如：$tree Int 想要获得层级的数值 最上层为 1 ，第二层为 2 ，依此类推，若无则返回最底层 ...
常用的三种树形菜单->很实用的
java技术
11-25 345
a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}...
利用JSP和JavaScript实现动态树形菜单
"这篇内容主要介绍了如何在JSP中实现树形菜单，提供了一个免费的JavaScript库dtree作为基础，并详细讲述了动态生成树形菜单的步骤，包括数据库设计、Java类编写、Tag类封装以及实际的JSP应用。" 在Web开发中，树形...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值