CN112668290A - 基于网格化设计的动态表单生成方法及系统 - Google Patents

Abstract

本发明公开了基于网格化设计的动态表单生成方法及系统，该方法包括：S100，通过交互界面设计表单页面，包括：拖曳控件至第一页面，对第一页面进行网格化排版，以及，配置第一页面中的控件的属性，并将控件与相应的字段进行绑定；S200，根据第一页面的网格化排版信息及配置，生成相应的表单数据模型；S300，根据表单数据模型生成相应的第二页面，进行发布展示。本发明至少具有以下有益效果：通过简单配置，拖放及网格化排版，可智能化生成一个表单页面，便于非计算机专业开发的运维人员进行操作，降低使用门槛，节省人力物力。

Description

基于网格化设计的动态表单生成方法及系统

技术领域

本发明涉及表单动态生成的技术领域，特别涉及一种基于网格化设计的动态表单生成方法及系统。

背景技术

传统表单页面的生成方法通常需要专业的IDEA插件，且需要专业人员敲打命令代码深入开发才能制作表单页面。在该模式下，对于非计算机专业开发的运维人员，往往需要先进行专业培训，才能进行开发，从学习到表单页面能被开发出来，时间周期非常长。且每次编程后，都需要运行一次，操作繁琐，容易出错，调试复杂。对于个性定制页面，如果数量较多，则需要更多的时间开发，效率低下；且版面排版复杂，位置、大小、增减行列都需要编写调试代码，开发困难重重。

发明内容

本发明旨在至少解决现有技术中存在的技术问题之一。为此，本发明提出一种基于网格化设计的动态表单生成方法，能够为非计算机专业开发人员快速生成定制的表单页面。

本发明还提出一种具有上述基于网格化设计的动态表单生成方法的基于网格化设计的动态表单生成系统。

本发明还提出一种具有上述基于网格化设计的动态表单生成方法的计算机可读存储介质。

根据本发明的第一方面实施例的基于网格化设计的动态表单生成方法，包括以下步骤：S100，通过交互界面设计表单页面，包括：拖曳控件至第一页面，对所述第一页面进行网格化排版，以及，配置所述第一页面中的所述控件的属性，并将所述控件与相应的字段进行绑定；S200，根据所述第一页面的网格化排版信息及配置，生成相应的表单数据模型；S300，根据所述表单数据模型生成相应的第二页面，进行发布展示。

根据本发明实施例的基于网格化设计的动态表单生成方法，至少具有如下有益效果：通过简单配置，拖放及网格化排版，可智能化生成一个表单页面，便于非计算机专业开发的运维人员进行操作，降低使用门槛，节省人力物力。

根据本发明的一些实施例，所述第一页面为行列式布局，包括若干单元格，每个所述单元格对应一个所述控件。

根据本发明的一些实施例，所述步骤S100包括：S110，若所述控件被拖曳至所述单元格，则更新所述单元格的属性为当前拖曳的所述控件的属性；S120，若所述字段被拖拽至所述单元格，则将所述单元格与所述字段关联，记录所述字段在数据库中的位置信息。

根据本发明的一些实施例，所述表单数据模型以json数据格式保存，一个所述单元格对应一个json对象。

根据本发明的一些实施例，多个所述单元格可被合并为一个所述单元格。

根据本发明的一些实施例，所述步骤S300还包括：根据所述表单数据模型，以HTML方式生成第二页面，包括：根据所述控件的类型及属性信息进行显示，以及，根据与所述控件绑定的所述字段从数据库中获取相应的字段数据进行展示。

根据本发明的一些实施例，所述控件包括：文本标签、文本框、文本域、单选框、多选框、下拉框、按钮、时间选择框、输入下拉框、数据选择框、数字输入框、货币输入框、附件上传、图片上传、富文本框及列表。

根据本发明的第二方面实施例的基于网格化设计的动态表单生成系统，包括：页面设计模块，用于提供交互界面对表单页面进行设计，包括：拖曳控件至第一页面，对所述第一页面进行网格化排版，以及，配置所述第一页面中的所述控件的属性，并将所述控件与相应的字段进行绑定；数据生成模块，用于根据所述第一页面的网格化排版信息及配置，生成相应的表单数据模型；页面发布模块，用于根据所述表单数据模型生成相应的第二页面，进行发布展示。

根据本发明实施例的基于网格化设计的动态表单生成系统，至少具有如下有益效果：通过简单配置，拖放及网格化排版，可智能化生成一个表单页面，便于非计算机专业开发的运维人员进行操作，降低使用门槛，节省人力物力。

根据本发明的一些实施例，还包括：实时更新模块，用于检测所述第二页面对应的所述表单数据模型是否已更新，若存在更新，则调用所述页面发布模块，对第二页面进行更新。

根据本发明的第三方面实施例的计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本发明的第一方面实施例的方法。

根据本发明实施例的基于网格化设计的动态表单生成系统，至少具有与本发明的第一方面实施例的方法同样的有益效果。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为本发明实施例的方法的流程示意图；

