CN113568693B - 表单渲染方法及表单渲染系统 - Google Patents

Abstract

本申请涉及一种表单渲染方法及表单渲染系统，通过基于有向无环图的拓扑算法生成组件联动数组，将互相依赖的表单组件抽象为一个有向无环图，可以设置各种组件条件与组件行为，根据拓扑算法在表单引擎中实现了组件联动的业务逻辑，并对待渲染表单中每一个组件的值的变化情况进行监听，当监听到一个组件的值发生变化时，可以调取组件联动数据，对与产生值变化的组件存在联动关系的其他组件的值进行实时的调整，从而实现节省开发成本的目的，仅书写一套公共的处理逻辑就可以进行多种表单的渲染，且可以多终端使用，将逻辑层与UI分离，UI主要由终端的使用者决定。

Description

表单渲染方法及表单渲染系统

技术领域

本申请涉及表单渲染技术领域，特别是涉及一种表单渲染方法及表单渲染系统。

背景技术

客户端在渲染每种类型的表单时，需要处理表单初始化、数据初始化、表单校验等逻辑，且将UI和逻辑耦合在一起统一进行渲染。

传统的表单渲染方法的开发成本高，每种类型的表单需要书写一套代码，且代码既不可以重复使用，又不可以多端使用。此外代码也无法处理复杂的表单条件设置行为和联动行为。

发明内容

基于此，有必要针对传统表单渲染方法开发成本高，每种类型的表单需要书写一套代码且无法处理复杂的表单条件设置行为和联动行为的问题，提供一种表单渲染方法。

本申请提供一种表单渲染方法，所述方法包括：

从服务器获取待渲染表单的表单定义；所述表单定义包括所述待渲染表单所需展示的每一个组件的组件信息、不同组件之间的联动关系、以及组件配置规则；

从所述服务器获取所述待渲染表单的表单数据，所述表单数据包括每一个组件所需赋予的值；

创建数据关系模块，依据所述表单定义和所述表单数据，创建组件行为并存储于数据关系模块中；

采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中；

依据标识、组件和值三者的对应关系，将每一个标识对应的组件的值赋予给组件，直至完成所有组件的值的赋予；

渲染所述待渲染表单；

实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整。

本申请还提供一种表单渲染系统，包括：

客户端，用于执行如前述内容提及的表单渲染方法；

服务器，与所述客户端通信连接，用于存储表单定义和表单数据。

本申请涉及一种表单渲染方法及表单渲染系统，通过基于有向无环图的拓扑算法生成组件联动数组，将互相依赖的表单组件抽象为一个有向无环图，可以设置各种组件条件与组件行为，根据拓扑算法在表单引擎中实现了组件联动的业务逻辑，并对待渲染表单中每一个组件的值的变化情况进行监听，当监听到一个组件的值发生变化时，可以调取组件联动数据，对与产生值变化的组件存在联动关系的其他组件的值进行实时的调整，从而实现节省开发成本的目的，仅书写一套公共的处理逻辑就可以进行多种表单的渲染，且可以多终端使用，将逻辑层与UI分离，UI主要由终端的使用者决定。

附图说明

图1为本申请一实施例提供的表单渲染方法的流程示意图。

图2为本申请一实施例提供的表单渲染方法中包含组件A、组件B、组件C、组件D、组件E和组件F的有向无环图。

图3为本申请一实施例提供的表单渲染方中包含组件B、组件C、组件E和组件F的有向无环图。

图4为本申请一实施例提供的表单渲染方法中包含组件C和组件F的有向无环图。

图5为本申请一实施例提供的表单渲染系统的结构示意图。

图6为本申请一实施例提供的客户端由主客户端和从客户端组成的表单渲染系统的结构示意图。

附图标记：

100-客户端；110-主客户端；120-从客户端；200-服务器

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供一种表单渲染方法。需要说明的是，本申请提供的表单渲染方法的应用于任何种类的表单的渲染。

