Grouped Gridview Mit Gruppen Erweiterbar

Da Sie nicht geben Sie Ihre aktuelle code, den ich zusammen gestellt habe ein Beispiel auf, wie das zu erreichen, was Sie brauchen, basierend auf diese andere Frage.

Anderen Frage nimmt einfach die Dateien auf dem server das Laufwerk C: und Gruppen, die Ihnen von der Schöpfung Zeit, in absteigender Reihenfolge in einem raster. So, hier ist der repeater markup:

<asp:HiddenField ID="dataGroups" runat="server" />
<asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_RowDataBound" >
    <ItemTemplate>          
        <!-- Bind to your specific properties i.e. Invoice #, file type, etc. -->
        <table id="tableItem"  runat="server">
            <tr>
                <td style="width: 200px;">
                    <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                </td>
                <td style="width: 200px;">
                    <asp:Label ID="lblDirName" runat="server" Text='<%#Eval("DirectoryName") %>'></asp:Label>
                </td>
                <td style="width: 200px;">
                    <asp:Label ID="lblCreationTime" runat="server" Text='<%#Eval("CreationTime") %>'></asp:Label>
                </td>
                <td style="50px">
                <asp:Button ID="btnAction" runat="server"  Text="Hit me" OnClick="btnAction_Click"/>
                </td>
            </tr>
        </table>
    </ItemTemplate>       
</asp:Repeater>

Hier der code hinter der OnRowDataBound Ereignis; geschrieben in C#, da das ist, was Sie verwenden:

private int month = -1;
private int year = -1;
protected void rpt_RowDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        //Binding to FileInfo objects. 
        //Since we are grouping by CreationTime we need to check if it's time to create a new "group"
        //Is current month and year different from the value previously stored on the month and year variables?
        if (month != (e.Item.DataItem as FileInfo).CreationTime.Month || year != (e.Item.DataItem as FileInfo).CreationTime.Year)
        {   
            month = (e.Item.DataItem as FileInfo).CreationTime.Month;
            year = (e.Item.DataItem as FileInfo).CreationTime.Year;

            //append the current group to the hidden variable "dataGroups" which will tell us quickly how many groups we have in total
            dataGroups.Value += (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM") + ",";
        }
        //for every row; "stamp it" with this attribute since we'll use it on the client side with jQuery
        (e.Item.FindControl("tableItem") as HtmlTable).Attributes.Add("data-group", (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM"));
    }
}

Nun auf der client-Seite; wir tun müssen, um etwas jQuery-magic, um der zusammenklappbare panels.

<link href="css/flick/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>

 <script type="text/javascript">
     $(document).ready(function () {
         //asp hidden element containing the list of groups separated by commas.
         //Check code behind of RowDataBound to see where is this populated
         var dataGroups = $('#<%=dataGroups.ClientID%>').val().split(',');
         for (var i = 0; i < dataGroups.length; i++) {
             //split() doesn't have an option to ignore empty strings so we'll just ignore it
             if (dataGroups[i] != '') {
                 //select all table elements with the data-group value matching the 
                 //current group we are iterating over and enclose them all 
                 //inside a div; effectively creating a "group"
                 $('table').filter(function (inputs) {
                     return $(this).data('group') == dataGroups[i];
                 }).wrapAll("<div class='accordion'>");
             }
         }
         var accordions = $('.accordion');
         //now, for every div enclosing the groups, create a Handle that will work as the element that
         //collapses or expands the group
         $(accordions).wrapInner("<div>").prepend('<h3><a href="#">Handle</a></h3>');

         //Now replace the word "Handle" above for the actual group number/name or what have you
         for (var i = 0; i < accordions.length; i++) {
             $(accordions[i]).find('h3 a').text("Group " + $(accordions[i]).find('table:first').data('group'));
         }

         //finally call jQuery.accordion to create the accordions on every group
         $('.accordion').accordion({ collapsible: true, autoHeight: false });
     });
 </script>

Nun, die Zeilen von code produzieren diese: