CN109669693A - 一种基于动态页面生成表单页面的方法及系统 - Google Patents

Abstract

本发明公开了一种基于动态页面生成表单页面的方法，所述方法包括：预设控件的事件；监听所述控件的事件，当监听到所述控件有事件发生时，按照表单页面的样式，根据响应的所述事件配置表单页面的控件；通过所述控件的属性配置页面，配置所述控件的属性，获取所有控件的属性的属性数据，将所述属性数据映射为Map类型的数据，将所述Map类型的数据作为参数传到所述控件属性的配置页面；创建自定义表单列表页面。本发明提供的自定义表单实现方法，解决了企业信息化和办公自动化中表单业务多样化的需求，用户可以自己去定义表单内容。自定义表单的风格样式也和其他动态页面的样式保持一致，保证了用户体验的一致性。

Description

一种基于动态页面生成表单页面的方法及系统

技术领域

本发明涉及表单制作领域，更具体地，涉及一种基于动态页面生成表单页面的方法及系统。

背景技术

现在企业往往根据工作的需要们往往需要做大量的表单，各个表单大多是用独立的软件完成制作，极大的浪费了企业成本，也对工作造成了不便。表单在企业信息化和办公自动化中得到了大量的应用，设计一款简单易用的自定义表单系统，可以适应表单业务多样化的需求，降低开发成本，扩大软件产品的应用场景。

目前已经有多种提供即时预览功能的自定义表单系统，这些系统在不同的行业得到了应用。但是这些表单系统的设计一般都是基于一个具体的平台，配置功能繁琐，表单数据处理无法与现有数据库整合，所以很难跨平台进行使用。

因此，需要一种技术，以实现基于动态页面生成表单页面。

发明内容

本发明提供了一种基于动态页面生成表单页面的方法及系统，以解决如何基于动态页面生成表单的问题。

本申请涉及一种基于动态页面生成表单页面的方法，所述方法包括：

预设控件的事件；

监听所述控件的事件，当监听到所述控件有事件发生时，按照表单页面的样式，根据响应的所述事件配置表单页面的控件；

通过所述控件的属性配置页面，配置所述控件的属性，获取所有控件的属性的属性数据，将所述属性数据映射为Map类型的数据，将所述Map类型的数据作为参数传到所述控件属性的配置页面；

创建自定义表单列表页面。

优选地，所述Map类型的数据，包括控件属性对应的字段编码和控件属性对应的值。

优选地，所述控件为html格式的控件。

优选地，还包括对所述表单页面进行预览：

提交所述表单预览请求；

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

利用所述访问标识预览所述动态页面，响应所述预览请求。

优选地，还包括对所述表单页面进行保存：

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

保存所述html格式的表单页面数据、所述xml格式的动态页面数据以及所述动态页面的访问标识存储至数据库。

基于本发明的另一方面，提供一种基于动态页面生成表单页面的系统，所述系统包括：

预设单元，用于预设控件的事件；

监听单元，用于监听所述控件的事件，当监听到所述控件有事件发生时，按照表单页面的样式，根据响应的所述事件配置表单页面的控件；

配置单元，用于通过所述控件的属性配置页面，配置所述控件的属性，获取所有控件的属性的属性数据，将所述属性数据映射为Map类型的数据，将所述Map类型的数据作为参数传到所述控件属性的配置页面；

创建单元，用于创建自定义表单列表页面。

优选地，所述Map类型的数据，包括控件属性对应的字段编码和控件属性对应的值。

优选地，所述控件为html格式的控件。

优选地，还包括预览单元，用于对所述表单页面进行预览：

提交所述表单预览请求；

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

利用所述访问标识预览所述动态页面，响应所述预览请求。

优选地，还包括保存单元，用于对所述表单页面进行保存：

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

保存所述html格式的表单页面数据、所述xml格式的动态页面数据以及所述动态页面的访问标识存储至数据库。

本发明技术方案提供了一种基于动态页面的自定表单实现方案。本发明通过监听控件的事件，当监听到控件有事件发生时，按照表单页面的样式，根据响应的事件配置表单页面的控件。本发明通过控件的属性配置页面，配置控件的属性，获取所有控件的属性的属性数据，将属性数据映射为Map类型的数据，将Map类型的数据作为参数传到控件属性的配置页面。创建自定义表单列表页面。本发明提供的自定义表单实现方法，解决了企业信息化和办公自动化中表单业务多样化的需求，用户可以自己去定义表单内容。自定义表单的风格样式也和其他动态页面的样式保持一致，保证了用户体验的一致性。

附图说明

通过参考下面的附图，可以更为完整地理解本发明的示例性实施方式：

