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

杜慶平

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

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

杜慶平

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

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

表單；DOM；JavaScript

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

1 設計方法

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

網(wǎng)格樣式表單的設計方法就是通過使用JavaScript，來重構HTML文檔?？梢蕴砑?、移除頁面上的表單項目而達到要求的效果。

2 實現(xiàn)方法

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

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

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

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

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

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

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

3 結語

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

[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-),男,江蘇姜堰人,高級工程師,系統(tǒng)分析師.

（責任編輯 施 翔）