ASP.NET MVC 中分组 Gridview

• 下载源代码 - 1.8 MB

引言

如今，在 Gridview 中分组数据正变得越来越重要的 UI 功能。在 ASP.NET MVC 中，您需要完全控制 HTML，因此许多人不愿使用第三方控件。开发人员通常使用简单的 for 循环来显示表格/网格，以便他们可以轻松地根据自己的需求进行自定义。本文将通过直接在视图中编码的方式，为您提供一种简化的 Gridview 数据分组方法。您还可以根据需要将自定义数据放入组的标题和页脚中。此外，我还展示了如何使用 JQuery 来实现展开/折叠行为的示例。我使用了 Razor 视图引擎，但同样的方法也适用于所有其他视图引擎。

下面是分组后的 Gridview 外观的屏幕截图

背景

这种方法使用 Linq 的 group by 来分组 Gridview 源中的数据，然后使用常规的循环以所需的格式显示数据。JQuery 已用于客户端自定义行为。对于 UI 的外观和感觉，使用了默认的 Bootstrap。在附加的代码中，提供了 4 个不同的视图，以便逐步深入到最终的网格，这样初学者就不会发现理解概念有困难。

Using the Code

使用代码很简单。只需查看视图（.cshtml 文件），其中使用了 Linq GroupBy 查询来分组模型。然后，我们遍历了组，再遍历了组内的每个数据。

用于分组的基本代码如下所示

@foreach(var group in Model.GroupBy(x=>x.Company))
    {
        <tr class="group-header">
            <td colspan="6">
                <span class="h3">@group.Key</span>
            </td>
        </tr>
        foreach (var item in group)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Designation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Department)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Company)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Year)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Salary)
                </td>
            </tr>
        }
        <tr class="group-footer">
            <td colspan="6">
                <span class="label label-info">Company: @group.Key</span>
                <span class="label label-success">Total Employee: @group.Count()</span>
                <span class="label label-primary">Avg Salary: 
                       @group.Average(x => x.Salary).ToString("C")</span>
            </td>
        </tr>
    }  

在上面的代码中，首先，我们基于需要分组的字段创建一个组。然后，循环遍历每个组，其中包含生成组标题和页脚作为表格行的代码。然后，我们实现了一个嵌套的 foreach 循环，以遍历组中的每个项目并显示数据。在组标题和页脚中，您可以实现任何自定义逻辑并以任何格式显示数据。在此示例中，我们演示了基本的 Linq 操作，如页脚中的总计数和平均值。您也可以在标题中显示相同的内容。

样式和脚本

上面的代码将在浏览器中显示分组的数据，但要添加展开/折叠功能，需要一点 JQuery。

展开/折叠的代码如下所示

$(function () {
        $('.group-header').click(function () {
            $(this).nextUntil('.group-header').toggle();
        });
    }); 

在此代码中，我们只是处理每个组标题的单击事件。由于在网格的每个表头行都分配了一个名为 'group-header' 的类，因此我们可以使用此选择器来切换该组的显示。

除了上述内容，您还可以实现各种其他样式或脚本行为，例如

• 展开/折叠所有标题
• 切换所有标题/页脚
• 展开/折叠所有数据等。

为行添加索引

只需 2-3 行 JQuery 代码即可为网格中的每行添加索引。下面的代码演示了这一点

function addPaging() {
        $('#employeeGrid tr:first').prepend('<th style="width:60px;">S. No.</th>');
        $('#employeeGrid tr:not(:first, .group-header, .group-footer)').each(function (index) {
            $(this).prepend('<td class="text-right">' + (index + 1) + '.</td>');
        });
    }

函数的最后一行将一个 th（表头列）标签添加到网格表的第一个行。接下来的代码循环遍历 HTML 表的每一行，并在每行（tr 标签）前面添加一个新的 td 标签，并应用索引。请查看附加代码中的“示例网格”页面，以实际查看效果。

关注点

除了在 MVC 中分组 Gridview 数据之外，该代码还充当了一个示例，演示如何从 Excel 中读取数据并使用泛型填充模型。要读取 Excel 数据，使用了 nuget 包 'EPPlus'。

结论

由于您使用原始 HTML 来生成网格，因此您的自由度是无限的。您可以根据需要自定义您的网格。如果您正在使用任何第三方控件，您可能无法获得高度的灵活性。

在我看来，如果时间允许且您优先考虑性能，请使用原生方法。否则，市场上有许多 MVC 网格工具（付费和免费的）可以帮助您快速开发应用程序。

历史

• 2014 年 4 月 19 日：创建第一个版本