CN111522551B - Web端在线表单设计器的实现方法和装置 - Google Patents

Abstract

本发明提供一种Web端在线表单设计器的实现方法，包括以下步骤：对设计表单的组件进行封装得到JSON数据；将组件对应的JSON数据排列形成基础组件栏；对基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件；在表单设计区域监听经过第二级封装的所述表单设计组件；以响应式布局叠加流式布局对表单设计组件进行排列；将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面；响应于点选表单设计区域的表单组件，显示表单组件的配置栏；将配置结果渲染至表单设计区域；更新配置结果对应的表单组件的虚拟DOM元素；将设计形成的表单对应的JSON数据传输至服务器端。

Description

Web端在线表单设计器的实现方法和装置

技术领域

本发明主要涉及信息技术领域，尤其涉及一种Web端在线表单设计器的实现方法和装置。

背景技术

表单在调查问卷、登记报名、信息反馈等数据的采集和统计等场景中应用广泛。常见的表单在开发人员针对一项具体的需求开发完成后，表单就固定下来。如果应用场景发生一些具体细节的变化，例如，在临床试验数据采集中，药物的种类或检测的项目在进行调整后发生了变化，此时的表单无法对应调整。如果需要继续进行临床试验数据的电子化采集，则需要让开发人员对表单页面进行重新开发，以适应调整后的临床试验数据采集需求。

发明内容

本发明要解决的技术问题是提供一种Web端在线表单设计器的实现方法和装置，让使用者可通过表单设计器，根据应用场景的变化和需求，实时设计和调整表单页面，以满足数据采集和统计的需求。

为解决上述技术问题，本发明提供了一种Web端在线表单设计器的实现方法，包括以下步骤：对设计表单的组件进行封装，得到JSON数据；所述封装形成的JSON数据包括组件的原始属性设置和初始数据渲染；所述原始属性对应所述组件的交互形态和图形样式；将所述组件对应的所述JSON数据排列形成基础组件栏；对所述基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件；在表单设计区域监听经过所述第二级封装的所述表单设计组件；当所述表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对所述表单设计组件进行数据绑定和渲染；以响应式布局叠加流式布局对所述表单设计组件进行排列；将所述排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面；响应于点选表单设计区域的表单组件，显示所述表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至所述表单设计区域；更新所述配置结果对应的表单组件的虚拟DOM元素；将设计形成的表单对应的JSON数据传输至服务器端。

在本发明的一实施例中，本发明的Web端在线表单设计器的实现方法还包括，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，形成表单页面。

在本发明的一实施例中，本发明的Web端在线表单设计器的实现方法还包括，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，所述渲染的区域位于所述表单设计区域。

在本发明的一实施例中，在所述表单设计区域监听经过所述第二级封装的所述表单设计组件；当所述表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对所述表单设计组件进行数据绑定和渲染。

在本发明的一实施例中，所述组件的交互形态包括以下的任意一个或多个：多行文本，单行文本，数值，单选框，下拉框，复选框，日期，时间，文件上传，分割线，签名，说明文字，富文本和多记录。

在本发明的一实施例中，所述当前设计的表单界面以全局数据流形式进行存储。

在本发明的一实施例中，所述配置包括校验配置和权限配置。

本发明还提供一种Web端在线表单设计器的实现装置，包括以下模块：

组件定义模块，被配置为：对设计表单的组件进行封装，得到JSON数据；所述封装形成的JSON数据包括组件的原始属性设置和初始数据渲染；所述原始属性对应所述组件的交互形态和图形样式；将所述组件对应的所述JSON数据排列形成基础组件栏；对所述基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件；表单设计模块，被配置为：在表单设计区域监听经过所述第二级封装的所述表单设计组件；当所述表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对所述表单设计组件进行数据绑定和渲染；按响应式布局叠加流式布局对所述表单设计组件进行排列；响应于点选表单设计区域的表单组件，显示所述表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至所述表单设计区域；表单演示渲染模块，被配置为：将所述排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面；更新所述配置结果对应的表单组件的虚拟DOM元素；在线表单传输模块，将设计形成的表单对应的JSON数据传输至服务器端。

