表单渲染方法及表单渲染系统技术方案

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

【技术实现步骤摘要】
表单渲染方法及表单渲染系统


[0001]本申请涉及表单渲染
，特别是涉及一种表单渲染方法及表单渲染系统。

技术介绍

[0002]客户端在渲染每种类型的表单时，需要处理表单初始化、数据初始化、表单校验等逻辑，且将UI和逻辑耦合在一起统一进行渲染。
[0003]传统的表单渲染方法的开发成本高，每种类型的表单需要书写一套代码，且代码既不可以重复使用，又不可以多端使用。此外代码也无法处理复杂的表单条件设置行为和联动行为。

技术实现思路

[0004]基于此，有必要针对传统表单渲染方法开发成本高，每种类型的表单需要书写一套代码且无法处理复杂的表单条件设置行为和联动行为的问题，提供一种表单渲染方法。
[0005]本申请提供一种表单渲染方法，所述方法包括：
[0006]从服务器获取待渲染表单的表单定义；所述表单定义包括所述待渲染表单所需展示的每一个组件的组件信息、不同组件之间的联动关系、以及组件配置规则；
[0007]从所述服务器获取所述待渲染表单的表单数据，所述表单数据包括每一个组件所需赋予的值；
[0008]创建数据关系模块，依据所述表单定义和所述表单数据，创建组件行为并存储于数据关系模块中；
[0009]采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中；
[0010]依据标识、组件和值三者的对应关系，将每一个标识对应的组件的值赋予给组件，直至完成所有组件的值的赋予；
[0011]渲染所述待渲染表单；
[0012]实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整。
[0013]本申请还提供一种表单渲染系统，包括：
[0014]客户端，用于执行如前述内容提及的表单渲染方法；
[0015]服务器，与所述客户端通信连接，用于存储表单定义和表单数据。
[0016]本申请涉及一种表单渲染方法及表单渲染系统，通过基于有向无环图的拓扑算法生成组件联动数组，将互相依赖的表单组件抽象为一个有向无环图，可以设置各种组件条件与组件行为，根据拓扑算法在表单引擎中实现了组件联动的业务逻辑，并对待渲染表单中每一个组件的值的变化情况进行监听，当监听到一个组件的值发生变化时，可以调取组件联动数据，对与产生值变化的组件存在联动关系的其他组件的值进行实时的调整，从而实现节省开发成本的目的，仅书写一套公共的处理逻辑就可以进行多种表单的渲染，且可以多终端使用，将逻辑层与UI分离，UI主要由终端的使用者决定。
附图说明
[0017]图1为本申请一实施例提供的表单渲染方法的流程示意图。
[0018]图2为本申请一实施例提供的表单渲染方法中包含组件A、组件B、组件C、组件D、组件E和组件F的有向无环图。
[0019]图3为本申请一实施例提供的表单渲染方中包含组件B、组件C、组件E和组件F的有向无环图。
[0020]图4为本申请一实施例提供的表单渲染方法中包含组件C和组件F的有向无环图。
[0021]图5为本申请一实施例提供的表单渲染系统的结构示意图。
[0022]图6为本申请一实施例提供的客户端由主客户端和从客户端组成的表单渲染系统的结构示意图。
[0023]附图标记：
[0024]100
‑
客户端；110
‑
主客户端；120
‑
从客户端；200
‑
服务器
具体实施方式
[0025]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0026]本申请提供一种表单渲染方法。需要说明的是，本申请提供的表单渲染方法的应用于任何种类的表单的渲染。
[0027]此外，本申请提供的表单渲染方法不限制其执行主体。可选地，本申请提供的表单渲染方法的执行主体的可以为一种表单渲染系统。具体地，本申请提供的表单渲染方法的执行主体的可以为所述表单渲染系统中的客户端。
[0028]如图1所示，在本申请的一实施例中，所述表单渲染方法包括如下S100至S700：
[0029]S100，从服务器获取待渲染表单的表单定义。所述表单定义包括所述待渲染表单所需展示的每一个组件的组件信息、不同组件之间的联动关系、以及组件配置规则。
[0030]具体地，一个表单具有多个组件。一个表单的呈现效果是取决于组件的展示内容。因此，本步骤中，客户端向服务器首先发送获取表单定义的请求，服务器向客户端发送需要渲染的待渲染表单的表单定义。客户端从服务器获取待渲染表单的表单定义。
[0031]表单定义的形式为一个JSON字符串。表单定义包括组件的组件信息，例如类型，标识和占位符等。
[0032]表单定义包括不同组件之间的联动关系，例如一个组件的值产生变化了，另一个组件的值需要随之产生变化，这就是一种联动关系。
[0033]表单定义还包括组件配置规则。组件配置规则为配置组件内容的规则，例如组件内容是否为只读(即非管理人员无法修改)，是否显示内容(即可以隐藏组件内容)。
[0034]S200，从所述服务器获取所述待渲染表单的表单数据，所述表单数据包括每一个组件所需赋予的值。
[0035]具体地，待渲染表单的表单数据指的是需要实际填写在组件内的数据，是每一个组件所需赋予的值。
[0036]S300，创建数据关系模块，依据所述表单定义和所述表单数据，创建组件行为并存
储于数据关系模块中。
[0037]具体地，表单定义相当于规范了表单数据该如何显示，如何填写。表单数据则交代了组件需要填写的具体数据值，那么用户端就可以依据所述表单定义和所述表单数据，创建组件行为。组件行为包括一些条件的设置，例如组件A的值为X时，组件B显示，否则组件B不显示。或者组件A的值为X时，组件B的内容是必填的，否则组件B的内容不是必填的等等类似的条件设置。
[0038]S400，采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中。
[0039]具体地，在图论中，如果一个有向图无法从某个顶点出发经过若干条边回到该点，则这个图是一个有向无环图。由于组件的数量较多，组件与组件之间的联动关系并不可能最终是闭环的，比如说A组件的值变动，导致B组件和C组件的值变动，B组件和C组件的值变动又会导致其他组件的值变动，一般最终不会再导致A组件的值变动。因此不同组件之间的联动特性非常符合有向无环图的特点，本步骤采用有向无环图的拓扑算法，可以更好的梳理不同组件之间的联动关系。
[0040]S500，依据标识、组件和值三者的对应关系，将每一个标识对应的组件的值赋予给组件，直至完成所有组件的值的赋予。
[0041]具体地，本步骤是具体将表单数据中不同组件的值进行赋予的过程。赋予时通过本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种表单渲染方法，其特征在于，所述方法包括：从服务器获取待渲染表单的表单定义；所述表单定义包括所述待渲染表单所需展示的每一个组件的组件信息、不同组件之间的联动关系、以及组件配置规则；从所述服务器获取所述待渲染表单的表单数据，所述表单数据包括每一个组件所需赋予的值；创建数据关系模块，依据所述表单定义和所述表单数据，创建组件行为并存储于数据关系模块中；采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中；依据标识、组件和值三者的对应关系，将每一个标识对应的组件的值赋予给组件，直至完成所有组件的值的赋予；渲染所述待渲染表单；实时监听所述待渲染表单中每一个组件的值的变化情况，并依据组件联动数组实时对与产生值变化的组件存在联动关系的其他组件的值进行调整。2.根据权利要求1所述的表单渲染方法，其特征在于，在从所述服务器获取所述待渲染表单的表单数据之前，所述方法还包括：配置一个新表单并发送至服务器存储；所述配置一个新表单包括：自动生成新表单中每一个组件对应的标识，依据所有标识组成新表单。3.根据权利要求2所述的表单渲染方法，其特征在于，所述组件信息包括组件类型、组件标识和组件占位符中的一种或多种；所述组件配置规则包括组件只读配置信息、组件显示配置信息和组件赋值配置信息中的一种或多种。4.根据权利要求3所述的表单渲染方法，其特征在于，在采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中之前，所述方法还包括：运行数据关系模块，判断组件行为是否存在循环依赖；若组件行为不存在循环依赖，则执行后续采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中的步骤。5.根据权利要求4所述的表单渲染方法，其特征在于，在运行数据关系模块，判断组件行为是否存在循环依赖之后，所述方法还包括：若组件行为存在循环依赖，则输出报错信息，终止后续步骤。6.根据权利要求5所述的表单渲染方法，其特征在于，所述采用基于有向无环图的拓扑算法生成组件联动数组并存储于数据关系模块中，包括：依据所述表单定义中不同组件之间的联动关系，生成一张有向无环图；在所述有向无环图中，获取入度为0的组件，将入度为0的组件的序号统一置入一个等级为1的数组中，将入度为0的所有组件以及入度为0...

【专利技术属性】
技术研发人员：王连杰，卫蓉，
申请(专利权)人：杭州每刻科技有限公司，
类型：发明
国别省市：