一步一步教你做三级可折叠树形菜单。

最新推荐文章于 2019-10-01 08:25:58 发布
最新推荐文章于 2019-10-01 08:25:58 发布
阅读量4.1k 收藏 3
点赞数
文章标签： dataset stylesheet bbs sql string class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzxap/article/details/5288611
版权

 

多谢大家帮我做测试

 

演示例子

[url=http://www.bvbuy.cn/bbss/index.htm]http://www.bvbuy.cn/bbss/index.htm[/url]

 

所需js 和css 文件请到我的资源里下载

 

第一步建表bbs_panel1  

id panelName  panelMsg url  

21  开发语言   xx       

表bbs_panel2

 

id pid panelName  panelInfo  panelSort url

1   21   VC/MFC

2   21    vb

 

表bbs_panel3

 

id pid ppid panelName  panelInfo  panelsort url

1   1   21    基础类

2   1   21    界面

3   1   21    网络编程

 

第二步嵌套REPEATER

[code=HTML]

<head runat="server">

    <title>treeleft</title>

    <link rel="stylesheet" href="js/jquery.treeview.css"/>

<link rel="stylesheet" href="js/red-treeview.css"/>

<link rel="stylesheet" href="js/screen.css"/>

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.cookie.js" type="text/javascript"></script>

<script src="js/jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

$("#tree").treeview({

collapsed: true,

animated: "medium",

control:"#sidetreecontrol",

persist: "location"

});

})

   $(document).ready(

             function() 

            { 

              delClass();

 

             }); 

function delClass()

{

 var   lis   =   document.getElementsByTagName('li'); 

 var i;

 var length;

          for( i=0; i<length;i++)  

         { 

                if(lis[i].getElementsByTagName('ul').length   ==   0)   

                {

                  lis[i].setAttribute('class',''); 

                }

          } 

        }

 

</script>

</head>

<body>

<div id="main"><a href="#"></a>

<div id="sidetree">

<div id="sidetreecontrol"><a href="#">Collapse All</a> | <a href="#">Expand All</a></div>

<ul id="tree" class="treeview">

<asp:Repeater ID="bClass" runat="server" OnItemDataBound="bClassList">

  <ItemTemplate>

        <li class="expandable"><div class="hitarea expandable-hitarea "></div><a href="Title.aspx?mode=1&id=<%#Eval("id") %>" target="main"><strong><%#Eval("MenuName")%></strong></a> 

          <ul style="display: none; "><asp:Repeater ID="bsClass" runat="server" OnItemDataBound="bsClassList"><ItemTemplate>

            <li class="expandable"> <a href="Title.aspx?mode=2&id=<%#Eval("pid") %>&pid=<%#Eval("id") %>" target="main"><%#Eval("MenuName")%></a>

                 <ul style="display: none; "> <asp:Repeater ID="sClass" runat="server"><ItemTemplate><li ><a href="Title.aspx?mode=3&id=<%#Eval("ppid") %>&pid=<%#Eval("pid") %>&ppid=<%#Eval("id") %>" target="main"><%#Eval("MenuName")%></a> </li>

                    </ItemTemplate> </asp:Repeater>

                 </ul>   

             </li> 

                </ItemTemplate></asp:Repeater>

            </ul>

          </li>

      </ItemTemplate>

    </asp:Repeater>

 </ul>

<br style="clear: left" />

</div>

</div>

</body>

 

[/CODE]

 

第三步 后台

 

