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

多谢大家帮我做测试

演示例子

[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]

原文地址:https://www.cnblogs.com/zzxap/p/2175574.html