图1为根据本发明实施方式的一种基于动态页面生成表单页面的方法流程图；以及

图2为根据本发明实施方式的一种基于动态页面生成表单页面的系统结构图。

具体实施方式

现在参考附图介绍本发明的示例性实施方式，然而，本发明可以用许多不同的形式来实施，并且不局限于此处描述的实施例，提供这些实施例是为了详尽地且完全地公开本发明，并且向所属技术领域的技术人员充分传达本发明的范围。对于表示在附图中的示例性实施方式中的术语并不是对本发明的限定。在附图中，相同的单元/元件使用相同的附图标记。

除非另有说明，此处使用的术语(包括科技术语)对所属技术领域的技术人员具有通常的理解含义。另外，可以理解的是，以通常使用的词典限定的术语，应当被理解为与其相关领域的语境具有一致的含义，而不应该被理解为理想化的或过于正式的意义。

图1为根据本发明实施方式的一种基于动态页面生成表单页面的方法流程图。本发明的实施方式提供了一种基于动态页面的自定义表单实现方法，应用该方案可以实现让用户自己去设计表单页面，该表单页面的风格和其他动态页面的风格保持一致，可以在表单页面保存和加载表单数据。本发明中动态页面的内容为xml格式。本发明通过监听控件的事件，当监听到控件有事件发生时，按照表单页面的样式，根据响应的事件配置表单页面的控件。本发明通过控件的属性配置页面，配置控件的属性，获取所有控件的属性的属性数据，将属性数据映射为Map类型的数据，将Map类型的数据作为参数传到控件属性的配置页面。通过创建自定义表单列表页面，显示所有新建的自定义表单信息，包括表单名称、创建人、创建日期和当前状态。

如图1所示，一种基于动态页面生成表单页面的方法100从步骤101开始:

优选地，在步骤101：预设控件的事件。

优选地，在步骤102：监听控件的事件，当监听到控件有事件发生时，按照表单页面的样式，根据响应的事件配置表单页面的控件。

本申请中在表单设计页面，选择表单元素，设计表单样式；自定义表单实现方法，其中，表单设计页面的具体内容包括：

在表单设计页面中有一个UEditor编辑器，在编辑器的上方有用来配置动态页面控件的按钮，点击按钮会弹出对应的控件属性配置页面。动态页面控件主要包括：文本、多行文本、下拉框、日期、单选按钮、多选按钮和表格等。在该页面可以拖动控件的高度和宽度来调整控件的大小，拖动后控件属性中对应的高度和宽度也会随之变化。在该页面可以通过UEditor编辑器设计表单页面的样式，其中包括文字的字体、字号和对齐方式等。

优选地，在步骤103：通过控件的属性配置页面，配置控件的属性，获取所有控件的属性的属性数据，将属性数据映射为Map类型的数据，将Map类型的数据作为参数传到控件属性的配置页面。

本申请中，控件属性配置页面的具体内容包括：每种控件都有一个对应的属性的配置页面，比如文本控件的属性配置页面包括：字段标识、字段名称、字符最小长度、字符最大长度、校验规则、是否必填、默认值、是否允许输入、宽度和高度等。设置好控件属性后点确定按钮后在表单设计页面会看到对应的控件。本申请通过控件属性配置页面，设置控件的属性信息。

优选地，Map类型的数据，包括控件属性对应的字段编码和控件属性对应的值。

优选地，在步骤104：创建自定义表单列表页面。本申请中，在自定义表单列表页面，列出所有设计的自定义表单信息，上述表单页面都是xml格式的动态页面。其中，自定义表单列表页面的具体内容包括：自定义表单列表页面用来显示所有的新建的自定义表单信息，表单信息包括表单名称、创建人、创建日期和当前状态等信息。在表单列表页面可以新增、修改、删除、查询、禁用、启用表单信息，还可以对表单进行预览。

优选地，本申请中控件为html格式的控件。

优选地，本申请还包括对表单页面进行预览：

提交表单预览请求；

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识动态页面；

利用访问标识预览动态页面，响应预览请求。

优选地，本申请还包括对表单页面进行保存：

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识动态页面；

保存html格式的表单页面数据、xml格式的动态页面数据以及动态页面的访问标识存储至数据库。

以下对本申请的实施方式进行举例说明：

