65.9K
CodeProject 正在变化。 阅读更多。
Home

分组 GridView 数据

Anurag Gandhi
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.85/5 (57投票s)

2010 年 9 月 27 日

CPOL

5分钟阅读

viewsIcon

245030

downloadIcon

12082

一个自定义 GridView 控件，它提供了额外的功能来分组 GridView 中的数据，同时还提供了自定义组头和组脚的功能。

引言

GridView 是用于以表格格式显示数据的最受欢迎的控件之一。但为了更好地分析，它需要以某种汇总形式显示数据，例如分组、透视、图形、图表等。本文介绍了一种简单的方法，可以使用适当的聚合函数对数据进行分组，以便您可以轻松地增强报告。当您对数据进行分组时，能够以自己的方式自定义组标题和页脚的功能就变得至关重要。本文介绍的控件也考虑到了这一需求。如果您正在寻找 ASP.NET MVC 中的分组网格，请查看 ASP.NET MVC 中的 Gridview 分组。

下面是 GridView 中分组数据的屏幕截图

GroupGridView/screen1.png

GroupGridView 控件

GroupGridView 控件是派生自 GridView 的自定义控件。该控件的主要目的是在 GridView 中实现分组功能。为了适应自定义的组标题和页脚，创建了 GroupContainer 类，该类派生自 WebControl 和 INamingContainer。该类提供了各种聚合函数，可应用于 GridView 中的每个组。GroupHeaderTemplate 和 GroupFooterTemplate 中的有用方法是

  1. Average(ColumnName)：返回组中给定列数据的平均值
  2. Count(ColumnName)：返回组中给定列的总行数
  3. First(ColumnName)：返回组中给定列的第一个元素
  4. Last(ColumnName)：返回组中给定列的最后一个元素
  5. Max(ColumnName)：返回组中给定列数据的最大值
  6. Min(ColumnName)：返回组中给定列数据的最小值
  7. Sum(ColumnName)：返回组中给定列数据的总和
  8. GetValue(DataColumn, PropertyColumn, MatchingValue)：返回 DataColumn 中 PropertyColumn 等于 MatchingValue 的值

工作原理

在 GridView 中分组数据的逻辑可以分为三个部分

  1. 实例化 HeaderTemplate 模板： 为此，创建了一个自定义控件，具有两个公开属性：GroupHeaderTemplate 和 GroupFooterTemplate。此模板需要为 DataSource 中的每个组进行实例化。这通过重写 GridView 的 PrepareControlHierarchy() 方法来完成。
  2. 在正确的位置识别组并渲染组标题： 为了识别组，我重写了 GridView 的 OnRowCreated() 方法，并将“group”属性及其值添加到表的每一行。为了在正确的位置对齐 Header 和 Footer ，使用了 JQuery。
  3. 为组提供隐藏/显示功能： 使用 JQuery 为每个组提供了隐藏/显示功能。请查看 RenderClientSideGroup() 方法，以了解用于 FadeIn 和 FadeOut 组的 JQuery 代码。您无需学习 JQuery 即可使用此控件。

Using the Code

使用代码很简单。该控件提供了两个额外的模板容器：GroupHeaderTemplate 和 GroupFooterTemplate。这两个模板容器都为您提供了一个功能，可以编写自己的自定义 HTML 代码并使用聚合逻辑来格式化 GridView 每个组的 Header 和 Footer 。

GroupGridView/screen2.png

下面是您可以编写的用于使此控件工作的示例 aspx 标记（请不要忘记在代码中包含 JQuery 文件）

//Copy the GroupGridViewCtrl.dll to your bin directory. Add reference.//
<%@ Register Assembly="GroupGridViewCtrl" 
    Namespace="GroupGridViewCtrl" TagPrefix="gsoft" %>
...
<script type="text/javascript" language="javascript" 
    src="js/jquery-1.4.2.min.js"></script>
...
<gsoft:GroupGridView AllowGrouping="true" GroupColumnName="Year" 
...
<GroupHeaderTemplate>
    <div style="background-color:#ccddff;">
        <table style="width:100%;">
            <tr>
                <td style="width:50%; font-weight:bold;">
        <%# Container.GroupColumnName + ": " + 
            Container.GroupColumnData.ToString() %> </td>
                <td style="width:50%;">Total Students: 
            <%# Container.Count("Name") %></td>
            </tr>
            <tr>
                <td>Average Marks: <%# Math.Round((decimal)
            Container.Average("Marks"), 2) %></td>
                <td>Highest: <%# Container.Max("Marks") %></td>
            </tr>
            <tr>
                <td colspan="2">Topper: <%# Container.GetValue
        ("Name", "Marks", Container.Max("Marks").ToString())%></td>
            </tr>
        </table>
    </div>
</GroupHeaderTemplate>

为了使此控件工作，请不要忘记将 AllowGrouping 属性设置为 true。此外，GroupColumnName 属性必须设置为正确的值。

更多选项

根据读者的各种反馈/电子邮件，我在 GroupGridView 控件的此版本中包含了一些其他选项。其中一些如下

  • DefaultState：此控件现在有一个名为 DefaultState 的属性，该属性决定默认情况下是保持分组数据折叠还是展开。
  • 页面上的多个网格：当前版本的 GroupGridView 控件现在允许您在页面上同时使用多个 GroupGridView 控件。
  • EmptyGroupFooter：当不需要组页脚时，您现在可以简单地省略 GroupFooterTemplate 标签。
  • 分页：您可以在此控件中实现 GridView 的常规分页行为，但您需要了解，此控件只会对当前页的数据进行分组。如果您正在实现分页，则必须注意并理解组标题和页脚中使用的聚合函数的行为。
  • 在 Update Panel 中分组等：在上一个版本中，报告的一个问题是更新面板更新时分组行为会消失。在这种情况下，可以在 UpdatePanel 更新时调用 JavaScript 函数“ApplyGrouping_ + gridview 的 ClientId”，它将再次应用分组行为。当由于某些 JavaScript 错误或其他原因导致分组默认情况下不起作用时，您也可以使用上述函数来应用分组。
  • 客户端选项：根据读者的要求，我提供了从 JavaScript 展开/折叠 gridview 各个部分的功能。提供的示例代码演示了使用 JavaScript 展开/折叠标题、页脚和数据的示例代码。您可以自己探索更多。

关注点

除了在 GridView 中分组数据外，该示例还将为初学者提供以下内容

  1. 如何创建自定义控件
  2. 如何创建和使用模板/容器控件
  3. 如何从 Excel 工作表中读取数据
  4. 如何使用 Linq 过滤 DataTable 数据

历史

  • 2010 年 10 月 5 日：第一个版本发布
  • 2013 年 6 月 9 日：版本 1.1
  • 2013 年 6 月 12 日：版本 1.2：添加了客户端选项
© . All rights reserved.