本发明还提供一种Web端在线表单设计器的实现装置，包括：存储器，用于存储可由处理器执行的指令；以及处理器，用于执行所述指令以实现如前所述的方法。

本发明还提供一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如前所述的方法。

与现有技术相比，本发明具有以下优点：本发明的表单设计器的实现方法和装置，可实现自定义程度极高的表单设计器，为使用者提供高度灵活的表单设计自由度。同时，在设计过程中，随着表单组件的增加和频繁调整，仍可保持表单设计器的流畅运行，并实现当前设计表单的快速检视。

附图说明

附图是为提供对本申请进一步的理解，它们被收录并构成本申请的一部分，附图示出了本申请的实施例，并与本说明书一起起到解释本发明原理的作用。附图中：

图1是本发明一实施例的Web端在线表单设计器的实现方法的流程图。

图2是本发明另一实施例的Web端在线表单设计器的实现方法的流程图。

图3是本发明一实施例的Web端在线表单设计器的实现装置的系统实施环境示意图。

具体实施方式

为让本发明的上述目的、特征和优点能更明显易懂，以下结合附图对本发明的具体实施方式作详细说明。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是本发明还可以采用其它不同于在此描述的其它方式来实施，因此本发明不受下面公开的具体实施例的限制。

本申请中使用了流程图用来说明根据本申请的实施例的系统所执行的操作。应当理解的是，前面或下面操作不一定按照顺序来精确地执行。相反，可以按照倒序或同时处理各种步骤。同时，或将其他操作添加到这些过程中，或从这些过程移除某一步或数步操作。

本发明的实施例描述一种Web端在线表单设计器的实现方法和装置。图1是本发明一实施例的Web端在线表单设计器的实现方法的流程图。如图1所示，Web端在线表单设计器的实现方法包括以下步骤。步骤101，对表单设计组件进行封装，得到JSON数据。步骤102，将组件对应的JSON数据排列形成基础组件栏。步骤103，对基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件。步骤104，在表单设计区域监听经过所述第二级封装的所述表单设计组件；当表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对表单设计组件进行数据绑定和渲染。步骤105，以响应式布局叠加流式布局对表单设计组件进行排列。步骤106，将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面。步骤107，接收Web端对配置栏的操作，将配置结果渲染至所述表单设计区域。步骤108，接收Web端对配置栏的操作，将配置结果渲染至所述表单设计区域。步骤109，更新配置结果对应的表单组件的虚拟DOM元素。步骤110，将设计形成的表单对应的JSON数据传输至服务器端。

在步骤101，对表单设计组件进行封装，得到JSON数据。JSON（JavaScript ObjectNotation，JavaScript对象表示法）是一种数据存储格式。JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后在网络或者程序之间传递该字符串，并在需要时将其还原为各编程语言所支持的数据格式。对表单设计组件进行封装形成的JSON数据，包括组件的原始属性设置和初始数据渲染。其中，组件的原始属性设置对应所述组件的交互形态和图形样式。

在一非限制性实施例中，组件的交互形态包括以下的任意一个或多个：多行文本，单行文本，数值，单选框，下拉框，复选框，日期，时间，文件上传，分割线，签名，说明文字，富文本和多记录。富文本指可输入文字和图片等多种格式的字符和文件的输入框。多记录指由多个单行文本或多组多行文本组件组成的数据录入组件。例如，在数据的汇总和统计页面对应的组件，即可为多记录组件的交互形态。初始数据集可包括组件的初始名称，初始渲染颜色和初始字符格式等。

在步骤102，将组件对应的JSON数据排列形成基础组件栏。不同交互形态的组件对应的JSON数据构成基础组件栏中的组件元素。对应基础组件栏可位于表单设计器界面的左侧或上侧。

在步骤103，对基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件。第二级封装可通过React DnD（Drag and Drop for React）套件实现。React是用于构建用户界面的框架。在React DnD套件中对点选和移动操作的类型，操作的对象和操作的过程的信息进行设置。经过封装后，在基础组件栏中形成响应于Web端的点选和移动操作的表单设计组件。

