使用jQuery實現GridView控件交互操作

洪偉珍

摘要：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”。

在本文實例中將使用jQuery的“#id”選擇器，選擇GridView對應的table標簽，但因控件是包含在母版中，id號已不再是“grv”，這里需要用到GridView控件的ClientID屬性獲取由 ASP.NET 生成的服務器控件標識符；使用“[attribute*=value]”選擇器，選擇TextBox對應的input標簽。

2 實現

如圖2，jQuery使用index（）方法獲取的是當前的行號，第一行為表頭，它的行索引值為0，但對于包含有TextBox控件的GridView，是從第二行開始的，因此行索引值是從1開始計算的。因此下一行的input標簽索引值為$（this）.parent（）.parent（）.index（），上一行的索引值為$（this）.parent（）.parent（）.index（））-2。

在aspx頁面中添加如下JQuery代碼，實現Web頁面的交互操作。

3 結語

通過jQuery實現GridView的交互操作，能夠在確保兼容的基礎上，使用簡潔的代碼實現相關功能。文中給出的程序代碼已在Vistual Studio2013開發環境使用C#語言驗證通過，并在多種瀏覽器中實現上述功能。

參考文獻：

[1]賀帆.基于模板列在GridView控件中完成數據添加[J].科學咨詢（科技·管理），2015（01）：44-45.

[2]馬元元.GridView中顯示/隱藏列及多重表頭的實現[J].電腦編程技巧與維護，2015（09）：10-11，34.

[3]顧正剛，畢海峰.對GridView控件高級應用的研究與實現[J].寧波職業技術學院學報，2008（02）.