基于GridView控件仿EXCEL格式显示数据的网页制作

基于GridView控件仿EXCEL格式显示数据的网页制作

谭东清

海南职业技术学院海南海口570216

摘要：本文通过一个实用的网页实例，深入探讨的GridView控件模仿EXCEL格式显示数据的网页制作思路与实现过程，介绍了GridView控件在冻结窗格、合并单元格、自动编号和自定义分页控件等功能的编程技巧。

关键词GridView、冻结窗格、合并单元格、自动编号

imitation EXCEL format data Webpage making based on GridView control

tan dong qing

Hainan College of V ocation and Technique Hainan Haikou 570216

Abstract：In this paper, by a practical example Webpage, in-depth study GridView controls to imitate EXCEL format data Webpage making ideas and implementation process, introduces the GridView control in the freeze panes, merge cells, the automatic numbering and custom paging controls functional programming skills. Keywords：GridView control, freeze panes, merge cells, Automatic numbering

1 引言

GridView是中功能强大的数据绑定控件，它可以让用户按照自己的需要控制数据的显示格式，除了控件自身提供的排序、更新和删除数据缓存等功能外，还可以通过手动编码的形式实现GridVeiw控件的高级数据绑定。

为了更好的推进顶岗实习工作,实现对顶岗实习的有效管理，我根据经济管理学院的要求开发了一个顶岗实习管理系统，通过该系统实现对学生的顶岗实习的各项数据收集、统计和分析，提高了学生顶岗实习管理的质量。下面通过该系统中的学生实习报告查阅页面，深入解析使用GridView控件仿EXCEL格式呈现数据的方法与实现，对的开发者具有一定的参考价值。

2 网页效果

本文制作的查阅学生实习报告的网页效果如图1所示，网页浏览效果类似于EXCEL的冻结窗格功能，即将报告列表的左边两列固定，剩下的右边列内容通过滚动条移动查看，点击翻页时，数据序号自动按顺序递增编号，每一次报告标题都合并了相关的数据单元格，使得数据结构清晰，查阅非常方便。

图1 网页实例

3 设计思路

要实现以上网页数据浏览的功能，需求对GridView控件应用有比较深入的了解，本实例的设计思路如下：

(1).类似EXCEL的冻结窗格功能是通过两个GridView控件来实现的。

(2).为了提高代码的重用性和易用性，网页采用了编写代码的方式将数据库数据绑定到GridView控件。

(3).为了增强GridView控件的分页功能和能更方便的通过样式美化分页按钮，网页使用了第三方分页控

件AspNetPager。该控件相对来说使用简单，不需要编写复杂的分页代码，而且功能齐全。

(4).通过TableHeaderCell类实现合并单元格的编程技巧。

(5).由于默认的GridView控件显示信息时无法给绑定的数据行自动编号，所以给GridView控件添加一

个模板列，在该模板列插入一个Lable控件，通过代码编程给Lable控件赋值实现数据行自动编号。

4 技术实现

4.1 页面设计

在xueshengbaogao.aspx网页文件中，主要的网页设计对象是GridView控件和自定义分布控件。

首先添加两个GridView控件，一个控件显示“序号和姓名”两列，另一个控件显示剩余的列数据。将两个GridView控件分别放在两个

标签中。通过设置GridView控件的大小和给这两个

标签设置相应的样式，即可实现“序号和姓名”两列数据位置固定，其它的列可通过滚动条查看的效果。两个

标签的样式设置如下：

#xsbb_left {float: left;width: 100px;margin-right:0px}

#xsbb_right {overflow: auto; float: left;width: 920px; margin-left:0px}

然后添加自定义分页控件。如果分页控件事先已添加到控件选项卡，则从控件选项卡将分页控件图标拖放到GridView控件下面，将网页切换到源代码视图，把新添加的分页控件代码修改成如下代码，再设置样式，

即可得到很美观的分页按钮效果。

4.2 分页数据绑定

在xueshengbaogao.aspx.cs代码文件中，为了增强GridView控件的分页功能，使用了AspNetPager自定义分页控件与之配合使用，因此在给GridView控件绑定数据时需要用到PagedDataSource 类。PagedDataSource 类封装了允许数据源控件执行分页操作的属性。在数据绑定过程中，DataSet数据源首先将数据赋给PagedDataSource，然后再由PagedDataSource将数据赋给GridView控件，PagedDataSource对

象充当一个数据中转站。数据绑定主要代码如下所示：

string ChaXun_str = Session["BaoGao_ChaXun"].ToString();

DataSet MyDataNum = DbHelperSql.GetDataSet(ChaXun_str);

int totalNum = MyDataNum.Tables[0].Rows.Count;

PagedDataSource pds = new PagedDataSource();

pds.AllowPaging = true;