此外，本申请提供的表单渲染方法不限制其执行主体。可选地，本申请提供的表单渲染方法的执行主体的可以为一种表单渲染系统。具体地，本申请提供的表单渲染方法的执行主体的可以为所述表单渲染系统中的客户端。

如图1所示，在本申请的一实施例中，所述表单渲染方法包括如下S100至S700：

S100，从服务器获取待渲染表单的表单定义。所述表单定义包括所述待渲染表单所需展示的每一个组件的组件信息、不同组件之间的联动关系、以及组件配置规则。

具体地，一个表单具有多个组件。一个表单的呈现效果是取决于组件的展示内容。因此，本步骤中，客户端向服务器首先发送获取表单定义的请求，服务器向客户端发送需要渲染的待渲染表单的表单定义。客户端从服务器获取待渲染表单的表单定义。

表单定义的形式为一个JSON字符串。表单定义包括组件的组件信息，例如类型，标识和占位符等。

表单定义包括不同组件之间的联动关系，例如一个组件的值产生变化了，另一个组件的值需要随之产生变化，这就是一种联动关系。

表单定义还包括组件配置规则。组件配置规则为配置组件内容的规则，例如组件内容是否为只读(即非管理人员无法修改)，是否显示内容(即可以隐藏组件内容)。

S200，从所述服务器获取所述待渲染表单的表单数据，所述表单数据包括每一个组件所需赋予的值。

具体地，待渲染表单的表单数据指的是需要实际填写在组件内的数据，是每一个组件所需赋予的值。

S300，创建数据关系模块，依据所述表单定义和所述表单数据，创建组件行为并存储于数据关系模块中。

具体地，表单定义相当于规范了表单数据该如何显示，如何填写。表单数据则交代了组件需要填写的具体数据值，那么用户端就可以依据所述表单定义和所述表单数据，创建组件行为。组件行为包括一些条件的设置，例如组件A的值为X时，组件B显示，否则组件B不显示。或者组件A的值为X时，组件B的内容是必填的，否则组件B的内容不是必填的等等类似的条件设置。

S400，采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中。

具体地，在图论中，如果一个有向图无法从某个顶点出发经过若干条边回到该点，则这个图是一个有向无环图。由于组件的数量较多，组件与组件之间的联动关系并不可能最终是闭环的，比如说A组件的值变动，导致B组件和C组件的值变动，B组件和C组件的值变动又会导致其他组件的值变动，一般最终不会再导致A组件的值变动。因此不同组件之间的联动特性非常符合有向无环图的特点，本步骤采用有向无环图的拓扑算法，可以更好的梳理不同组件之间的联动关系。

S500，依据标识、组件和值三者的对应关系，将每一个标识对应的组件的值赋予给组件，直至完成所有组件的值的赋予。

具体地，本步骤是具体将表单数据中不同组件的值进行赋予的过程。赋予时通过标识去分辨不同的组件，这样可以让赋予值更加简便化。

S600，渲染所述待渲染表单。

具体地，本步骤是表单的最终渲染步骤，执行渲染步骤后，表单可以呈现在html网页等载体上。

S700，实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整。

具体地，当监听到一个组件的值发生变化时，可以调取组件联动数据，对与产生值变化的组件存在联动关系的其他组件的值进行实时的调整。

本实施例中，通过基于有向无环图的拓扑算法生成组件联动数组，将互相依赖的表单组件抽象为一个有向无环图，可以设置各种组件条件与组件行为，根据拓扑算法在表单引擎中实现了组件联动的业务逻辑，并对待渲染表单中每一个组件的值的变化情况进行监听，当监听到一个组件的值发生变化时，可以调取组件联动数据，对与产生值变化的组件存在联动关系的其他组件的值进行实时的调整，从而实现节省开发成本的目的，仅书写一套公共的处理逻辑就可以进行多种表单的渲染，且可以多终端使用，将逻辑层与UI分离，UI主要由终端的使用者决定。

