基于DOM的網格樣式表單的設計與實現

杜慶平

（泰州職業技術學院，江蘇 泰州 225300）

基于DOM的網格樣式表單的設計與實現

杜慶平

（泰州職業技術學院，江蘇 泰州 225300）

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

表單；DOM；JavaScript

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

1 設計方法

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

網格樣式表單的設計方法就是通過使用JavaScript，來重構HTML文檔。可以添加、移除頁面上的表單項目而達到要求的效果。

2 實現方法

數據操作一般為增、刪、改、查、存等操作。下面以圖2所示的數據處理界面為例，說明如何在網格樣式表單上實現上述操作。

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

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

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

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

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

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

3 結語

這里主要描述了基于DOM，采用javascript實現的網格樣式表單的設計和實現方法,對于這類相似問題,提供了解決的辦法。如果在應用系統中不采用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-),男,江蘇姜堰人,高級工程師,系統分析師.

（責任編輯 施 翔）