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

基于GridView控件仿EXCEL格式显示数据的网页制作谭东清海南职业技术学院 海南 海口 570216摘要： 本文通过一个实用的网页实例，深入探讨ASP.NET的GridView控件模仿EXCEL格式显示数据的网页制作思路与实现过程，介绍了GridView控件在冻结窗格、合并单元格、自动编号和自定义分页控件等功能的编程技巧。关键词 GridView、冻结窗格、合并单元格、自动编号imitation EXCEL format data Webpage making based on GridView controltan dong qingHainan College of Vocation and Technique Hainan Haikou 570216Abstract： In this paper, by a practical example Webpage, in-depth study ASP.NET 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 numbering1 引言GridView是ASP.NET中功能强大的数据绑定控件，它可以让用户按照自己的需要控制数据的显示格式，除了控件自身提供的排序、更新和删除数据缓存等功能外，还可以通过手动编码的形式实现GridVeiw控件的高级数据绑定。为了更好的推进顶岗实习工作,实现对顶岗实习的有效管理，我根据经济管理学院的要求开发了一个顶岗实习管理系统，通过该系统实现对学生的顶岗实习的各项数据收集、统计和分析，提高了学生顶岗实习管理的质量。下面通过该系统中的学生实习报告查阅页面，深入解析使用GridView控件仿EXCEL格式呈现数据的方法与实现，对ASP.NET的开发者具有一定的参考价值。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 = SessionBaoGao_ChaXun.ToString(); DataSet MyDataNum = DbHelperSql.GetDataSet(ChaXun_str); int totalNum = MyDataNum.Tables0.Rows.Count; PagedDataSource pds = new PagedDataSource(); pds.AllowPaging = true; pds.PageSize = AspNetPager1.PageSize; pds.CurrentPageIndex = AspNetPager1.CurrentPageIndex - 1; DataSet MyData1 = DbHelperSql.GetDataSet(ChaXun_str); pds.DataSource = MyData1.Tables0.DefaultView;AspNetPager1.RecordCount = totalNum;本页面数据读取主要是根据班级列表控件的值作为参数进行查询，将查询语句先赋值给SessionBaoGao_ChaXun变量再赋给字符串变量ChaXun_str，然后再在方法中传递变量，如DbHelperSql.GetDataSet(ChaXun_str)，其目的是避免翻页时，查询语句参数值（如班级列表控件的值）发生变化而使得查询到的数据不正确。另外，使用AspNetPager自定义分页控件，代码中还需要有AspNetPager1_PageChanged(object src, EventArgs e)这个方法，否则程序就会报错。4.3 合并单元格对于模仿Excel格式显示网页信息的其中一个主要表现就是对GridView控件的头部进行了合并单元格和单元格背景颜色设置，这个功能是通过GridView_RowCreated（）事件编程实现的。从图2上来看，报告信息表头由2行组成，其中第一行每一次报告的单元格是合并了3个小的单元格，而且单元格之间的颜色交替变换。两个GridView控件创建头部的方法相似，这里以GridView2_RowCreated( )为例讲讲学生报告信息表头的创建方法。图2 报告信息表头在GridView2_RowCreated( )事件中首先使用switch ( )函数的case语句判断如果是创建GridView控件的标题行，则创建一个单元格集合tcHeader。即“TableCellCollection tcHeader = e.Row.Cells;”语句。然后再用2个for循环语句生成头部单元格。第1个for循环语句条件是从n=0开始到6结束，共7个单元格，存放7次报告的标题，即本实例网页共显示学生提交的报告数是7次。if函数中的条件n%2=0是为了判定新增加的单元格的奇偶数，以便给他们设置不同的背景颜色。当条件n=6时是第一行的最后一个单元格，需要另外单独设置行结束标签，即给该单元格设置有别于其它单元格的属性，语句是tcHeadern.Text = 总结报告，因此嵌套一个if函数判断如果是第一行第6个单元格，则设置该单元格Text属性为总结报告。另外由于单元格集合tcHeader的第一个单元格是从tcHeader0开始的，但报告标题的序号是用“第1、2次报告”表示的，所以用一个变量m来表示报告序号，其中m=n+1，相关语句是tcHeadern.Text = 第 + m + 次报告。第2个for函数的语句是生成第二行的单元格，i从7开始是因为接着第一行的第6个单元格继续的。第二行共21个单元格，每3个一组，因此该for函数的条件设置为“i = 7; i = 27; i=i+3 ”，每3组的文本属性相同，背景颜色设置为交替变换的颜色。GridView2_RowCreated()事件代码如下所示：protected void GridView2_RowCreated(object sender, GridViewRowEventArgs e) switch (e.Row.RowType) case DataControlRowType.Header: TableCellCollection tcHeader = e.Row.Cells; tcHeader.Clear(); int n,m; for (n = 0; n = 6; n+) m = n + 1; if(n%2=0 & n !=6) tcHeader.Add(new TableHeaderCell(); tcHeadern.Attributes.Add(colspan, 3); tcHeadern.Text = 第 + m + 次报告; tcHeadern.Attributes.Add(bgcolor, LightSteelBlue); tcHeadern.Attributes.Add(height, 22px); else if(n=6) tcHeader.Add(new TableHeaderCell(); tcHeadern.Attributes.Add(colspan, 3); tcHeadern.Attributes.Add(bgcolor, DarkSeaGreen); tcHeadern.Text = 总结报告; else tcHeader.Add(new TableHeaderCell(); tcHeadern.Attributes.Add(colspan, 3); tcHeadern.Text = 第 + m + 次报告; tcHeadern.Attributes.Add(bgcolor, DarkSeaGreen); int i; for (i = 7; i = 27; i=i+3) tcHeader.Add(new TableHeaderCell(); tcHeaderi.Attributes.Add(bgcolor, DarkSeaGreen); tcHeaderi.Attributes.Add(height, 22px); tcHeaderi.Text = 提交时间; tcHeader.Add(new TableHeaderCell(); tcHeaderi+1.Attributes.Add(bgcolor, LightSteelBlue); tcHeaderi+1.Text = 教师查阅; tcHeader.Add(new TableHeaderCell(); tcHeaderi+2.Attributes.Add(bgcolor, DarkSeaGreen); tcHeaderi+2.Text = 报告内容; break; 4.4 自动递增编号由于显示学生实习报告信息时，需要对GridView表格增加一列自动递增的序列号，以方便识别班级学生的序号。要实现这一功能，首先在 GridView 1第一列加入一个 TemplateField，并在 TemplateField 的 ItemTemplate 中加入一个 Label控件。然后在给 GridView 绑定数据的bind()方法中，通过如下for语句给Label 控件设置序号，代码如下：for (j = 0; j = GridView1.Rows.Count - 1; j+) Label lbl2 = (Label)GridView1.Rowsj.FindControl(Label1); lbl2.Text = (pds.Cur