在步骤104，在表单设计器的表单设计区域监听经过第二级封装的表单设计组件。当表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对表单设计组件进行数据绑定和渲染。渲染后即在表单设计区域形成一表单组件的具体形态。

在步骤105，以响应式布局叠加流式布局对表单设计组件进行排列。经过多次点选和移动操作后，在表单设计区域形成的表单组件不断增加。此时以响应式布局叠加流式布局对所述表单设计组件进行排列。流式布局方式中，表单页面的元素的宽度根据屏幕分辨率进行适配调整，同时整体布局不变。为使表单布局适应较大的屏幕尺度的跨度，通过响应式布局叠加流式布局对所述表单设计组件进行排列，使得表单页面既可适应较大的屏幕尺度的跨度，用时亦可保证页面元素的显示效果。

在步骤106，将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面。DOM（Document Object Model，文档对象模型）是一种HTML（Hyper TextMarkup Language，超文本标记语言）页面元素的编辑和操作接口。HTML DOM 确定了访问和操作 HTML 文档对应的页面中的元素的标准步骤。DOM结构包括多层节点。多层节点包括<html>…</html>、<head>…</head>、<body>…</body>、<ul>…</ul>、<li>和"list item"。其中，ul表示Unordered list（无序列表）。li表示list（列表）。在Web端用DOM的对应的结构操作表单设计区域的表单组件时，一次更新需要经过对DOM各层节点的遍历。这使得表单设计区域的表单组件不断增多时，页面设计的频繁操作和不断修改以及细节的完善将会导致遍历所需的时间大幅上升，从而导致表单设计器界面的运行变得缓慢，影响使用体验，降低了设计效率。

本发明的表单设计器的实现方法中，将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面。具体地，用JavaScript对象模拟DOM节点，表单设计区域的页面的更新可以先全部反映在JavaScript对象上。通过JavaScript对象模拟的虚拟DOM元素展示当前设计的表单界面。操作Web端对应的终端的内存中JavaScript对象的速度，与通过DOM的流程操作表单设计区域的表单组件相比，效率明显提升。并且，虚拟DOM可只对更新的节点进行操作，避免了一次更新需要经过对DOM各层节点的遍历，从而提高展示当前设计的表单界面的效率。

在步骤107，响应于点选表单设计区域的表单组件，显示表单组件的配置栏。配置栏可位于表单设计器界面的右侧或下侧。配置栏中的可配置项目可根据实际需求进行设置。配置的内容可包括校验配置和权限配置。亦可根据需求增加配置的类型。例如，更多的自定义配置，以根据使用者的需求修改表单组件的样式。校验配置指校验表单组件的交互形态和显示的样式是否对应。权限配置可配置不同表单组件的可被操作的权限。

在步骤108，接收Web端对配置栏的操作，将配置结果渲染至所表单设计区域。在步骤109，更新配置结果对应的表单组件的虚拟DOM元素。虚拟DOM元素的更新使得当前设计的表单界面可以即时更新，以利于设计效果的快速展示。对虚拟DOM元素的更新通过在各层节点中，对同一层元素的对象的对比和替换实现，从而提供元素更新的效率。为实现对当前设计的表单界面的快速检视，当前设计的表单界面以基于MobX的全局数据流形式进行存储。存储位置位于Web端对应的终端的内存中。MobX是一种数据的状态管理库。MobX可以和JavaScript 库共同使用，管理数据流的状态。

在步骤110，将设计形成的表单对应的JSON数据传输至服务器端。需要说明的是，基础组件栏对应的JSON数据和设计过程中形成的JSON数据也可根据需要和设置传输至服务器端。例如，如果希望将基础组件栏在不同设计场景中多次复用，则可将基础组件栏对应的JSON数据传输至服务器端。

本发明的表单设计器的实现方法，可实现自定义程度极高的表单设计器，为使用者提供高度灵活的表单设计自由度。同时，在设计过程中，随着表单组件的不断增加和频繁调整，仍可保持表单设计器的流畅运行，并实现当前设计表单的快速检视。

在一非限制性实施例中，本发明的Web端在线表单设计器的实现方法还可包括，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，形成表单页面。此时，如果已确定此表单页面可符合实际应用的需求，例如临床试验数据采集的需要，则可使用此表单页面开展数据采集和统计工作。

