洪伟珍

摘要：GridView作为ASP.NET中常用的数据绑定控件，具有显示、编辑和删除多种不同数据源中的数据，但针对Web页面的交互操作，如使用键盘方向键切换单元格等，GridView控件并不支持，本文提出了使用JQuery实现GridView交互操作的思路，并给出实现方式。

Abstract： As a commonly used data binding control in ASP.NET， GridView can display， edit and delete data in many different data sources. But for the interactive operation of the Web page， GridView widget can not switch cells by the keyboard keys. This paper puts forward the idea of using JQuery to realize the interactive operation of GridView， and gives the way to realize it.

关键词：GridView控件；jQuery；交互

Key words： GridView widget；jQuery；alternation

中图分类号：TP311.1 文献标识码：A 文章编号：1006-4311（2016）35-0168-02

0 引言

在Web应用程序中，表格的使用可以说是无处不在，因此GridView作为ASP.NET中以网格方式呈现数据的数据绑定控件被广泛应用；jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库，在页面的交互操作脚本中具有支持多浏览器及语言简洁的特点。通过jQuery来实现GridView的交互操作，能提高Web应用程序的兼容性，同时降低开发的难度。

1 分析

GridView控件通过Web服务器解析后，以HTML代码的方式传输给客户端。因此在服务器端编写的jQuery脚本，实现GridView控件交互操作，关键点是使用jQuery 选择器准确地选取您希望应用效果的元素。

图1是一个包含在母版页中的GridView控件，控件每行具有两个TextBox控件，用于录入成绩，为了方便成绩的输入，使用JQuery实现类似Excel单元格选取与输入的功能，即通过键盘的方向键实现文本框的选取，回车则跳转到下一行的文本框中。

图1的部分aspx页面代码如下。

……

……

……

如上代码，GridView的id为“grv”，其中包含的两个TextBox控件的id分别为“tx_qzcj”和“tx_qmcj”，在服务器端运行后传输给客户端的部分HTML代码如下。

……

GridView控件被转换为table标签，TextBox控件被转换为type为text的input标签，由于GridView是包含在母版页中的，因此它的id号被转换为“ctl00_ContentPlaceHolder1_grv”，而TextBox的标签被分别转换为“ctl00_ContentPlaceHolder1_grv_ctl02_tx_qzcj”和“ctl00_ContentPlaceHolder1_grv_ctl02_tx_qmcj”。