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

基于GridView控件仿EXCEL格式显示数据的网页制作 谭东清 海南职业技术学院 海南 海口 570216 摘要： 本文通过一个实用的网页实例，深入探讨ASP.NET的GridView控件模仿EXCEL格式显示数据的网页制作思路与实现过程，介绍了GridView控件在冻结窗格、合并单元格、自动编号和自定义分页控件等功能的编程技巧。 关键词 GridView、冻结窗格、合并单元格、自动编号 imitation EXCEL format data Webpage making based on GridView control tan dong qing Hainan College of Vocation and Technique Hainan Haikou 570216 Abstract： 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 numbering 1 引言 GridView是ASP.NET中功能强大的数据绑定控件它可以用户按自己的需要控制数据的显示格式除了控件自身提供的排序更新和删除数据缓存功能外还可以通过手动编码的形式实现GridVeiw控件的高级数据绑定 为了更好的推进顶岗实习工作,实现对顶岗实习的有效管理，开发顶岗实习管理系统，实现对。。 本文制作的查阅学生实习报告的网页效果如图1所示，网页浏览效果类似于EXCEL的冻结窗格功能，即将报告列表的左边两列固定，剩下的右边列内容通过滚动条移动查看，点击翻页时，数据序号自动按顺序递增编号，每一次报告标题都合并了相关的数据单元格，使得数据结构清晰，查阅非常方便。 图1 网页实例 3 设计思路 要实现以上网页数据浏览的功能，需求对GridView控件应用有比较深入的了解，本实例的设计思路如下： 类似EXCEL的冻结窗格功能是通过两个GridView控件来实现的。 为了提高代码的重用性和易用性，网页采用了编写代码的方式将数据库数据绑定到GridView控件。 为了增强GridView控件的分页功能和能更方便的通过样式美化分页按钮，网页使用了第三方分页控件AspNetPager。该控件相对来说使用简单，不需要编写复杂的分页代码，而且功能齐全。 通过TableHeaderCell类实现合并单元格的编程技巧。 由于默认的GridView控件显示信息时无法给绑定的数据行自动编号，所以给GridView控件添加一个模板列，在该模板列插入一个Lable控件，通过代码编程给Lable控件赋值实现数据行自动编号。 4 技术实现 4.1 页面设计 在xueshengbaogao.aspx网页文件中，主要的网页设计对象是GridView控件和自定义分布控件。 首先添加两个GridView控件，一个控件显示“序号和姓名”两列，另一个控件显示剩余的列数据。将两个GridView控件分别放在两个div标签中。通过设置GridView控件的大小和给这两个div标签设置相应的样式，即可实现“序号和姓名”两列数据位置固定，其它的列可通过滚动条查看的效果。两个div标签的样式设置如下： #xsbb_left {float: left;width: 100px;margin-right:0px} #xsbb_right {overflow: auto; float: left;width: 920px; margin-left:0px} 然后添加自定义分页控件。如果分页控件事先已添加到控件选项卡，则从控件选项卡将分页控件图标拖放到GridView控件下面，将网页切换到源代码视图，把新添加的分页控件代码修改成如下代码，再设置样式，即可得到很美观的分页按钮效果。 webdiyer:aspnetpager id=AspNetPager1 runat=server horizontalalign=Center CssClass=anpager CurrentPageButtonClass=cpb