图2是本发明另一实施例的Web端在线表单设计器的实现方法的流程图。图2中，Web端在线表单设计器的实现方法除了包括与图1中步骤101至步骤110类似的步骤201至步骤210外，还包括步骤211，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，所述渲染的区域位于所述表单设计区域。步骤212，在所述表单设计区域监听经过所述第二级封装的所述表单设计组件；当所述表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对所述表单设计组件进行数据绑定和渲染。

在步骤211，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，所述渲染的区域位于所述表单设计区域。解析和渲染的过程可通过调用React框架中的组件，例如createElement()方法组件，对所述JSON数据的代码进行编译和调用，并将编译后的表单代码展示到页面上。此步骤中，设计形成的表单从Web端传输至服务器端后，可从服务器端获取设计形成的表单，并将其在表单设计器中再次进入编辑和设计状态，从而按照实际需求的变化对表单样式提出的更新要求，对表单继续进行设计。

在步骤212，在表单设计区域监听经过二级封装的表单设计组件；当表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对表单设计组件进行数据绑定和渲染。该步骤即为根据实际应用场景中采集数据的需求的变化，对表单继续进行设计和修改，以使修改后的表单页面满足变化后的应用场景中采集和统计数据的需求。

可以理解的是，本发明的Web端在线表单设计器的实现方法的多个步骤可根据实际需要进行调整，以上的实施例仅为示例性顺序。在一些实施例中，有的步骤也可以进行省略或者进一步细化，以使本发明的Web端在线表单设计器的实现方法更具适应性和更强的可操作性。例如，在步骤212后还可对表单组件进行配置，设计完成表单后，再将设计形成的表单对应的JSON数据传输至服务器端。

本发明的Web端在线表单设计器的实现方法，为使用者提供可根据使用场景的即时和无预期的变化，进行高度灵活的表单设计的自由度。在表单使用过程中，可根据应用场景的变化对数据采集和统计的需求变化，对表单进行即时修改以满足使用要求。

本发明还提供一种Web端在线表单设计器的实现装置，包括组件定义模块、表单设计模块、表单演示渲染模块和在线表单传输模块。

其中，组件定义模块被配置为对设计表单的组件进行封装，得到JSON数据。封装形成的JSON数据包括组件的原始属性设置和初始数据渲染。该原始属性对应所述组件的交互形态和图形样式。在一非限制性实施例中，组件的交互形态包括以下的任意一个或多个：多行文本，单行文本，数值，单选框，下拉框，复选框，日期，时间，文件上传，分割线，签名，说明文字，富文本和多记录。富文本指可输入文字和图片等多种格式的字符和文件的输入框。多记录指由多个单行文本或多组多行文本组件组成的数据录入组件。例如，在数据的汇总和统计页面对应的组件，即可为多记录组件的交互形态。初始数据集可包括组件的初始名称，初始渲染颜色和初始字符格式等。

而后将所述组件对应的JSON数据排列形成基础组件栏。再对基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件。第二级封装可通过React DnD（Drag and Drop for React）套件实现。React是用于构建用户界面的框架。在React DnD套件中对点选和移动操作的类型，对象和过程信息进行设置。经过封装后，在基础组件栏中形成响应于Web端的点选和移动操作的表单设计组件。

表单设计模块被配置为在表单设计区域监听经过第二级封装的所述表单设计组件。当表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对表单设计组件进行数据绑定和渲染。并且，按响应式布局叠加流式布局对表单设计组件进行排列。而后，响应于点选表单设计区域的表单组件，显示表单组件的配置栏。并接收Web端对配置栏的操作，将配置结果渲染至表单设计区域。

配置栏中的可配置项目可根据实际需求进行设置。配置的内容可包括校验配置和权限配置。亦可根据需求增加配置的类型。例如，更多的自定义配置，以根据使用者的需求修改表单组件的样式。校验配置指校验表单组件的交互形态和显示的样式是否对应。权限配置可配置不同表单组件的可被操作的权限。