在本申请的一实施例中，在所述S100之前，所述表单渲染方法还包括如下步骤：

S010，配置一个新表单并发送至服务器存储。所述配置一个新表单包括：自动生成新表单中每一个组件对应的标识，依据所有标识组成新表单。

具体地，本步骤的执行主体可以为管理人员控制的主用户端。管理人员通过主用户端配置新表单并发送至服务器存储。这样服务器就会存放数量较多的表单。其他工作人员控制从用户端，服务器与每一个从用户端连接。当其他工作人员有渲染表单的需求时，可以通过从用户端向服务器发送调取请求，调取获取待渲染表单的表单定义，执行后续的表单渲染工作，实现按需渲染，将逻辑层与UI分离。

本实施例可以实现将逻辑层与UI分离，从客户端无须在渲染每种表单时，重新写一套代码进行渲染。

在本申请的一实施例中，所述组件信息包括组件类型、组件标识和组件占位符中的一种或多种。所述组件配置规则包括组件只读配置信息、组件显示配置信息和组件赋值配置信息中的一种或多种。

具体地，组件类型包括多行文本组件，单行文本组件，选择框组件，金额组件和数值组件等。多行文本组件在表单中显示为多行文本。单行文本组件在表单中显示为单行文本，一行限制所输入的字符数量。选择框组件呈现几个选择项。金额组件用于输入金额并显示金额。数值组件用于输入数值并显示数值。

只读配置信息用于确定组件是否设置为只读状态。组件显示配置信息用于确定组件的内容是否设置为可见，还是隐藏组件内容。组件赋值配置信息用于确定组件是否需要调用公式计算值，以及是否需要依赖某个值的变动重置原本数值并进行重新赋值。

本实施例中，通过获取组件类型，组件配置规则和组件标识，可以得到组件的动态配置属性。便于后续对组件的值的赋予，以及梳理不同组件之间的联动关系。

在本申请的一实施例中，在S300之后，S400之前，所述表单渲染方法还包括如下S351至S352：

S351，运行数据关系模块，判断组件行为是否存在循环依赖。

S352，若组件行为不存在循环依赖，则执行后续S400。

具体地，本步骤主要介绍了循环依赖的判定。循环依赖是组件行为中可能出现的错误。例如，一个组件行为是：组件A的值随着组件B的值的变动而变动，即组件A依赖组件B。组件B又依赖组件C，组件C又依赖组件A，这形成了一个逻辑错误的闭环，显然无法知晓组件A的值具体是什么。这就是存在了循环依赖。

本实施例中，通过在渲染表单前，对组件行为进行循环依赖的判定，有效的避免在逻辑层上的基础错误的产生。

在本申请的一实施例中，在所述S351之后，所述方法还包括如下步骤：

S353，若组件行为存在循环依赖，则输出报错信息，终止后续步骤。

具体地，所述报错信息可以通过报文的形式输出，也可以通过弹出警示界面或警示窗口的方式输出。

本实施例中，在组件行为存在循环依赖时，通过输出报错信息，阻止了后续步骤的进行，在产生循环依赖错误时避免了后续无效的操作步骤。

在本申请的一实施例中，所述S400包括如下S410至S460：

S410，依据所述表单定义中不同组件之间的联动关系，生成一张有向无环图。

具体地，如图2所示，图就是一张有向无环图，可以看到有向无环图中，有一条执行顺序链，以显示不同组件之间的联动关系。在图2中，组件A的值的变动会影响组件B的值，组件B的值的变动会影响组件C的值。组件D的值的变动会影响组件B的值和组件E的值。组件E的值的变动会影响组件F的值。同时组件B的值的变动也会影响组件F的值。

S420，在所述有向无环图中，获取入度为0的组件。将入度为0的组件的序号统一置入一个等级为1的数组中。将入度为0的所有组件以及入度为0的组件指向其他组件的关系线在有向无环图中删除。在所述有向无环图中，一个组件的入度为指向该组件的关系线的数量。