首先通过扩展UEditor编辑器控件需要先进行控件注册，设置控件元素的mouseover鼠标移动到某元素范围的上方时触发的事件，使鼠标放到控件元素上面时弹出一个层，层上包括编辑和删除的链接。点击删除链接信息时，弹出确认是否删除控件的提示，如果确认删除则调用UEditor编辑器的remove移除方法直接删除控件。点击编辑链接信息时弹出控件的属性设置页面，在打开属性页面之前，需要先获取对应的控件对象，再获取控件对象的属性信息，将其组织成一个Map类型的数据，key关键字为控件属性对应的字段编码，value值为控件属性对应的值，再将Map类型的数据作为参数传到属性设置页面中，这样在属性设置页面中就可以看到之前设置的属性信息。

在表单设计页面点击控件对应按钮弹出对应的控件属性的配置页面，输入控件属性信息，点击确定按钮后，获取所有的属性数据，将其组织成一个Map类型数据返回，key关键字为控件属性对应的字段编码，value值为控件属性对应的值。在返回表单设计页面后，创建一个html元素对象，设置plugins控件属性为控件对应的类型，比如文本控件其属性值设置为pt_text文本，表格控件属性设置为pt_list列表；设置isWidgetType确认控件的属性值为true真，表示这种类型的元素会解析成动态页面对应的控件；再设置其他属性信息，包括字段标识、字段名称、宽度和高度等。设置完属性信息之后，获取对象outerHTML整个控件的属性值，调用UEditor编辑器对象的execCommand可执行文件命令方法将对应的html内容插入到之前光标所在的位置。这时在表单设计页面就可以看到刚才配置的控件，点击html源代码按钮就可以看到之前插入的html格式的控件内容。

设计好自定义表单之后可以点击预览按钮，对设计好的页面进行预览。点击预览按钮时，会将页面中UEditor编辑器中对应的html内容传递到后台，该内容只是body元素中的内容，不包括html页面中的其他内容。在后台首先将html元素内容转换成动态页面需要的控件类型，再动态随机生成一个id标识，我们称为formid标识，用来唯一标识该动态页面，之后访问该表单时我们需要根据该formid标识进行访问。然后拼装xml格式的动态页面。

首先为动态页面添加其他xml格式的标签信息，比如xml格式的版本、编码和页面唯一ormid标识等。再添加插件信息，该插件内容包括处理动态页面的初始化等。再添加一些动态控制的JS代码，页面中如果增加了表格控件，表格上方会增加用于增行、删行、插行、复制操作的按钮，需要为这些按钮绑定事件，这部分内容就需要放到动态页面的JS代码部分。拼成一个完整的xml格式的动态页面之后，然后再调用动态页面对应的解析方法，该解析方法会将之前生成的页面唯一标识formid标识作为key关键字值，解析之后的页面信息作为value值放入缓存中。预览时会直接执行一段打开动态页面的JS代码，然后就可以看到之前设计好的动态页面了。

在表单设计页面设计好表单后可以点击保存按钮保存表单信息，这时也会将页面中UEditor编辑器中对应的html内容传递到后台，在后台会将html转换成动态页面需要的xml内容，方法同预览时的一样，转换完成之后将动态页面的唯一标识、xml格式的内容、html格式的内容一起保存到数据库中。html格式的内容用来在修改表单时直接加载到UEditor编辑器中，xml格式的内容方便动态页面的展示，不用每次访问都去解析html格式的内容。

其中，将html格式的内容解析成xml格式的内容算法如下：

使用jsou解析器进行解析，首先将html格式的内容转换成Document文档对象类型的对象，获取所有input输入数据和table标签类型的元素，将其合并在一起。遍历所有的元素，获取isWidgetType属性值，如果其值不为true说明该元素只是普通的html元素，不进行解析转换，只解析转换属性值为true的元素。对于需要转换的元素，将isWidgetType属性去掉，在xml格式中控件不需要此属性。接着进行公共属性的解析，比如是否必填、是否允许输入和默认值等。再获取plugins控制属性的值，此值为注册的控件类型，然后根据控件类型对不同的控件属性进行单独处理，转换成控件需要的属性。

通过页面唯一标识formid标识可以访问动态表单页面，在表单页面上输入表单信息，点保存按钮可以保存表单数据。表单数据保存时，先获取所有的控件值信息，其值为Map类型数据，在后台获取到之后将其转化为json数据存入数据库中。自定义表单中的字段数不固定，所以采用json字符串的方式进行保存。在加载自定义表单时会从数据中查出该表单对应的控件值信息，再将其转化为Map类型数据，然后调用动态页面的方法将控件值更新到页面中。

本申请中表单设计页面和属性设计页面均采用动态页面xml的方式实现，使所有页面的风格和动态页面的风格保持一致。表单设计页面中集成UEdtitor编辑器插件，便于设计页面样式和即时预览。本申请通过将html格式的页面元素转换成动态页面对应的控件，再增加页面插件和动态JS代码，拼装成完整的动态页面，再调用平台提供的解析动态页面的方法对其进行解析之后进行访问。