表单演示渲染模块被配置为将所述排列的结果预解析为虚拟DOM元素，通过虚拟DOM元素展示当前设计的表单界面。并且更新配置结果对应的表单组件的虚拟DOM元素，以利于当前设计的表单界面的效果的快速呈现和检视。为实现对当前设计的表单界面的快速检视，当前设计的表单界面以基于MobX的全局数据流形式进行存储。存储位置位于Web端对应的终端的内存中。MobX是一种数据的状态管理库。MobX可以和 javascript 库共同使用，管理数据流的状态。在线表单传输模块，用于将设计形成的表单对应的JSON数据传输至服务器端。

本发明的Web端在线表单设计器的实现装置，可实现自定义程度极高的表单设计器，为使用者提供高度灵活的表单设计自由度。同时，在设计过程中，随着表单组件的不断增多，仍可保持表单设计器的流畅运行，并实现当前设计表单的快速检视和修改。

本发明还提供一种Web端在线表单设计器的实现装置，包括：存储器，用于存储可由处理器执行的指令；以及处理器，用于执行所述指令以实现如前所述的方法。

图3示出了根据本申请一实施例示出的Web端在线表单设计器的实现装置的系统实施环境示意图。Web端在线表单设计器的实现装置300可包括内部通信总线301、处理器（Processor）302、只读存储器（ROM）303、随机存取存储器（RAM）304、以及通信端口305。Web端在线表单设计器的实现装置300通过通信端口连接网络，并与服务器端连接。内部通信总线301可以实现Web端在线表单设计器的实现装置300组件间的数据通信。处理器302可以进行判断和发出提示。在一些实施例中，处理器302可以由一个或多个处理器组成。通信端口305可以实现从网络发送和接受信息及数据。在图3中，通信端口305可通过网络与服务器端的服务器A 306、服务器数据存储A 307、服务器B 308、服务器数据存储B 309连接，以实现表单对应的JSON数据的传输。Web端在线表单设计器的实现装置300还可以包括不同形式的程序储存单元以及数据储存单元，例如只读存储器（ROM）303和随机存取存储器（RAM）304，能够存储计算机处理和/或通信使用的各种数据文件，以及处理器302所执行的可能的程序指令。处理器执行这些指令以实现方法的主要部分。处理器处理的结果通过通信端口传给用户设备，在用户界面上显示。

上述的Web端在线表单设计器的实现装置可以实施为计算机程序，保存在存储器中，并可记载到处理器302中执行，以实施本申请的Web端在线表单设计器的实现方法。

本申请还提供了一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如上所述的Web端在线表单设计器的实现方法。

本申请的一些方面可以完全由硬件执行、可以完全由软件（包括固件、常驻软件、微码等）执行、也可以由硬件和软件组合执行。以上硬件或软件均可被称为“数据块”、“模块”、“引擎”、“单元”、“组件”或“系统”。处理器可以是一个或多个专用集成电路（ASIC）、数字信号处理器（DSP）、数字信号处理器件（DAPD）、可编程逻辑器件（PLD）、现场可编程门阵列（FPGA）、处理器、控制器、微控制器、微处理器或者其组合。此外，本申请的各方面可能表现为位于一个或多个计算机可读介质中的计算机产品，该产品包括计算机可读程序编码。例如，计算机可读介质可包括，但不限于，磁性存储设备（例如，硬盘、软盘、磁带……）、光盘（例如，压缩盘CD、数字多功能盘DVD……）、智能卡以及闪存设备（例如，卡、棒、键驱动器……）。

计算机可读介质可能包含一个内含有计算机程序编码的传播数据信号，例如在基带上或作为载波的一部分。该传播信号可能有多种表现形式，包括电磁形式、光形式等等、或合适的组合形式。计算机可读介质可以是除计算机可读存储介质之外的任何计算机可读介质，该介质可以通过连接至一个指令执行系统、装置或设备以实现通讯、传播或传输供使用的程序。位于计算机可读介质上的程序编码可以通过任何合适的介质进行传播，包括无线电、电缆、光纤电缆、射频信号、或类似介质、或任何上述介质的组合。

