杜慶平

（泰州職業(yè)技術(shù)學(xué)院，江蘇 泰州 225300）

基于DOM的網(wǎng)格樣式表單的設(shè)計(jì)與實(shí)現(xiàn)

杜慶平

（泰州職業(yè)技術(shù)學(xué)院，江蘇 泰州 225300）

目前的流行的web技術(shù)中，除了ASP.NET外，ASP、JSP和PHP中均不提供網(wǎng)格樣式表單控件。文章提供了一種根據(jù)DOM規(guī)范，采用JavaScript技術(shù)實(shí)現(xiàn)網(wǎng)格樣式表單的方法，并在數(shù)據(jù)的增、刪、改、查、存等操作方面進(jìn)行了詳細(xì)的描述。滿足了利用ASP、JSP和PHP技術(shù)開(kāi)發(fā)B/S結(jié)構(gòu)的業(yè)務(wù)處理型系統(tǒng)中對(duì)網(wǎng)格樣式表單的要求。

表單；DOM；JavaScript

Web應(yīng)用程序中使用表單主要是為了實(shí)現(xiàn)瀏覽者與服務(wù)器的交互，常見(jiàn)的表單樣式如圖1所示。但在業(yè)務(wù)處理型系統(tǒng)如MIS等，如果采用這種樣式的界面，用戶操作起來(lái)很不方便，普遍采用如圖2示所示的網(wǎng)格樣式的界面。在C/S模式的軟件系統(tǒng)中，開(kāi)發(fā)工具普遍提供這樣的控件，如PowerBuilder 中的DataWindow控件。但在是B/S模式的軟件系統(tǒng)中，目前web開(kāi)發(fā)技術(shù)中，只有ASP.NET中提供GridView控件，而ASP、JSP和PHP均沒(méi)有此類控件。下面給出了一種根據(jù)DOM規(guī)范，采用JavaScript技術(shù)實(shí)現(xiàn)網(wǎng)格樣式表單的方法。

1 設(shè)計(jì)方法

HTML DOM[1]把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。HTML DOM定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法。HTML元素同它們包含的文本及屬性都可以通過(guò)DOM訪問(wèn)。一個(gè)元素的內(nèi)容可以被修改或刪除以及創(chuàng)建新元素。Javascript語(yǔ)言的特點(diǎn)使它成為了DOM腳本程序設(shè)計(jì)的最佳選擇。

網(wǎng)格樣式表單的設(shè)計(jì)方法就是通過(guò)使用JavaScript，來(lái)重構(gòu)HTML文檔?？梢蕴砑?、移除頁(yè)面上的表單項(xiàng)目而達(dá)到要求的效果。

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

數(shù)據(jù)操作一般為增、刪、改、查、存等操作。下面以圖2所示的數(shù)據(jù)處理界面為例，說(shuō)明如何在網(wǎng)格樣式表單上實(shí)現(xiàn)上述操作。

（1）查詢數(shù)據(jù)。所謂查詢數(shù)據(jù)也就是歷史數(shù)據(jù)檢索。由于網(wǎng)格中有些字段的編輯采用的是單選鈕、復(fù)選框、下拉列表等控件，這些控件所綁定的數(shù)據(jù)一般來(lái)自后臺(tái)數(shù)據(jù)庫(kù)，因此歷史數(shù)據(jù)的HTML代碼，可以由服務(wù)器端代碼生成，供前臺(tái)代碼使用。用一個(gè)整數(shù)據(jù)i來(lái)表示當(dāng)前的行數(shù)，并輸出到前臺(tái)JavaScript代碼段中,每行的標(biāo)簽的ID值和的name值均采用字符串加i的形式，以便于表單提交后的數(shù)據(jù)保存操作。示例代碼如下：

（2）增加數(shù)據(jù)。增加數(shù)據(jù)的處理方法為構(gòu)造新行的HTML代碼字符串，并加入到兩標(biāo)簽中間原來(lái)的HTML代碼后面即可。示例代碼如下：

上面第三步代碼要注意瀏覽器差別，這主要是IE在對(duì)innerHTML進(jìn)行寫(xiě)操作的時(shí)候會(huì)檢查element是否具備做為這些內(nèi)容中htm l對(duì)象容器的要求，如果發(fā)現(xiàn)錯(cuò)誤出現(xiàn)，嘗試把容器改成那些比較“包容”的標(biāo)簽，如,。

（3）修改數(shù)據(jù)。這一操作無(wú)須編寫(xiě)代碼，直接在界面上修改。

（4）刪除數(shù)據(jù)。刪除有兩種處理方法：一種是將所要的行節(jié)點(diǎn)從表格中刪除，另一種是將該行節(jié)點(diǎn)的顯示屬性設(shè)為不可見(jiàn)。建議使用后一種方式，這樣既避免了對(duì)文檔結(jié)構(gòu)的調(diào)整，又可以輕松實(shí)現(xiàn)恢復(fù)刪除的功能。在代碼實(shí)現(xiàn)上只須通過(guò)循環(huán)步驟，判斷哪些行的刪除字段列的復(fù)選框是否被選中。如果選中，將其所在的顯示屬性改為none即可。

（5）保存數(shù)據(jù)。數(shù)據(jù)的保存和普通的表單操作一樣，根據(jù)兩個(gè)隱藏域的value屬性值來(lái)確定接收表單元素的名稱和數(shù)量。

3 結(jié)語(yǔ)

這里主要描述了基于DOM，采用javascript實(shí)現(xiàn)的網(wǎng)格樣式表單的設(shè)計(jì)和實(shí)現(xiàn)方法,對(duì)于這類相似問(wèn)題,提供了解決的辦法。如果在應(yīng)用系統(tǒng)中不采用FORM的同步提交方式，而采用異步提交方式，只須將FORM標(biāo)簽去除即可，使用AJAX[2]技術(shù)進(jìn)行提交保存。

[1] 上海贏科投資公司.HTML DOM 教程[DB/OL].[2009-08-01]. http://www.w3school.com.cn/htm ldom/index.asp.

[2] 上海贏科投資公司.HTML DOM 教程[DB/OL].[2009-08-01]. http://www.w3school.com.cn/ajax/index.asp.

Design and Realization of Grid-Style Form Based on DOM

DU Qing-ping
(Taizhou Polytechnic College,Taizhou Jiangsu 225300,China)

Except ASP.NET, there aren’t grid-style form controls in current web technique such as ASP、JSP and PHP at present. This paper provides a solution based on DOM to realize it by javascript, introduces in detail on operation such as insertion、deletion、updating and selection on the form, This solution meets the requirement of Grid-Style Form in the application developed by ASP、JSP and PHP.

form; DOM; JavaScript

TP311

A

1671-0142(2010)01-0007-02

杜慶平(1975-),男,江蘇姜堰人,高級(jí)工程師,系統(tǒng)分析師.

（責(zé)任編輯 施 翔）