使用jQuery實(shí)現(xiàn)GridView控件交互操作

洪偉珍

摘要：GridView作為ASP.NET中常用的數(shù)據(jù)綁定控件，具有顯示、編輯和刪除多種不同數(shù)據(jù)源中的數(shù)據(jù)，但針對(duì)Web頁(yè)面的交互操作，如使用鍵盤方向鍵切換單元格等，GridView控件并不支持，本文提出了使用JQuery實(shí)現(xiàn)GridView交互操作的思路，并給出實(shí)現(xiàn)方式。

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.

關(guān)鍵詞：GridView控件；jQuery；交互

Key words： GridView widget；jQuery；alternation

中圖分類號(hào)：TP311.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1006-4311（2016）35-0168-02

0 引言

在Web應(yīng)用程序中，表格的使用可以說是無處不在，因此GridView作為ASP.NET中以網(wǎng)格方式呈現(xiàn)數(shù)據(jù)的數(shù)據(jù)綁定控件被廣泛應(yīng)用；jQuery 是一個(gè)“寫的更少，但做的更多”的輕量級(jí) JavaScript 庫(kù)，在頁(yè)面的交互操作腳本中具有支持多瀏覽器及語(yǔ)言簡(jiǎn)潔的特點(diǎn)。通過jQuery來實(shí)現(xiàn)GridView的交互操作，能提高Web應(yīng)用程序的兼容性，同時(shí)降低開發(fā)的難度。

1 分析

GridView控件通過Web服務(wù)器解析后，以HTML代碼的方式傳輸給客戶端。因此在服務(wù)器端編寫的jQuery腳本，實(shí)現(xiàn)GridView控件交互操作，關(guān)鍵點(diǎn)是使用jQuery 選擇器準(zhǔn)確地選取您希望應(yīng)用效果的元素。

圖1是一個(gè)包含在母版頁(yè)中的GridView控件，控件每行具有兩個(gè)TextBox控件，用于錄入成績(jī)，為了方便成績(jī)的輸入，使用JQuery實(shí)現(xiàn)類似Excel單元格選取與輸入的功能，即通過鍵盤的方向鍵實(shí)現(xiàn)文本框的選取，回車則跳轉(zhuǎn)到下一行的文本框中。

圖1的部分aspx頁(yè)面代碼如下。

……

……

……

如上代碼，GridView的id為“grv”，其中包含的兩個(gè)TextBox控件的id分別為“tx_qzcj”和“tx_qmcj”，在服務(wù)器端運(yùn)行后傳輸給客戶端的部分HTML代碼如下。

……

GridView控件被轉(zhuǎn)換為table標(biāo)簽，TextBox控件被轉(zhuǎn)換為type為text的input標(biāo)簽，由于GridView是包含在母版頁(yè)中的，因此它的id號(hào)被轉(zhuǎn)換為“ctl00_ContentPlaceHolder1_grv”，而TextBox的標(biāo)簽被分別轉(zhuǎn)換為“ctl00_ContentPlaceHolder1_grv_ctl02_tx_qzcj”和“ctl00_ContentPlaceHolder1_grv_ctl02_tx_qmcj”。

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

2 實(shí)現(xiàn)

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

在aspx頁(yè)面中添加如下JQuery代碼，實(shí)現(xiàn)Web頁(yè)面的交互操作。

3 結(jié)語(yǔ)

通過jQuery實(shí)現(xiàn)GridView的交互操作，能夠在確保兼容的基礎(chǔ)上，使用簡(jiǎn)潔的代碼實(shí)現(xiàn)相關(guān)功能。文中給出的程序代碼已在Vistual Studio2013開發(fā)環(huán)境使用C#語(yǔ)言驗(yàn)證通過，并在多種瀏覽器中實(shí)現(xiàn)上述功能。

參考文獻(xiàn)：

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

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

[3]顧正剛，畢海峰.對(duì)GridView控件高級(jí)應(yīng)用的研究與實(shí)現(xiàn)[J].寧波職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2008（02）.