本申请提供的自定义表单实现方法，解决了企业信息化和办公自动化中表单业务多样化的需求，用户可以自己去定义表单内容。设计表单时，可以直接预览设计好的表单样式，方便设计者及时进行修改。自定义表单的风格样式也和其他动态页面的样式保持一致，保证了用户体验的一致性。

图2为根据本发明实施方式的一种基于动态页面生成表单页面的系统结构图。如图2所示，一种基于动态页面生成表单页面的系统200包括：

预设单元201，用于预设控件的事件。优选地，控件为html格式的控件。

监听单元201，用于监听控件的事件，当监听到控件有事件发生时，按照表单页面的样式，根据响应的事件配置表单页面的控件。

配置单元203，用于通过控件的属性配置页面，配置控件的属性，获取所有控件的属性的属性数据，将属性数据映射为Map类型的数据，将Map类型的数据作为参数传到控件属性的配置页面。

优选地，Map类型的数据，包括控件属性对应的字段编码和控件属性对应的值。

创建单元204，用于创建自定义表单列表页面。

优选地，本申请还包括预览单元，用于对表单页面进行预览：

提交表单预览请求；

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识动态页面；

利用访问标识预览动态页面，响应预览请求。

优选地，本申请还包括保存单元，用于对表单页面进行保存：

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识动态页面；

保存html格式的表单页面数据、xml格式的动态页面数据以及动态页面的访问标识存储至数据库。

本发明实施方式的一种基于动态页面生成表单页面的系统200与本发明另一实施方式的一种基于动态页面生成表单页面的方法100相对应，在此不再进行赘述。

已经通过参考少量实施方式描述了本发明。然而，本领域技术人员所公知的，正如附带的专利权利要求所限定的，除了本发明以上公开的其他的实施例等同地落在本发明的范围内。

通常地，在权利要求中使用的所有术语都根据他们在技术领域的通常含义被解释，除非在其中被另外明确地定义。所有的参考“一个/所述/该[装置、组件等]”都被开放地解释为所述装置、组件等中的至少一个实例，除非另外明确地说明。这里公开的任何方法的步骤都没必要以公开的准确的顺序运行，除非明确地说明。

Claims (10)

1.一种基于动态页面生成表单页面的方法，所述方法包括：

预设控件的事件；

监听所述控件的事件，当监听到所述控件有事件发生时，按照表单页面的样式，根据响应的所述事件配置表单页面的控件；

通过所述控件的属性配置页面，配置所述控件的属性，获取所有控件的属性的属性数据，将所述属性数据映射为Map类型的数据，将所述Map类型的数据作为参数传到所述控件属性的配置页面；

创建自定义表单列表页面。

2.根据权利要求1所述的方法，所述Map类型的数据，包括控件属性对应的字段编码和控件属性对应的值。

3.根据权利要求1所述的方法，所述控件为html格式的控件。

4.根据权利要求3所述的方法，还包括对所述表单页面进行预览：

提交所述表单预览请求；

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

利用所述访问标识预览所述动态页面，响应所述预览请求。

5.根据权利要求3所述的方法，还包括对所述表单页面进行保存：

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

保存所述html格式的表单页面数据、所述xml格式的动态页面数据以及所述动态页面的访问标识存储至数据库。

6.一种基于动态页面生成表单页面的系统，所述系统包括：

预设单元，用于预设控件的事件；

监听单元，用于监听所述控件的事件，当监听到所述控件有事件发生时，按照表单页面的样式，根据响应的所述事件配置表单页面的控件；

配置单元，用于通过所述控件的属性配置页面，配置所述控件的属性，获取所有控件的属性的属性数据，将所述属性数据映射为Map类型的数据，将所述Map类型的数据作为参数传到所述控件属性的配置页面；

创建单元，用于创建自定义表单列表页面。

7.根据权利要求6所述的系统，所述Map类型的数据，包括控件属性对应的字段编码和控件属性对应的值。

8.根据权利要求6所述的系统，所述控件为html格式的控件。

9.根据权利要求8所述的系统，还包括预览单元，用于对所述表单页面进行预览：

提交所述表单预览请求；

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

利用所述访问标识预览所述动态页面，响应所述预览请求。

10.根据权利要求8所述的系统，还包括保存单元，用于对所述表单页面进行保存：

将html格式的表单页面数据转换成xml格式的动态页面对应的数据，拼装xml格式的动态页面；

动态随机生成访问标识，用于标识所述动态页面；

保存所述html格式的表单页面数据、所述xml格式的动态页面数据以及所述动态页面的访问标识存储至数据库。