图2为本发明实施例的方法中的数据交互示意图；

图3为本发明实施例的系统的模块示意框图。

附图标记：

页面设计模块100、数据生成模块200、页面发布模块300、实时更新模块400。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

在本发明的描述中，若干的含义是一个或者多个，多个的含义是两个及两个以上，大于、小于、超过等理解为不包括本数，以上、以下、以内等理解为包括本数。如果有描述到第一、第二只是用于区分技术特征为目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。

参照图1，本发明的实施例的方法包括：S100，通过交互界面设计表单页面，包括：拖曳控件至第一页面，对第一页面进行网格化排版，以及，配置第一页面中的控件的属性，并将控件与相应的字段进行绑定；S200，根据第一页面的网格化排版信息及配置，生成相应的表单数据模型；S300，根据表单数据模型生成相应的第二页面，进行发布展示。

本发明实施例中的交互界面中包括：工具栏、控件面板、字段面板、属性面板及第一页面。工具栏中包括:导入数据源、添加JS代码等。控件面板中包括多个可拖曳控件，控件类型包括：文本标签、文本框、文本域、单选框、多选框、下拉框、按钮、时间选择框、输入下拉框、数据选择框、数字输入框、货币输入框、附件上传、图片上传、富文本框、列表控件等等。字段面板用于获取导入的数据源中的数据表中的字段并展示，用户可以根据业务需要选择字段拖曳至第一页面中的某一控件，与该控件进行绑定。属性面板用于设置控件的属性、事件选项等。第一页面为设计页面，以行列式布局，包括若干单元格，初始状态下，每个单元格对应一个默认控件(如文本标签)。用户可先初始化第一页面的行列数量，若设计过程中发现不满足要求，可对行列进行操作，如：插入N行(列)、插入标题行(列)、插入分隔行(列)、空行(列)、删除行(列)等，更灵活地操作网格排版。用户也可以合并多个单元格为一个，当然，也可以将该合并后的单元格进行拆分。通过鼠标拖拽的方式，可把控件面板中的控件拖到第一页面的单元格里改变单元格的控件类型，不同类型的控件包含不同的属性，可根据需求设置其属性，对应事件及选项。设定好数据源后，可通过鼠标把字段拖拽到网格单元格里，为该网格单元对应的控件绑定相应的数据库字段。

参照图2，用户在第一页面中放置控件，并为控件绑定相应的字段，界面配置完成后，点击保存；表单生成工具将根据第一页面的网格化排版信息及相应配置，生成相应的表单数据模型，包括该页面导入的数据源，页面中每个控件的ID、位置(左上角所在的网格的行列位置)、大小(该控件在网格中行列两个方向占用的数量)、属性信息、事件及选项，该控件绑定的数据字段的来源位置。表单数据模型将以json数据格式保存，其中一个单元格对应一个json对象。在本发明的一些实施例中，这些表单数据模型以新的表形式被存放至对应数据库，并记录修改时间或者修改版本。该页面被业务系统平台进行发布展示，则读取表单数据模型，发送给表单引擎进行解析，生成对应的Html页面，即第二页面；表单引擎根据控件的类型及属性信息进行显示，并读取控件绑定的字段的来源位置，从数据库中获取相应的字段数据进行展示。在本发明的一些实施例中，第二页面中包括用于操作相应控件的javascript代码，如修改编辑框后相应数据的上传提交。

本发明实施例的系统，参照图3，包括：页面设计模块100，用于提供交互界面对表单页面进行设计，包括：拖曳控件至第一页面，对第一页面进行网格化排版，以及，配置第一页面中的控件的属性，并将控件与相应的字段进行绑定；数据生成模块200，用于根据第一页面的网格化排版信息及配置，生成相应的表单数据模型；页面发布模块300，用于根据表单数据模型生成相应的第二页面，进行发布展示；实时更新模块400，用于检测第二页面对应的表单数据模型是否已更新，若存在更新，则调用页面发布模块，对第二页面进行更新。本发明的一些实施例中，数据生成模块200将生成的表单数据模型存储到相应的数据库中，页面发布模块300及实时更新模块400部署在该数据库对应的业务系统平台中，由实时更新模块400检测数据库中的表单数据模型是否有更新，若有，则调用页面发布模块300从数据库中读取表单数据模型，并抓取表单中控件绑定的数据库字段所对应的字段数据，对第二页面进行更新并展示。

尽管本文描述了具体实施方案，但是本领域中的普通技术人员将认识到，许多其它修改或另选的实施方案同样处于本公开的范围内。例如，结合特定设备或组件描述的功能和/或处理能力中的任一项可以由任何其它设备或部件来执行。另外，虽然已根据本公开的实施方案描述了各种例示性具体实施和架构，但是本领域中的普通技术人员将认识到，对本文所述的例示性具体实施和架构的许多其它修改也处于本公开的范围内。

