Giới thiệu
GridView là một trong những điều khiển phổ biến nhất để hiển thị dữ liệu trong bảng. Nhưng để phân tích tốt hơn, nó đòi hỏi hiển thị các dữ liệu trong một số Form tóm tắt như Group, Pivot, đồ thị, biểu đồ,... bài viết này trình bày cách đơn giản để nhóm dữ liệu với chức năng tổng hợp thích hợp để bạn có thể nâng cao báo cáo một cách dễ dàng. Cơ sở để tùy chỉnh các tiêu đề và chân trang nhóm theo cách riêng của bạn trở thành một phần thiết yếu khi bạn đang nhóm dữ liệu.
Dưới đây là ảnh chụp màn hình của dữ liệu được nhóm trong GridView:
Control GroupGridView
Control GroupGridView là một điều khiển tùy chỉnh có nguồn gốc từ GridView. Mục đích chính là để thực hiện các tính năng nhóm trong GridView. Để thích ứng với tiêu đề nhóm tùy chỉnh và chân trang, lớp GroupContainer được tạo ra có nguồn gốc từ WebControl và INamingContainer. Lớp này được cung cấp với chức năng tổng hợp khác nhau có thể được áp dụng cho mỗi nhóm trong GridView. Các phương thức hữu ích trong GroupHeaderTemplate và GroupFooterTemplate là:
Average(ColumnName): Trả về trung bình hiện tại dữ liệu trong nhóm cho cột
Count(ColumnName): Trả về tổng số hàng hiện tại trong nhóm cho cột
First(ColumnName): Trả về phần tử đầu tiên của cột được đưa ra trong nhóm
Last(ColumnName): Trả về phần tử cuối cùng của cột được đưa ra trong nhóm
Max(ColumnName): Trả về giá trị tối đa của dữ liệu hiện tại trong nhóm cho cột
Min(ColumnName): Trả về giá trị nhỏ nhất của hiện tại dữ liệu trong nhóm cho cột
Sum(ColumnName): Trả về tổng các dữ liệu hiện tại trong nhóm cho cột
GetValue(DataColumn, PropertyColumn, MatchingValue): Trả về giá trị của DataColumn có PropertyColumn bằng với MatchingValue
Cách thức hoạt động
Đằng sau nhóm dữ liệu trong GridView có thể được chia thành ba phần:
1. Khởi tạo các mẫu HeaderTemplate: Để làm điều này, điều khiển tùy chỉnh đã được tạo ra với hai đặc tính tiếp xúc: GroupHeaderTemplate và GroupFooterTemplate. Mẫu này cần phải được khởi tạo cho mỗi nhóm hiện tại trong DataSource. Điều này đã được thực hiện bằng cách ghi đè các phương thức PrepareControlHierarchy() của GridView .
2. Nhận dạng nhóm và Render Nhóm tiêu đề ở vị trí thích hợp: nhận dạng nhóm, tôi có ghi đè phương thức OnRowCreated() của GridView và thêm vào thuộc tính "group" và giá trị của nó cho mỗi hàng của bảng. Để sắp xếp Header và Footer ở nơi thích hợp, JQuery đã được sử dụng.
3. Cung cấp chức năng Ẩn/Hiện cho nhóm: Các chức năng ẩn/hiển thị cho từng nhóm đã được cung cấp sử dụng JQuery. Hãy có một cái nhìn trên phương thức RenderClientSideGroup() để hiểu được mã JQuery sử dụng FadeIn và FadeOut. Bạn không cần phải học JQuery để sử dụng điều khiển này.
Cách sử dụng Mã
Sử dụng mã rất đơn giản. Control được cung cấp thêm hai container mẫu: GroupHeaderTemplate và GroupFooterTemplate. Cả hai container Template cung cấp các thiết bị để viết riêng code HTML tuỳ chỉnh và sử dụng tập hợp logic đến Format Header và Footer của mỗi nhóm GridView.
Dưới đây là các mẫu aspx mà bạn có thể làm công việc với Control(không quên bao gồm file jQuery trong mã):
//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> Để sử dụng control này, không quên thiết lập thuộc tính AllowGrouping là true. Hơn nữa, thuộc tính GroupColumnName phải được thiết lập với giá trị chính xác.