嵌套Repeater实现可伸缩的动态树状目录

前台：

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Left.ascx.cs" Inherits="Controllers_ml" %>
   <!--<asp:TreeView ID="TreeView1" runat="server"  DataSourceID="XmlDataSource1" ShowLines="False"  NodeIndent="0"   >
        <RootNodeStyle />
        <ParentNodeStyle Font-Bold="False"/>
            <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD"  />
            <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />
            <NodeStyle Font-Names="Verdana"  ForeColor="Black" HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px"/>
     </asp:TreeView>
        <asp:XmlDataSource ID="XmlDataSource1"  EnableViewState="true" runat="server" DataFile="~/class.xml"></asp:XmlDataSource>-->
       
  <script language=javascript>
function showHideSubMenu(sid)
{
whichEl = eval("submenu" + sid);

if (whichEl.style.display == "none")
{
eval("submenu" + sid + ".style.display=\"\";");
}
else
{
eval("submenu" + sid + ".style.display=\"none\";");
}
}
</script>     
       
 <div>
    <ul class="nav_1">
     <asp:Repeater runat="server" ID="rep1" OnItemDataBound="rep_ItemDataBound" >
   <ItemTemplate>
     <li onClick=showHideSubMenu(<%#Container.ItemIndex %>)><asp:Label ID="f" runat="server"><%# DataBinder.Eval(Container.DataItem, "first")%></asp:Label></li>
     <ul class="nav_2" id="submenu<%#Container.ItemIndex %>">
     <asp:Repeater runat="server" ID="rep2">
         <ItemTemplate>  
            <li><a href="classpro.aspx?id=<%# DataBinder.Eval(Container.DataItem, "id")%>"><%# DataBinder.Eval(Container.DataItem, "second")%></a></li>
         </ItemTemplate>
     </asp:Repeater>
     </ul>
   </ItemTemplate>
 </asp:Repeater>
 </ul>
  </div>

后台：

 

using System;
using System.Data;
using System.Data.OleDb;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Controllers_ml : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataSet ds = new DataSet();
        OleDbConnection myconn = DB.CreateDB();
        myconn.Open();
        OleDbCommand cmd = new OleDbCommand("select distinct first from class where first", myconn);
        OleDbDataAdapter oda = new OleDbDataAdapter(cmd);
        oda.Fill(ds, "first");
        rep1.DataSource = ds.Tables["first"].DefaultView;
        rep1.DataBind();
        myconn.Close();
    }

    protected void rep_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        Repeater rep2 = (Repeater)e.Item.FindControl("rep2");
        DataRowView rowv = (DataRowView)e.Item.DataItem;
        string CategorieId = rowv["first"].ToString();
        DataSet dss = new DataSet();
        OleDbConnection myconns = DB.CreateDB();
        myconns.Open();
        OleDbCommand cmds = new OleDbCommand("select top 3 * from class where second and first='" + CategorieId+"'", myconns);
        OleDbDataAdapter odas = new OleDbDataAdapter(cmds);
        odas.Fill(dss, "second");
        rep2.DataSource = dss.Tables["second"].DefaultView;
        rep2.DataBind();
        myconns.Close();

    }
}

 

分析：没有从正面去处理，而是采用<%#Container.ItemIndex %>结合JS

 

 

更好的办法

<div onclick="(a.style.display=='none')?a.style.display='block':a.style.display='none';">

显示隐藏

</div>

<div class="a" id="a" style="display:none;">隐藏内容</div>

注意第2个DIV 必须写style="display:none;"

 

 

参考：http://wenku.baidu.com/view/82f3346aaf1ffc4ffe47acc9.html