上文参考根据示例性实施方案所述的系统、方法、系统和/或计算机程序产品的框图和流程图描述了本公开的某些方面。应当理解，框图和流程图中的一个或多个块以及框图和流程图中的块的组合可分别通过执行计算机可执行程序指令来实现。同样，根据一些实施方案，框图和流程图中的一些块可能无需按示出的顺序执行，或者可以无需全部执行。另外，超出框图和流程图中的块所示的那些部件和/或操作以外的附加部件和/或操作可存在于某些实施方案中。

因此，框图和流程图中的块支持用于执行指定功能的装置的组合、用于执行指定功能的元件或步骤的组合以及用于执行指定功能的程序指令装置。还应当理解，框图和流程图中的每个块以及框图和流程图中的块的组合可以由执行特定功能、元件或步骤的专用硬件计算机系统或者专用硬件和计算机指令的组合来实现。

本文所述的程序模块、应用程序等可包括一个或多个软件组件，包括例如软件对象、方法、数据结构等。每个此类软件组件可包括计算机可执行指令，所述计算机可执行指令响应于执行而使本文所述的功能的至少一部分(例如，本文所述的例示性方法的一种或多种操作)被执行。

软件组件可以用各种编程语言中的任一种来编码。一种例示性编程语言可以为低级编程语言，诸如与特定硬件体系结构和/或操作系统平台相关联的汇编语言。包括汇编语言指令的软件组件可能需要在由硬件架构和/或平台执行之前由汇编程序转换为可执行的机器代码。另一种示例性编程语言可以为更高级的编程语言，其可以跨多种架构移植。包括更高级编程语言的软件组件在执行之前可能需要由解释器或编译器转换为中间表示。编程语言的其它示例包括但不限于宏语言、外壳或命令语言、作业控制语言、脚本语言、数据库查询或搜索语言、或报告编写语言。在一个或多个示例性实施方案中，包含上述编程语言示例中的一者的指令的软件组件可直接由操作系统或其它软件组件执行，而无需首先转换成另一种形式。

软件组件可存储为文件或其它数据存储构造。具有相似类型或相关功能的软件组件可一起存储在诸如特定的目录、文件夹或库中。软件组件可为静态的(例如，预设的或固定的)或动态的(例如，在执行时创建或修改的)。

上面结合附图对本发明实施例作了详细说明，但是本发明不限于上述实施例，在所属技术领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下作出各种变化。

Claims (10)

1.一种基于网格化设计的动态表单生成方法，其特征在于，包括以下步骤：

S100，通过交互界面设计表单页面，包括：拖曳控件至第一页面，对所述第一页面进行网格化排版，以及，配置所述第一页面中的所述控件的属性，并将所述控件与相应的字段进行绑定；

S200，根据所述第一页面的网格化排版信息及配置，生成相应的表单数据模型；

S300，根据所述表单数据模型生成相应的第二页面，进行发布展示。

2.根据权利要求1所述的基于网格化设计的动态表单生成方法，其特征在于，所述第一页面为行列式布局，包括若干单元格，每个所述单元格对应一个所述控件。

3.根据权利要求2所述的基于网格化设计的动态表单生成方法，其特征在于，所述步骤S100包括：

S110，若所述控件被拖曳至所述单元格，则更新所述单元格的属性为当前拖曳的所述控件的属性；

S120，若所述字段被拖拽至所述单元格，则将所述单元格与所述字段关联，记录所述字段在数据库中的位置信息。

4.根据权利要求2所述的基于网格化设计的动态表单生成方法，其特征在于，所述表单数据模型以json数据格式保存，一个所述单元格对应一个json对象。

5.根据权利要求2所述的基于网格化设计的动态表单生成方法，其特征在于，多个所述单元格可被合并为一个所述单元格。

6.根据权利要求1所述的基于网格化设计的动态表单生成方法，所述步骤S300还包括：

根据所述表单数据模型，以HTML方式生成第二页面，包括：根据所述控件的类型及属性信息进行显示，以及，根据与所述控件绑定的所述字段从数据库中获取相应的字段数据进行展示。

7.根据权利要求1所述的基于网格化设计的动态表单生成方法，所述控件包括：文本标签、文本框、文本域、单选框、多选框、下拉框、按钮、时间选择框、输入下拉框、数据选择框、数字输入框、货币输入框、附件上传、图片上传、富文本框及列表。

8.一种基于网格化设计的动态表单生成系统，使用权利要求1至7中任一项的方法，其特征在于，包括：

页面设计模块，用于提供交互界面对表单页面进行设计，包括：拖曳控件至第一页面，对所述第一页面进行网格化排版，以及，配置所述第一页面中的所述控件的属性，并将所述控件与相应的字段进行绑定；

数据生成模块，用于根据所述第一页面的网格化排版信息及配置，生成相应的表单数据模型；

页面发布模块，用于根据所述表单数据模型生成相应的第二页面，进行发布展示。

9.根据权利要求8所述的基于网格化设计的动态表单生成系统，其特征在于，还包括：

实时更新模块，用于检测所述第二页面对应的所述表单数据模型是否已更新，若存在更新，则调用所述页面发布模块，对第二页面进行更新。

10.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至7中任一项的方法。

Images