具体地，在所述有向无环图中，一个组件的入度为指向该组件的关系线的数量，一个组件的出度为该组件指向其他组件的关系线的数量。如图2所示，无任何组件指向组件A，那么组件A的入度为0。存在组件A指向组件B的关系线，因此组件A的出度为1。

在图2中，找到入度为0的组件是组件A和组件D，那么将组件A和组件D置入等级为1的数组S1，S1＝[A，D]中。然后将图2中的组件A和组件D删除，将组件A指向组件B的关系线删除。将组件D指向组件B的关系线删除。将组件D指向组件E的关系线删除，这样就形成了图3。

S430，基于上一步骤S420处理后的有向无环图，获取入度为0的组件。将入度为0的组件的序号统一置入一个等级为2的数组中。将入度为0的所有组件以及入度为0的组件指向其他组件的关系线在有向无环图中删除。

具体地，如图3所示，在图3的基础上继续执行与S420类似的步骤，找到入度为0的组件是组件B和组件E，那么将组件B和组件E置入等级为2的数组S2中，S2＝[B，E]。然后将图中的组件B和组件E删除，将组件B指向组件C的关系线删除。将组件B指向组件F的关系线删除。将组件E指向组件F的关系线删除，这样就形成了图4。

S440，反复执行所述S430，直至所述有向无环图中无任何组件存在，得到多个数组。每次将入度为0的组件的序号统一置入一个数组时，数组的等级加1。

具体地，反复执行S430，直至遍历完所有的节点，直至所述有向无环图中无任何组件存在。每次处理时，获取入度为0的组件，将入度为0的组件的序号统一置入一个等级加1的数组中，将入度为0的所有组件以及入度为0的组件指向其他组件的关系线在有向无环图中删除时，都是基于上一次处理后的有向无环图。

如图4所示，最终将有向无环图中的组件C和组件F置入等级为3的数组S3，S3＝[C，F]。最终有向无环图为空白，没有任何组件存在，可以执行后续合并数组的步骤了。

S450，将多个数组合并为组件联动数组。

具体地，承接上述的例子，将S1，S2和S3合并后，形成组件联动数组S＝{[A，D]，[B，E]，[C，F]}。

S460，将所述组件联动数组存储于数据关系模块中。

具体地，组件联动数组S＝{[A，D]，[B，E]，[C，F]}体现了所有组件的联动顺序。

本实施例中，过基于有向无环图的拓扑算法生成组件联动数组，将互相依赖的表单组件抽象为一个有向无环图，可以设置各种组件条件与组件行为，根据拓扑算法在表单引擎中实现了组件联动的业务逻辑，体现了所有组件的联动顺序。

在本申请的一实施例中，所述S700包括如下S710至S730：

S710，监听所述待渲染表单中每一个组件的值的变化。当监听到一个组件的值发生变化时，向服务器调取所述组件联动数组。

S720，在所述组件联动数组中过滤出与产生值变化的组件联动的组件。

S730，对与产生值变化的组件联动的组件的值进行调整。

具体地，监听所述待渲染表单中每一个组件的值的变化，可以依据组件联动数组S＝{[A，D]，[B，E]，[C，F]}的联动顺序来监听每一个组件的值的变化。承接上述的实施例，可以先同时发出获取A，D值的请求，等到两个请求都返回后再发第二组获取B，E值的请求，最后获取C，F的值，以这种顺序监听组件的值的变化更为效率，避免无效的监听操作。

在本申请的一实施例中，所述S720包括：

S721，在所述组件联动数组中，搜寻与产生值变化的组件联动的组件，且与产生值变化的组件联动的组件所处数组的等级大于产生值变化的组件所处数组的等级。

具体地，承接上述实施例，组件联动数组S＝{[A，D]，[B，E]，[C，F]}，当组件B的值发生改变时，需要在组件联动数组中过滤出和组件B相关的组件C和F，而组件A，组件D和组件E不参与搜寻。因为组件B所处的数组的等级为2，组件A和组件D虽然也和组件B有联动关系，但是组件A和组件D所处的数组等级为1，因此不参与搜寻。

