2

关于嵌套网格视图或具有子网格视图的主题有许多问题。我已经考虑过这种方法,但它对我的目的来说太多了。我能找到的最接近的现有问题是:Grouped Gridview

不幸的是,尽管这对如何创建分组行有一些建议,但它并没有使它们可折叠。

我的要求是我希望用户看到带有分隔行的网格视图,例如

- 组 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

这样用户可以,如果他们希望这样查看:

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

或这个:

+ 第 1
组 + 第 2
组 + 第 3 组

基本上所有的分组行都是组的标题。它们甚至不是真正正确的 Gridview 行。实际的行是适当的网格视图,不需要任何进一步的向下钻取功能。

我希望我的解决方案在客户端是可行的,我有一些限制,即我可以使用 javascript 或 jQuery(包括 jQuery-ui 1.8.8),但不能任意扩展我正在使用的 AJAX 工具包的数量。我宁愿不必通过多个组扩展回发来不断地管理页面的状态。

这是可以实现的吗?谁能指出我可能会推动我的资源的方向?

编辑:哦,是的,我忘了提。基本 gridview 的行中偶尔会有控件,包括但可能不限于:按钮、文本框、复选框和下拉菜单。

4

1 回答 1

8

由于您没有提供实际代码,因此我根据其他问题整理了一个示例,说明如何完成您需要的工作。

另一个问题只是获取服务器驱动器 C 上的文件,并按创建时间在网格中按降序对它们进行分组。所以这里是转发器标记:

<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;用 C# 编写,因为这就是您使用的:

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 魔术来构建可折叠面板。

<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>

现在,这些代码行产生了这个:

在此处输入图像描述

于 2012-07-25T19:39:30.077 回答