分组的GridView可膨胀组 [英] Grouped Gridview With Expandable Groups

问题描述

有若干围绕嵌套GridView的或具有子GridView的的主题的问题。我也考虑过这种做法，但实在是太多了，我的目的。最接近的现有问题，我能找到的就是这一条：分组的GridView

There are a number of questions around the topic of nesting gridviews or having sub-gridviews. I have considered this approach but it is too much for my purposes. The closest existing question I could find was this one: Grouped Gridview

不幸的是，虽然这对如何创建分组排它不会进入使他们可折叠一些建议。

Unfortunately although this has some advice for how to create grouping rows it doesn't go into making them collapsible.

我的要求是，我希望用户看到在GridView与分离例如行

My requirement is that I wish the user to see the gridview with separating rows e.g.

- 第1组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据3

   - 第2组
数据1 |数据2 |数据3
数据1 |数据2 |数据3

   - 第3组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据
  3

- GROUP 1
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
- GROUP 2
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
- GROUP 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3

，以便用户可以，如果他们愿意看法是这样的：

So that a user could, if they wished view like this:

+第1组

   - 第2组
数据1 |数据2 |数据3
数据1 |数据2 |数据3

   - 第3组
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据3
数据1 |数据2 |数据
  3

+ GROUP 1
- GROUP 2
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
- GROUP 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3
Data 1 | Data 2 | Data 3

或者这样：

+第1组

   +组2

   +第3组

+ GROUP 1
+ GROUP 2
+ GROUP 3

基本上所有的分组排在他们是该组的冠军。他们不是真的，甚至适当的GridView行。实际行是在GridView正确，不neeed任何进一步的向下钻取功能。

Essentially all the grouping rows have in them is the title of the group. They're not even really proper Gridview rows. The actual rows are the gridview proper and don't neeed any further drill down capability.

我想我的解决方案是可行的客户方，我有是我可以使用JavaScript或者jQuery的（包括jQuery的-UI 1.8.8），但不能任意扩大我使用AJAX工具包的数量限制。我想preFER不是必须通过多组扩大不断回发管理页面的状态。

I would like my solution to be workable clientside, I have constraints which are that I can use javascript or jQuery (including jQuery-ui 1.8.8) but cannot arbitrarily expand the number of AJAX toolkits I'm using. I would prefer not to have to manage the state of the page constantly through multiple group expanding postbacks.

这是不是可以实现？任何人都可以点我的资源可能给我一个微调的方向？

Is this something that can be achieved? Could anyone point me in the direction of a resource which might give me a nudge?

编辑：哦，是的，我忘了提。基gridview的的行偶尔有在他们的控制，包括但可能不限于：按钮，文本框，复选框和下拉菜单

Oh, yes, and I forgot to mention. The rows of the base gridview occasionally have controls in them including, but potentially not limited to: buttons, textboxes, checkboxes and dropdowns.

推荐答案

既然你不提供实际的code，我放在一起就如何完成你需要根据什么断的<一个例子href=\"http://stackoverflow.com/questions/7725173/displaying-records-grouped-by-month-and-year-in-asp-net\">this另一个问题。

Since you don't provide your actual code, I put together an example on how to accomplish what you need based off of this other question.

这是另一个问题只是发生在服务器的驱动器C和它们分组上的文件创建时间在网格降序排列。因此，这里的中继标记：

That other question simply takes the files on the server's drive C and groups them by creation time in descending order in a grid. So here's the 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>

下面是背后的 OnRowDataBound 事件code; C＃编写的，因为那是你用什么：

Here's the code behind for the OnRowDataBound event; written in C# since that's what you use:

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"));
    }
}

现在在客户端;我们需要做一些jQuery魔术以建设可折叠的面板。

Now on the client-side; we need to do some jQuery magic in order to build the collapsible 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>

现在，code的那些行产生这样的：

Now, those lines of code produce this:

这篇关于分组的GridView可膨胀组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！