本实施例，这样只搜寻比与产生值变化的组件所处数组相比等级高一级的数组中的有联动关系的组件并对其值进行调整，使得一个组件的值改变时不会回头再改变前一级数组的数值，而是按联动顺序改变下一级数组中组件的数值，以这种顺序调整组件的值更为效率，避免无效的调整操作。

在本申请的一实施例中，在S730之后，所述S700还包括：

S740，判断已调整值后的组件是否存在联动的其他组件。

S750，若已调整值后的组件存在联动的其他组件，则进一步判断与已调整值后的组件联动的其他组件所处数组的等级是否大于已调整值后的组件所处数组的等级。

S760，若与已调整值后的组件联动的其他组件所处数组的等级大于已调整值后的组件所处数组的等级，则对与已调整值后的组件联动的其他组件的值进行调整。

具体地，所述S700还包括：

S770，若与已调整值后的组件联动的其他组件所处数组的等级小于或等于已调整值后的组件所处数组的等级，则不对与已调整值后的组件联动的其他组件的值进行调整。

例如，组件联动数组S＝{[A，D]，[B，E]，[C，F]}，当组件A的值发生改变时，组件B是和组件A联动的，且组件A所处数组的等级为1，组件B所处数组的等级为2,2大于1，因此组对组件B的值进行调整。因为组件B的值进行了调整，可以发现组件C、组件D、组件F这三个组件和组件B均有联动关系。组件D所处的数组等级为1，小于组件B所处的数组等级2，因此不对组件D进行值的调整。组件C和组件F所处的数组等级为3，大于组件B所处的数组等级2，因此，对组件C和组件的值均进行调整。

按这个属性逐层进行调整后，组件C和组件F均无后续所处数组等级更高的联动组件，因此终止对组件值的调整。所有组件的值的调整完毕。

本实施例中，通过按照组件联动数组所展示的组件联动顺序逐层去调整组件值，避免传统方案中一个组件的值发生变动后，与该组件联动的组件全部进行调整值，避免无意义的操作，减小客户端计算压力。

组件联动数组S＝{[A，D]，[B，E]，[C，F]}，当组件B的值发生改变时，传统方案是组件A，组件D,组件C和组件F全部一起调整值，那么在组件D的值调整后，又会引发组件B和组件E的值的重新调整计算，可见发生了很多毫无意义的操作。

而采用本申请的方案，当组件B的值发生改变时，只需要调整组件C和组件F的值，无需调整组件D的值，减少了无意义操作。

本申请提供一种表单渲染系统。

如图5所示，在本申请的一实施例中，所述表单渲染系统包括客户端100和服务器200。所述客户端100用于执行前述实施例中提及的表单渲染方法。所述服务器200与所述客户端100通信连接。所述服务器200用于存储表单定义和表单数据。

具体地，在另一种实施方式中，如图6所示，客户端100可以包括一个主客户端110和多个从客户端120，主客户端110和服务器200通信连接，由管理人员操控，用于配置表单。服务器200又和多个从客户端120分别通信连接，每一个从客户端120由底层负责表单渲染的工作人员操控，用于渲染表单，这样的架构使得表单渲染工作处理起来效率更高。

需要注意的是，前述表单渲染方法的多个实施例，与本实施例的表单渲染系统可能都出现了“客户端”，“服务器”，他们是一致的，含义相同，为了行文简洁，仅在本实施例的表单渲染系统进行标号，表单渲染方法部分不再标号。

以上所述实施例的各技术特征可以进行任意的组合，各方法步骤也并不做执行顺序的限制，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种表单渲染方法，其特征在于，所述方法包括：

从服务器获取待渲染表单的表单定义；所述表单定义包括所述待渲染表单所需展示的每一个组件的组件信息、不同组件之间的联动关系、以及组件配置规则；

