.net 双层repeater嵌套 实现树形结构

效果：

(1)前台代码：

样式：

<style type="text/css">
        .close, .open {
         background:url(/base/css/easyui/gray/images/tree_icons.png);
        }
        .close {
            float: left;
            width: 16px;
            height: 16px;
            background-position:-96px 0px;
             cursor:pointer;
        }
         .open {
             display:none;
            float: left;
            width: 16px;
            height: 16px;
            background-position:-113px 0px;
            cursor:pointer;
        }
        .close01 {
            float: left;
            width: 16px;
            height: 16px;
        }
    </style>

 <asp:Repeater ID="rptData" runat="server" OnItemCommand="rptData_ItemCommand"
                    OnItemDataBound="rptData_ItemDataBound">
                    <HeaderTemplate>
                        <table cellpadding="0" cellspacing="0" id="dg" class="table table-bordered table-striped with-check table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>
                                        <input id="CheckAll" title="点击全选或反全选当前页所有信息" tabindex="0" type="checkbox">
                                    </th>
                                    <th>序号
                                    </th>
 
                                    <th>菜单名称
                                    </th>

                                    <th>操作
                                    </th>
                                </tr>
                            </thead>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td style="text-align: center">
                                <input id="chkId" name="chkname" title="选择/取消" type="checkbox" value="<%# DataBinder.Eval(Container.DataItem, "Id")%>" />
                            </td>
                            <td style="text-align: left">
                                <%# DataBinder.Eval(Container.DataItem, "Id")%>
                            </td>  
                            <td style="text-align: left">
                                <div class='close close_<%# DataBinder.Eval(Container.DataItem, "Id")%>' id='<%# DataBinder.Eval(Container.DataItem, "Id")%>'></div>
                                 <div class='open open_<%# DataBinder.Eval(Container.DataItem, "Id")%>' id='<%# DataBinder.Eval(Container.DataItem, "Id")%>'></div>
                                <%# DataBinder.Eval(Container.DataItem, "MenuName")%>
                            </td>                        
                            <td>
                                <a href="Update.aspx?Id=<%# DataBinder.Eval(Container.DataItem,"ID")%>" class="btn btn-default btn-mini">
                                    <i class="icon-pencil icon-black"></i>编辑</a>
                                <asp:LinkButton ID="lbDelete" runat="server" CssClass="btn btn-default btn-mini"
                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' OnClientClick="javascript:return confirm('确定要删除该项吗?')"
                                    CommandName="Delete"><i class="icon-remove icon-black"></i> 删除 </asp:LinkButton>
                            </td>
                        </tr>
                        <asp:Repeater runat="server" ID="repData01">
                            <ItemTemplate>
                                <tr id='tr_<%# DataBinder.Eval(Container.DataItem, "parentId")%>' style="display:none;">
                                    <td style="text-align: center">
                                        <input id="chkId" name="chkname" title="选择/取消" type="checkbox" value="<%# DataBinder.Eval(Container.DataItem, "Id")%>" />
                                    </td>
                                     <td style="text-align: left"  colspan="2">
                                      <%# DataBinder.Eval(Container.DataItem, "Id")%>
                                    </td>
                                    <td>
                                        <div class="close01"  style="margin-left:15px;"></div>
                                        <div><%# DataBinder.Eval(Container.DataItem, "MenuName")%></div>
                                    </td>                                  
                                    <td>
                                        <a href="Update.aspx?Id=<%# DataBinder.Eval(Container.DataItem,"ID")%>" class="btn btn-default btn-mini">
                                            <i class="icon-pencil icon-black"></i>编辑</a>
                                        <asp:LinkButton ID="lbDelete" runat="server" CssClass="btn btn-default btn-mini"
                                            CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' OnClientClick="javascript:return confirm('确定要删除该项吗?')"
                                            CommandName="Delete"><i class="icon-remove icon-black"></i> 删除 </asp:LinkButton>
                                    </td>
                                </tr>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>

(2)后台代码：

 protected void rptData_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Repeater rep = e.Item.FindControl("repData01") as Repeater;
            DataRowView rowv = (DataRowView)e.Item.DataItem;
            int Id = Convert.ToInt32(rowv["Id"]);
            string where = string.Format(" and ParentId ={0} ", Id);
            DataSet ds = bll.GetMenuList(where);
            if (ds.Tables[0] != null && ds.Tables[0].Rows.Count > 0)
            {
                rep.DataSource = ds.Tables[0];
                rep.DataBind();
            }
        }
    }

（3）js代码：

 <script type="text/javascript">
            $(function () {
                $(".close").click(function () {
                    var id = $(this).attr("id");
                    $(this).hide();
                    $(".open_" + id).show();
                    $("#dg #tr_" + id).show();
                });
                $(".open").on("click",function () {
                    $(this).hide();
                    var id = $(this).attr("id");
                    $(".close_" + id).show();
                    $("#dg #tr_" + id).hide();
                });
            });
        </script>