[code=C#]

 

private string strbbsType = "2";

    private string sql = "";

    protected void Page_Load(object sender, EventArgs e)

    {

         if (Request.QueryString["bbsType"]!=null)

         { 

            strbbsType = Request.QueryString["bbsType"].ToString();

         }

 

        if (!IsPostBack)

        {

            if (strbbsType=="1")

            {

            sql = "select id,MenuName,url  from M_MenuHead  where id>0 order by id";

            }

            else

            {

                sql = "select  id,panelName as MenuName,url  from bbs_panel1  ";

            }

 

            DataSet rd = new DataSet();

            rd = SqlHelper.ExecuteDataset(SqlHelper.Conn2, CommandType.Text, sql);

            bClass.DataSource = rd;

            bClass.DataBind();

        }

 

    }

    protected void bClassList(object sender, RepeaterItemEventArgs e)

    {

        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

        {

            string preid = ((DataRowView)e.Item.DataItem).Row["id"].ToString();//获得对应ID

            Repeater bsClass = (Repeater)e.Item.FindControl("bsClass");//找到要绑定数据的Repeater

            if (bsClass != null)

            {

                if (strbbsType == "1")

                {

                    sql = "select id,pid,MenuName from M_MenuChildren where pid=" + preid + " ";

                }

                else

                {

                    sql = "select  id,pid,panelName as MenuName  from bbs_panel2 where pid=" + preid + " ";

                }

                DataSet srd = new DataSet();

                srd = SqlHelper.ExecuteDataset(SqlHelper.Conn2, CommandType.Text, sql);

                bsClass.DataSource = srd;

                bsClass.DataBind();

            }

        }

    }

    protected void bsClassList(object sender, RepeaterItemEventArgs e)

    {

        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

        {

            string preid = ((DataRowView)e.Item.DataItem).Row["id"].ToString();//获得对应ID

            Repeater sClass = (Repeater)e.Item.FindControl("sClass");//找到要绑定数据的Repeater

            if (sClass != null)

            {if (strbbsType=="1")

            {

                sql = "select id,pid,ppid,MenuName from M_MenuChildren2 where pid=" + preid + " ";

            }

                else

            {

                sql = "select id,pid,ppid,panelName as MenuName  from bbs_panel3 where pid=" + preid + " ";

            }

                DataSet srd = new DataSet();

                srd = SqlHelper.ExecuteDataset(SqlHelper.Conn2, CommandType.Text, sql);

//SqlHelper.Conn2是数据库连接字符

                sClass.DataSource = srd;

                sClass.DataBind();

 

            }

        }

    }

 

[/code]

 

zzxap
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
树形折叠菜单
u013285507的专栏
12-30 516
树形折叠菜单 ul{ list-style:none;} #menu{ text-align:left; margin:30px; padding:0; cursor:pointer;} .plus{ float:left; width:32px; height:16px; background-position:0 50%; background-repeat:no-repea
js无限分级 树_js递归,无限分级树形折叠菜单
weixin_42515101的博客
12-23 110
效果图mysql表结构形式数据data数据第一级是id:0第二级是id:1,name:'广东',pid:0第二级是id:5,name:'广西',pid:0第三级是id:6,name:'玉林',pid:5第三级是id:7,name:'北流',pid:6var data = [{ id: 1, name: '广东', pid: 0 },{ id: 2, name: '广州', pid: 1 },{ i...
三级可折叠树形菜单
11-30
三级可折叠树形菜单
一个ASP.NET 1.1下的可折叠菜单
weixin_34198762的博客
06-02 168
从网上下的,稍微改进了一下,做成控件形式,给各位有需要的朋友,其中有很多不完善之处,且只能在IE下使用.源码: namespaceLongYu.Utility{usingSystem;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Text;usingSystem.Web.UI;...
可折叠树形菜单代码（带搜索功能）
01-09
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作，带搜索功能，搜索关键字，直接显示菜单项，展开收缩树形菜单。
JS三级可折叠菜单
weixin_30602505的博客
02-13 105
.ASPX代码 Code <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="NavigateMenu.aspx.cs"Inherits="NavigateMenu"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""...
JS三级可折叠菜单实现方法
10-22
主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下
用JS做的简单的可折叠的两级树形菜单
10-26
可折叠的树形菜单想必大家并不陌生吧，实现方法有多种，在本文将为大家介绍下js是如何实现的，希望对大家有所帮助
使用repeater jquery实现的三级可折叠树形菜单
05-22
这里我们关注的是“使用repeater jQuery实现的三级可折叠树形菜单”，这是一个高效且灵活的方法来构建这种功能。下面将详细介绍这个主题。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和...
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
特别是在具有层级结构的数据展示时，如文件系统、目录结构或复杂的导航菜单，无限级折叠菜单（类似树形菜单）能够提供良好的用户体验。这篇文章将探讨如何使用JavaScript来实现这样的功能。 首先，我们需要理解这个...
css折叠CSS打造的三级折叠/合拢菜单
09-10
css折叠CSS打造的三级折叠/合拢菜
常用手风琴树形菜单js特效代码
10-08
常用手风琴树形菜单js特效代码
h5移动端部门树展示
04-13
h5移动端树列表
纯CSS实现可折叠树状菜单
12-29
1：Html代码 <li> <label for=subsubfolder1>下级</label> <input id=subsubfolder1 type=checkbox /> <ol> <li class=file><a>下级</a></li> <li> <label for=subsubfolder2>下级</label> <input id=subsubfolder2 type=checkbox /> <ol> <li class=file><a>无限级</a></li> <li class=file><a>无限级</a></li> <li cl
CSS + Js 超级 左侧可折叠 树形菜单 后台专用版
03-17
CSS + Js 超级 左侧可折叠 树形菜单 后台专用版 一款后台左侧专用的可折叠树形菜单，设计外形超级漂亮，本折叠菜单最大可支持三级，三级菜单对于中小型网站的后台已经够用了，而且代码也不是太复杂，水平好点的可自行扩展。通过点击最上部的展开、收缩按钮，可将全部闭合的菜单一律调整为展开状态，反之亦然。
jquery三级下拉折叠手风琴菜单导航效果
pyzheng的专栏
04-25 995
原文地址[url]http://www.helloweba.com/view-blog-175.html[/url] 使用插件：[url]http://www.aakashweb.com/resources/pages/demos/jquery-collapser/[/url] [img]http://files.jb51.net/do/uploads/litimg/111210/10...
asp实现树形菜单
asp、.net专栏
05-30 2698
%数据库连接set conn=Server.CreateObject("ADODB.Connection")conn.open "driver={SQL Server};server=chaiwei;DATABASE=chaiwei;UID=sa;PWD="打开所有父层数据set rs=Server.CreateObject("ADODB.Recordset")rs.Open "selec
jquery实现手风琴菜单展开折叠效果
fengxue_snow的博客
07-31 1413
1、效果图 2、代码 <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;} a { color: #666; text-...
竖向三级树形折叠列表菜单代码
10-01 552
Code1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">2<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">34<head>5<title>竖向三级树形折叠列表菜单代码-www...
vue三级联动树形菜单
最新发布
06-09
Vue三级联动树形菜单是一个常见的前端UI组件，用于展示数据层级结构，并允许用户通过点击或输入筛选，实现不同级别的选项之间的联动。在Vue.js中，这种功能通常通过递归组件和Vuex或自定义事件管理状态来实现。以下...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值