基于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-),男,江苏姜堰人,高级工程师,系统分析师.

（责任编辑 施 翔）