Repeater 嵌套使用及折叠内部 Repeater


页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="RegionRepeater" runat="server">
                <HeaderTemplate>
                    <table id="RegionTable" border="1" style="width: 1000px; text-align: center; border-collapse: collapse;">
                        <thead style="background-color: red;">
                            <tr>
                                <th>
                                    <input type="checkbox" /></th>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td class="cmd" style="cursor:pointer;" data-target="item_<%#Eval("RegionID") %>">
                            - <%# DataBinder.Eval(Container.DataItem, "RegionID") %>
                        </td>
                        <td colspan="4"></td>
                    </tr>
                    <asp:Repeater ID="SubRegionRepeater" runat="server">

                        <ItemTemplate>
                            <tr class="item_<%#Eval("RegionID") %>">
                                <td>
                                    <input type="checkbox" />
                                    <input type="hidden" value="<%#Eval("ID") %>" />
                                </td>
                                <td>
                                    <%#Eval("ID") %>
                                </td>
                                <td><%#Eval("Name") %></td>
                                <td><%#Eval("RegionID") %></td>
                                <td>
                                    <a href="#!" data-rid="<%#Eval("id") %>">Edit</a>
                                    <a href="#!" data-cmd="delete" data-rid="<%#Eval("id") %>">Delete</a>
                                </td>
                            </tr>

                        </ItemTemplate>

                    </asp:Repeater>
                </ItemTemplate>
                <FooterTemplate>
                    </table>  
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>

    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/jquery.table.checkall.js"></script>
    <script>
        $(function () {
            $('#RegionTable').find('td.cmd').click(function () {
                var trCls = $(this).data('target');
                $('#RegionTable').find('tr.' + trCls).fadeToggle();
            }).end().checkAll();
        });
    </script>
</body>
</html>

页面后台代码

public partial class TestNestedRepeater : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var list = GetData();

        //分组
        IEnumerable<IGrouping<int, SubRegionModel>> query3 =
         list.GroupBy(pet => pet.RegionID, pet => pet);

        RegionRepeater.ItemDataBound += RegionRepeater_ItemDataBound;

        RegionRepeater.DataSource = query3.Select(_ => new SubRegionModel { RegionID = _.Key });
        RegionRepeater.DataBind();

        //foreach (IGrouping<int, Pet> petGroup in query3)
        //{
        //    Console.WriteLine(petGroup.Key);
        //    foreach (Pet pet in petGroup)
        //        Console.WriteLine("  {0}", pet.Id + "..." + pet.Name);
        //}

    }

    void RegionRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Repeater rptProduct = (Repeater)e.Item.FindControl("SubRegionRepeater");
            //找到分类Repeater关联的数据项 
            SubRegionModel rowv = (SubRegionModel)e.Item.DataItem;
            //提取分类ID 
            int CategorieId = Convert.ToInt32(rowv.RegionID);
            //根据分类ID查询该分类下的产品,并绑定产品Repeater 
            var list = GetData().Where(_ => _.RegionID == CategorieId).ToList(); ;
            rptProduct.DataSource = list;
            rptProduct.DataBind();
        }
    }


    List<SubRegionModel> GetData()
    {
        DateTime dt = DateTime.Now;

        return new List<SubRegionModel>{
            new SubRegionModel{ CreatedBy="Lance", CreatedDate=dt, Description="Desc", ID=1, ModifiedBy="Lance", ModifiedDate=dt, 
            Name="Sub1", RegionID=1, Status=1},
            new SubRegionModel{ CreatedBy="Lance", CreatedDate=dt, Description="Desc", ID=2, ModifiedBy="Lance", ModifiedDate=dt, 
            Name="Sub2", RegionID=2, Status=1},
            new SubRegionModel{ CreatedBy="Lance", CreatedDate=dt, Description="Desc", ID=3, ModifiedBy="Lance", ModifiedDate=dt, 
            Name="Sub3", RegionID=3, Status=1},
            new SubRegionModel{ CreatedBy="Lance", CreatedDate=dt, Description="Desc", ID=4, ModifiedBy="Lance", ModifiedDate=dt, 
            Name="Sub4", RegionID=2, Status=1},
            new SubRegionModel{ CreatedBy="Lance", CreatedDate=dt, Description="Desc", ID=5, ModifiedBy="Lance", ModifiedDate=dt, 
            Name="Sub5", RegionID=1, Status=1},
            new SubRegionModel{ CreatedBy="Lance", CreatedDate=dt, Description="Desc", ID=6, ModifiedBy="Lance", ModifiedDate=dt, 
            Name="Sub6", RegionID=3, Status=1}
        };
    }

}

效果图

知识共享许可协议
《Repeater 嵌套使用及折叠内部 Repeater》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告