同理，应当注意的是，为了简化本申请披露的表述，从而帮助对一个或多个发明实施例的理解，前文对本申请实施例的描述中，有时会将多种特征归并至一个实施例、附图或对其的描述中。但是，这种披露方法并不意味着本申请对象所需要的特征比权利要求中提及的特征多。实际上，实施例的特征要少于上述披露的单个实施例的全部特征。

虽然本申请已参照当前的具体实施例来描述，但是本技术领域中的普通技术人员应当认识到，以上的实施例仅是用来说明本申请，在没有脱离本申请精神的情况下还可作出各种等效的变化或替换，因此，只要在本申请的实质精神范围内对上述实施例的变化、变型都将落在本申请的权利要求书的范围内。

Claims (12)

1.一种Web端在线表单设计器的实现方法，包括以下步骤：

对设计表单的组件进行封装，得到JSON数据；所述封装形成的JSON数据包括组件的原始属性设置和初始数据渲染；所述原始属性对应所述组件的交互形态和图形样式；

将所述组件对应的所述JSON数据排列形成基础组件栏；

对所述基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件；

在表单设计区域监听经过所述第二级封装的所述表单设计组件；当所述表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对所述表单设计组件进行数据绑定和渲染；

以响应式布局叠加流式布局对所述表单设计组件进行排列；

将所述排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面；

响应于点选表单设计区域的表单组件，显示所述表单组件的配置栏；

接收Web端对配置栏的操作，将配置结果渲染至所述表单设计区域；

更新所述配置结果对应的表单组件的虚拟DOM元素；

将设计形成的表单对应的JSON数据传输至服务器端。

2.根据权利要求1所述的Web端在线表单设计器的实现方法，其特征在于，还包括，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，形成表单页面。

3.根据权利要求1所述的Web端在线表单设计器的实现方法，其特征在于，还包括，从服务器端获取设计形成的表单对应的JSON数据，在Web端进行解析和渲染，所述渲染的区域位于所述表单设计区域。

4.根据权利要求1所述的Web端在线表单设计器的实现方法，其特征在于，所述组件的交互形态包括以下的任意一个或多个：多行文本，单行文本，数值，单选框，下拉框，复选框，日期，时间，文件上传，分割线，签名，说明文字，富文本和多记录。

5.根据权利要求1所述的Web端在线表单设计器的实现方法，其特征在于，所述当前设计的表单界面以全局数据流形式进行存储。

6.根据权利要求1所述的Web端在线表单设计器的实现方法，其特征在于，所述配置包括校验配置和权限配置。

7.一种Web端在线表单设计器的实现装置，包括以下模块：

组件定义模块，被配置为：对设计表单的组件进行封装，得到JSON数据；所述封装形成的JSON数据包括组件的原始属性设置和初始数据渲染；所述原始属性对应所述组件的交互形态和图形样式；将所述组件对应的所述JSON数据排列形成基础组件栏；对所述基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件；

表单设计模块，被配置为：在表单设计区域监听经过所述第二级封装的所述表单设计组件；当所述表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对所述表单设计组件进行数据绑定和渲染；按响应式布局叠加流式布局对所述表单设计组件进行排列；响应于点选表单设计区域的表单组件，显示所述表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至所述表单设计区域；

表单演示渲染模块，被配置为：将所述排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面；更新所述配置结果对应的表单组件的虚拟DOM元素；

在线表单传输模块，将设计形成的表单对应的JSON数据传输至服务器端。

8.根据权利要求7所述的Web端在线表单设计器的实现装置，其特征在于，所述组件的交互形态包括以下的任意一个或多个：多行文本，单行文本，数值，单选框，下拉框，复选框，日期，时间，文件上传，分割线，签名，说明文字，富文本和多记录。

9.根据权利要求7所述的Web端在线表单设计器的实现装置，其特征在于，所述当前设计的表单界面以全局数据流形式进行存储。

10.根据权利要求7所述的Web端在线表单设计器的实现装置，其特征在于，所述配置包括校验配置和权限配置。

11.一种Web端在线表单设计器的实现装置，包括：

存储器，用于存储可由处理器执行的指令；以及

处理器，用于执行所述指令以实现如权利要求1-6任一项所述的方法。

12.一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如权利要求1-6任一项所述的方法。

Images