从所述服务器获取所述待渲染表单的表单数据，所述表单数据包括每一个组件所需赋予的值；

创建数据关系模块，依据所述表单定义和所述表单数据，创建组件行为并存储于数据关系模块中；

采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中；

依据标识、组件和值三者的对应关系，将每一个标识对应的组件的值赋予给组件，直至完成所有组件的值的赋予；

渲染所述待渲染表单；

实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整。

2.根据权利要求1所述的表单渲染方法，其特征在于，在从所述服务器获取所述待渲染表单的表单数据之前，所述方法还包括：

配置一个新表单并发送至服务器存储；所述配置一个新表单包括：自动生成新表单中每一个组件对应的标识，依据所有标识组成新表单。

3.根据权利要求2所述的表单渲染方法，其特征在于，所述组件信息包括组件类型、组件标识和组件占位符中的一种或多种；所述组件配置规则包括组件只读配置信息、组件显示配置信息和组件赋值配置信息中的一种或多种。

4.根据权利要求3所述的表单渲染方法，其特征在于，在采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中之前，所述方法还包括：

运行数据关系模块，判断组件行为是否存在循环依赖；

若组件行为不存在循环依赖，则执行后续采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中的步骤。

5.根据权利要求4所述的表单渲染方法，其特征在于，在运行数据关系模块，判断组件行为是否存在循环依赖之后，所述方法还包括：

若组件行为存在循环依赖，则输出报错信息，终止后续步骤。

6.根据权利要求5所述的表单渲染方法，其特征在于，所述采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中，包括：

依据所述表单定义中不同组件之间的联动关系，生成一张有向无环图；

在所述有向无环图中，获取入度为0的组件，将入度为0的组件的序号统一置入一个等级为1的数组中，将入度为0的所有组件以及入度为0的组件指向其他组件的关系线在有向无环图中删除；在所述有向无环图中，一个组件的入度为指向该组件的关系线的数量；

基于上一步骤处理后的有向无环图，获取入度为0的组件，将入度为0的组件的序号统一置入一个等级为2的数组中，将入度为0的所有组件以及入度为0的组件指向其他组件的关系线在有向无环图中删除；

反复执行前述步骤，直至所述有向无环图中无任何组件存在，得到多个数组；每次将入度为0的组件的序号统一置入一个数组时，数组的等级加1；

将多个数组合并为组件联动数组；

将所述组件联动数组存储于数据关系模块中。

7.根据权利要求6所述的表单渲染方法，其特征在于，实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整包括:

监听所述待渲染表单中每一个组件的值的变化，当监听到一个组件的值发生变化时，向服务器调取所述组件联动数组；

在所述组件联动数组中过滤出与产生值变化的组件联动的组件；

对与产生值变化的组件联动的组件的值进行调整。

8.根据权利要求7所述的表单渲染方法，其特征在于，在所述组件联动数组中过滤出与产生值变化的组件联动的组件，包括:

在所述组件联动数组中，搜寻与产生值变化的组件联动的组件，且与产生值变化的组件联动的组件所处数组的等级大于产生值变化的组件所处数组的等级。

9.根据权利要求8所述的表单渲染方法，其特征在于，在对与产生值变化的组件联动的组件的值进行调整之后，实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整还包括：

判断已调整值后的组件是否存在联动的其他组件；

若已调整值后的组件存在联动的其他组件，则进一步判断与已调整值后的组件联动的其他组件所处数组的等级是否大于已调整值后的组件所处数组的等级；

若与已调整值后的组件联动的其他组件所处数组的等级大于已调整值后的组件所处数组的等级，则对与已调整值后的组件联动的其他组件的值进行调整。

10.一种表单渲染系统，其特征在于，包括:

客户端，用于执行如权利要求1-9中任意一项所述的表单渲染方法；

服务器，与所述客户端通信连接，用于存储表单定义和表单数据。