CN112631591A - 表元素联动方法、装置、设备与计算机可读存储介质 - Google Patents

Abstract

本发明公开了一种表元素联动方法，包括：在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；若存在，则对所述关联项执行联动操作。本发明还公开了一种表元素联动装置、设备和计算机可读存储介质。本发明将指示联动关系的配置信息以预设标准格式传给服务器端存储，不需要代码化，降低了代码被攻击的风险，且通过模板组件快速生成目标表，更具灵活性，易于维护。

Description

表元素联动方法、装置、设备与计算机可读存储介质

技术领域

本发明涉及金融科技(Fintech)技术领域，尤其涉及表元素联动方法、装置、设备与计算机可读存储介质。

背景技术

近年来，随着金融科技(Fintech)，尤其是互联网金融的不断发展，数据处理技术被引入银行等金融机构的日常服务中。在银行等金融机构的日常服务过程中，为提高交互效率，往往会设置表单或者表格的数据与数据之间的联动关系，如表单项省份与表单项市区联动，当用户在省份项选择了某个省之后，市区项即随之联动变化，或者，表单项婚姻情况与配偶名字联动，当用户在婚姻情况项填了未婚，配偶名字项即隐藏，不需要填写等，因此，如何实现表单或者表格中数据或者输入框等表元素之间的联动是银行等金融机构需要解决的技术问题。

现有技术中，为实现表元素的联动关系，一般先根据需求设置表元素之间的联动关系，以此生成对应的JS代码，并将生成的JS代码存进数据库，然后，在展示页面，从数据库中拉取上述JS代码在网页上执行，通过渲染HTML、CS等、绑定表元素间的联动关系，最终生成一个内部可联动的表单。

上述方案将表元素、联动关系都存储在一段JS代码中，并在没有检验、过滤的情况下执行，很容易因JS代码被植入恶意代码，使得当前设备中的信息被盗取等情况发生，而且由于使用的是JS代码，因不能灵活通过修改代码来修改表单，导致后期维护难度大。

发明内容

本发明的主要目的在于提出一种表元素联动方法、装置、设备与计算机可读存储介质，旨在实现表元素的智能联动。

为实现上述目的，本发明提供一种表元素联动方法，所述表元素联动方法包括如下步骤：

在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；

若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；

若存在，则对所述关联项执行联动操作。

优选地，所述在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表的步骤之前，所述表元素联动方法还包括：

若接收到配置指令，则显示所述配置指令对应的配置界面，所述配置界面包含模板项；

若检测到基于所述模板项的选择指令，则确定所述选择指令对应的目标模板；

若检测到基于所述目标模板的新增指令，则确定所述目标模板的模板类型，并基于所述模板类型确定所述新增指令对应的配置页面；

接收基于所述配置页面输入的所述配置信息，并将所述配置信息按照预设标准格式存储在所述服务器中。

优选地，所述在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表的步骤包括：

在操作页面获取所述服务器预先存储的所述配置信息，并确定所述配置信息对应的模板类型；

基于所述模板类型，确定所述配置信息对应的模板组件，并将所述配置信息传入所述模板组件，以渲染生成目标表。

优选地，所述若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项的步骤包括：

若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并确定所述编辑项对应的修改值；

基于所述配置信息和所述修改值，查询所述编辑项是否存在关联项。优选地，所述对所述关联项执行联动操作的步骤包括：

确定所述关联项对应的目标值，基于所述目标值，确定所述关联项的信息类型，所述信息类型包括敏感信息和非敏感信息；

基于所述信息类型和所述修改值，确定所述关联项对应的联动操作并执行。

优选地，所述对所述关联项执行联动操作的步骤包括：

确定所述关联项所处的位置，并基于所述位置，确定所述关联项的联动类别；

若所述联动类别为表间联动，则获取所述关联项所在的联动表的配置信息，并基于所述联动表的配置信息，对所述关联项执行联动操作。

优选地，所述关联项至少包括第一关联项和第二关联项，所述联动操作至少包括第一联动操作和第二联动操作，所述对所述关联项执行联动操作的步骤包括：

对第一关联项执行第一联动操作，并确定所述第一联动操作对应的联动值；

基于所述联动值，对所述第二关联项执行第二联动操作，所述第二关联项为所述第一关联项的关联项。

此外，为实现上述目的，本发明还提供一种表元素联动装置，所述表元素联动装置包括：

获取生成模块，用于在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；

检测查询模块，用于若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；

判断执行模块，用于若存在，则对所述关联项执行联动操作。

优选地，所述表元素联动装置还包括接收配置模块，所述接收配置模块用于：

若接收到配置指令，则显示所述配置指令对应的配置界面，所述配置界面包含模板项；

若检测到基于所述模板项的选择指令，则确定所述选择指令对应的目标模板；

若检测到基于所述目标模板的新增指令，则确定所述目标模板的模板类型，并基于所述模板类型确定所述新增指令对应的配置页面；

接收基于所述配置页面输入的所述配置信息，并将所述配置信息按照预设标准格式存储在所述服务器中。

优选地，所述获取生成模块还用于：

在操作页面获取所述服务器预先存储的所述配置信息，并确定所述配置信息对应的模板类型；

基于所述模板类型，确定所述配置信息对应的模板组件，并将所述配置信息传入所述模板组件，以渲染生成目标表。

优选地，所述检测查询模块还用于：

若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并确定所述编辑项对应的修改值；

基于所述配置信息和所述修改值，查询所述编辑项是否存在关联项。

优选地，所述判断执行模块还用于：

确定所述关联项对应的目标值，基于所述目标值，确定所述关联项的信息类型，所述信息类型包括敏感信息和非敏感信息；

基于所述信息类型和所述修改值，确定所述关联项对应的联动操作并执行。

优选地，所述判断执行模块还用于：

确定所述关联项所处的位置，并基于所述位置，确定所述关联项的联动类别；

若所述联动类别为表间联动，则获取所述关联项所在的联动表的配置信息，并基于所述联动表的配置信息，对所述关联项执行联动操作。

优选地，所述关联项至少包括第一关联项和第二关联项，所述联动操作至少包括第一联动操作和第二联动操作，所述判断执行模块还用于：

对第一关联项执行第一联动操作，并确定所述第一联动操作对应的联动值；

基于所述联动值，对所述第二关联项执行第二联动操作，所述第二关联项为所述第一关联项的关联项。

此外，为实现上述目的，本发明还提供一种表元素联动设备，所述表元素联动设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的表元素联动程序，所述表元素联动程序被所述处理器执行时实现如上所述的表元素联动方法的步骤。

此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有表元素联动程序，所述表元素联动程序被处理器执行时实现如上所述的表元素联动方法的步骤。

本发明提出的表元素联动方法，在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；若存在，则对所述关联项执行联动操作。本发明中，服务器端预先存储有指示联动关系的配置信息，该过程不需要代码化，降低了代码被攻击的风险，且通过模板组件快速生成目标表，以根据编辑事件执行后续的表元素联动操作，无需通过JS代码渲染HTML、CS等、绑定表元素间的联动关系，更具操作的便捷和灵活性，易于维护。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图；

图2为本发明表元素联动方法第一实施例的流程示意图；

图3为本发明表元素联动方法第一实施例配置界面的一种效果示意图；

图4为本发明表元素联动方法第一实施例配置页面的一种效果示意图；

图5为本发明表元素联动方法第一实施目标表的初始界面示意图；

图6为本发明表元素联动方法第一实施执行联动操作后目标表的一种效果示意图；

图7为本发明表元素联动方法第一实施执行联动操作后目标表的另一种效果示意图；

图8为本发明表元素联动方法第二实施目标表的初始界面示意图；

图9为本发明表元素联动方法第二实施执行联动操作后目标表的一种效果示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图。

本发明实施例设备可以是移动终端或服务器设备。

如图1所示，该设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及表元素联动程序。

其中，操作系统是管理和控制表元素联动设备与软件资源的程序，支持网络通信模块、用户接口模块、表元素联动程序以及其他程序或软件的运行；网络通信模块用于管理和控制网络接口1002；用户接口模块用于管理和控制用户接口1003。

在图1所示的表元素联动设备中，所述表元素联动设备通过处理器1001调用存储器1005中存储的表元素联动程序，并执行下述表元素联动方法各个实施例中的操作。

基于上述硬件结构，提出本发明表元素联动方法实施例。

参照图2，图2为本发明表元素联动方法第一实施例的流程示意图，所述方法包括：

步骤S10，在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；

步骤S20，若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；

步骤S30，若存在，则对所述关联项执行联动操作。

本实施例表元素联动方法运用于理财机构或者银行等金融机构的表元素联动设备中，表元素联动设备可以是终端、机器人或者PC设备等，为描述方便，表元素联动设备以联动设备简称。

随着银行金融业务的增长，在数据治理服务申请的系统中，对网页上表单和表格的功能要求不断扩展，联动操作不断丰富，目前开源的第三方解决方案已无法满足业务发展的需要，为了满足用户需求，解决重复开发问题，提升开发效率，需要重新定义一套更好的解决方案来解决对表单和表格的联动操作。

本实施例针对网页上的表单和表格等表，通过动态配置字段信息、配置不同的联动类型，然后将用户配置的信息通过预设标准格式，如JSON格式传给服务器存储，并在页面上基于同一套代码(模板组件)快速生成不同的表单或表格，解决以往不同的页面中相似的功能需要重复开发的问题，降低开发成本，解放生产力。

传统方式，根据需求生成特定的JavaScript代码片段，然后将代码全部传给服务器存储，在网页上执行服务器存储的代码来生成表单或表格，这种方式在数据传输时存在会有代码被篡改或注入等安全问题，虽然可以将传输的代码加密，但由于代码量庞大，会导致传输数据加大引起网络传输慢等其他问题，对于服务器数据库存储来说，数据量大时存储成本会不断加大，维护成本也高，而且由于存储的是代码，在已生成的表单或表格中不能灵活修改，用户在每次修改复杂的表单的配置时，都会重新生成大量的JS代码并以字符串的形式存入数据库，这些数量过多的代码在存取过程中占用大量服务器的资源，同时会对网络传输造成很大的压力，使得其支持的功能不易扩展。

本实施例采用的方式是事先把用户配置的配置信息通过JSON等标准的格式传给服务器存储，降低了代码被攻击的风险，并且是通过获取服务器中预先存储的配置信息，再结合前端开发好的一套代码模板(模板组件)来生成表单或表格等目标表，扩展时只需要修改配置信息，更具灵活性，其联动功能也更丰富，既包括表单或表格页面UI的联动，比如根据表单的某个值变化显示或隐藏另一个输入框；也包括表单或表格页面数据的联动，比如根据输入表单的某个值改变另一个输入框的值；还包括表单或表格页面上的数据和远程服务端的数据的联动，比如编辑了表格的某个单元格后，会触发配置的接口拉取远程服务器的数据，然后将数据自动填充到表格指定的单元格内等，需要解释的是，在本实施例中，表中的数据或者UI等统称为表元素。

采用本实施例的方案可提高设备安全性，代码更轻便，修改和维护成本更低，通过配置的方式使得表单或表格等表的功能更灵活也更丰富。

以下将对各个步骤进行详细说明：

在一实施例中，步骤S10之前，表元素联动方法还包括：

步骤a1，若接收到配置指令，则显示所述配置指令对应的配置界面，所述配置界面包含模板项；

在一实施例中，用户可在联动设备下达配置指令，联动设备为响应配置指令，提供一个配置界面，该配置界面包含有不同的模板项，模板项可选包括表单、表格、表单+表格等，如图3所示，其中，模板项决定了后续页面上生成的目标表是表单还是表格及其页面样式。

步骤a2，若检测到基于所述模板项的选择指令，则确定所述选择指令对应的目标模板；

在一实施例中，若检测到基于模板项的选择指令，具体可由用户移动联动设备的鼠标触发，联动设备则根据鼠标位置，确定用户想要的目标模板是哪一个，需要说明的是，模板项可任意组合，也即，用户可通过鼠标选择多个模板进行组合。

步骤a3，若检测到基于所述目标模板的新增指令，则确定所述目标模板的模板类型，并基于所述模板类型确定所述新增指令对应的配置页面；

在一实施例中，若检测到基于目标模板的新增指令，具体在配置界面设置有新增按钮，联动设备通过检测点击指令，先确定目标模板的模板类型，具体是表格还是表单，或者是表格+表单，然后根据模板类型确定新增指令对应的配置页面，以供用户输入，也即，不同的模板项，其需要配置的配置项不同，从而生成的配置页面也不尽相同。

步骤a4，接收基于所述配置页面输入的所述配置信息，并将所述配置信息按照预设标准格式存储在所述服务器中。

在一实施例中，联动设备提供一个配置页面，如图4所示，供用户按需输入配置信息，具体的，配置页面包括基础项、依赖配置项、后台使用项、文件相关配置项等可配置区域，配置信息包括基础项信息和依赖配置项信息，基础项信息即在基础项区域输入的信息，用于指示后续生成的目标表的基础表单项，包括key、标题、类型、能否编辑等信息，分别对应代码key、title、type、editable等字段，key的值标识表单项的唯一性，如用户输入key：address，标题：居住地，类型：input，能否编辑：能，则后续生成的目标表包含地址这一可编辑项。

而依赖配置项信息即在依赖配置项区域输入的信息，用于指示基础项的联动关系，如上述地址基础项与性别基础项联动，且在性别为女性时，删除，则后续生成的目标表中包含有性别项和地址项，在性别项为女时，原先的地址项删除。

用户在配置完相关配置信息之后，点击确认，联动设备即将配置信息按照预设标准格式存储在服务器中，具体的，预设标准格式可为JSON格式，也即，通过JSON的格式，联动设备将配置信息传到服务器存储。

步骤S10，在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表。

在本实施例中，联动设备还提供一个操作页面，用于生成目标表，具体的，用户可在操作页面上，获取服务器存储的配置信息，并根据配置信息和模板组件，生成目标表，其中，模板组件为前端开发的一套代码。

进一步的，在一实施例中，步骤S10包括：

步骤b1，在操作页面获取所述服务器预先存储的所述配置信息，并确定所述配置信息对应的模板类型；

在一实施例中，联动设备先在操作页面获取服务器中的配置信息，并确定配置信息对应的模板类型，其中，模板类型包括表单、表格和表单+表格的组合表，不同的模板都由a-input、a-select、a-radio等组件组成，模板组件内提供了事件绑定、实现了各种联动类型、可获取输入的数据、更新数据、清空数据等功能

步骤b2，基于所述模板类型，确定所述配置信息对应的模板组件，并将所述配置信息传入所述模板组件，以渲染生成目标表。

在一实施例中，根据模板类型，确定配置信息对应的模板组件，也即，在一实施例中，不同的模板还可对应不同的组件，然后，将配置信息传入模板组件，模板组件就会根据配置信息渲染不同的输入框类型，然后在页面上生成表单或者表格等目标表，并且，不同的表单项在渲染完成后即拥有了配置了的联动功能。

也即，在本实施例中，可在操作页面获取服务器存储的配置信息，再根据配置信息和前端封装好的模板组件，在操作页面上快速生成一个表单或表格等目标表。

步骤S20，若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项。

在本实施例中，当用户在目标表中编辑某一个表单项时，input输入框或select下拉框等目标表的组件的change方法监听到用户的这个行为，即触发编辑事件，则确定编辑事件对应的编辑项，也即确定用户编辑的具体是目标表的哪一个表单项。

然后，遍历目标表全部的配置信息，查找有没有配置了联动是依赖当前编辑项的关联项。

进一步的，在一实施例中，步骤S20包括：

步骤c1，若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并确定所述编辑项对应的修改值；

在一实施例中，若检测到基于目标表的编辑事件，则先确定编辑事件对应的编辑项，并进一步确定编辑项对应的修改值，如编辑项为性别，修改值为女等。

步骤c2，基于所述配置信息和所述修改值，查询所述编辑项是否存在关联项。

在一实施例中，根据配置信息和修改值，查询编辑项是否存在关联项，也即，为丰富联动功能，提供更多的联动可能性，以满足实际业务的需求，在一实施例中，在查询编辑项对应的关联项时，附加的修改值，更为精准的筛选出关联项，使得关联项不是与编辑项固定一个逻辑，而是可以搭配多种逻辑的灵活配置，关联项与编辑项之间的联动关系更为灵活。

步骤S30，若存在，则对所述关联项执行联动操作。

在本实施例中，若遍历配置信息之后确定存在关联项，则对关联项执行联动操作，具体按照配置信息中的配置执行，如在配置信息中，关联项为响应编辑项的联动操作为隐藏，则将关联项隐藏，也即关联项的联动操作是在配置信息中设置好的。

进一步的，在一实施例中，对所述关联项执行联动操作的步骤包括：

步骤d1，确定所述关联项对应的目标值，基于所述目标值，确定所述关联项的信息类型，所述信息类型包括敏感信息和非敏感信息；

在一实施例中，在确定了关联项后，确定关联项对应的目标值，也即关联项中原本所显示的值，然后，根据关联项的目标值，确定关联项的信息类型，其中，信息类型包括敏感信息和非敏感信息，具体的，事先划分表单项中所填的数据信息包括敏感信息，如电话号码，居住地等，和非敏感信息，如姓名等，因此，可根据目标值，确定关联项的信息类型是敏感信息还是非敏感信息。

步骤d2，基于所述信息类型和所述修改值，确定所述关联项对应的联动操作并执行。

在一实施例中，根据信息类型和编辑项的修改值，确定关联项对应的联动操作并执行，如关联项的信息类型为敏感信息，如居住地，编辑项的修改值为女，则对关联项进行隐藏，也即隐藏居住地等。

在具体实施时，参照图4，如改变目标表某一编辑项的值，控制另一关联项可编辑或不可编辑、显示或隐藏等功能，具体先在配置界面中选择模板项，然后新增姓名、年龄、性别、居住地4个表单项，每个表单项配置对应的配置信息，其中，以居住地为例，“能否编辑”选择了能(disabled：flase)，则表示居住地这个字段初始在页面上就可以编辑；“可编辑时依赖的项的key”字段输入了name(disabledKey:“name”),“变成不可编辑时依赖的项的值”填了张三(disableValue：“张三”)，表示如果表单项中的姓名(name)输入的是“张三”(value)，居住地就会变成不可编辑，否则可以正常输入居住地；“能否为空”选择了不能(required:true)，表示默认居住地输入值不能为空；“页面是否显示”选择了显示(showWeb：true),表示默认居住地展示在页面上；“联动类型”选择了删除(actionType:“delete”)，“依赖项的key”填写了sex(dependKey:“sex”),“依赖项对应的值”填写了女(dependValue:“女”)，表示如果在性别是女，那么在页面上就会删除也就是在页面上不展示居住地这个表单项，否则就是正常显示等。

每次编辑姓名时，会监听到用户的这个行为触发input输入框组件的change事件，通过event.target.value获取到用户修改后的值，同时可拿到姓名这个表单项的相关配置信息，然后查找其他表单项的配置信息，看看有没有配置了信息是依赖姓名的值变化而发生变化的表单项，首先找到了居住地的配置信息中，disabledKey的值name是姓名的配置信息中的key值name，接着判断居住地配置信息中disabledValue的值“张三”和输入的姓名“张三”一致，就将居住地这个表单项变成不可编辑状态，如果值不一致就不做处理，接着继续查找还有没有别的表单项会在修改姓名的值发生变化，没有找到不做处理，如果有就继续执行相关联动操作。

同理，每次用户编辑年龄时，也会触发input输入框组件的change事件，然后执行上述同样的操作，首先找到了居住地的配置信息中，dependKey的值和年龄配置信息中key的值一致，dependValue和当前输入的年龄也一样，接口看居住地配置信息中actionType配置的是删除，也就是满足条件时在页面上不展示该表单项，所以就在当年龄输入18时，就把居住地这个表单项配置信息中的showWeb字段的值由true变成false,即在页面上隐藏居住地这个表单项，接着继续查找，直至遍历完所有的配置信息。

如目标表初始界面包含姓名、年龄、性别、居住地四个编辑区域，如图5所示，此时，输入姓名为张三之后，居住地变成了不可编辑，如图6所示，如果修改姓名的值为其他值就会正常可以编辑；而如果输入年龄为18，居住地在页面上就被隐藏了，如图7所示，如果修改年龄的值为其他就会正常显示。

本实施例在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；若存在，则对所述关联项执行联动操作。本发明将指示联动关系的配置信息以预设标准格式预先存储在服务器端，不需要代码化，降低了代码被攻击的风险，且通过模板组件快速生成目标表，更具灵活性，易于维护

进一步地，基于本发明表元素联动方法第一实施例，提出本发明表元素联动方法第二实施例。

表元素联动方法的第二实施例与表元素联动方法的第一实施例的区别在于，对所述关联项执行联动操作的步骤包括：

步骤d3，确定所述关联项所处的位置，并基于所述位置，确定所述关联项的联动类别；

步骤d4，若所述联动类别为表间联动，则获取所述关联项所在的联动表的配置信息，并基于所述联动表的配置信息，对所述关联项执行联动操作。

本实施例除了提供目标表的表内联动，也即目标表内部表单项的联动之外，还提供了表间联动，也即目标表与其他表格或者表单之间的联动操作，从而实现多样化联动。

以下将对各个步骤进行详细说明：

步骤d3，确定所述关联项所处的位置，并基于所述位置，确定所述关联项的联动类别。

在本实施例中，联动设备在查找到关联项之后，先确定关联项所处的位置，其中，关联项所处的位置包括位于目标表内，位于目标表之外的其他表格或者表单中，根据关联项所处的位置，确定关联项的联动类别，其中，联动类别包括表内联动和表间联动。

步骤d4，若所述联动类别为表间联动，则获取所述关联项所在的联动表的配置信息，并基于所述联动表的配置信息，对所述关联项执行联动操作。

在本实施例中，若联动类别为表间联动，也即表单和表格之间的联动，则获取关联项所在的联动表的配置信息，并按照联动表的配置信息对关联项执行联动操作，其中，表单和表格之间的联动操作大致与表单内部，表格内部之间的联动一样，但是由于表单和表格是不同的组件，表单的操作如果要影响表格的变化，需要跨组件通信，在表单项的值发生变化时，要拿到表格的配置信息，然后遍历表格的配置信息，看是否有配置了依赖当前修改的编辑项进行的显示或隐藏等联动操作。

具体的以表单和表格之间的表间联动为例：当用户编辑表单的某一项内容时，触发input输入框等组件的change事件，通过event.target.value拿到用户输入的值和当前表单项的配置信息，同时还要通过组件通信获取到表格的配置信息和数据，然后遍历所有的表格配置信息，看是否有配置了相关的信息指明当前操作的表单项，也即编辑项，会影响整个表格显示或隐藏或改变表格某一列的值等联动，如果有则执行配置了的联动操作，如果没有则不做处理。

进一步的，在一实施例中，所述关联项至少包括第一关联项和第二关联项，所述联动操作至少包括第一联动操作和第二联动操作，所述对所述关联项执行联动操作的步骤包括：

步骤d5，对第一关联项执行第一联动操作，并确定所述第一联动操作对应的联动值；

在一实施例中，关联项包括第一关联项和第二关联项，其中，第二关联项时第一关联项的关联项，也即，当编辑项改变引起第一关联项改变时，会进一步引起第二关联项的改变，具体的，先对第一关联项执行第一联动操作，并确定第一联动操作对应的联动值。

步骤d6，基于所述联动值，对所述第二关联项执行第二联动操作，所述第二关联项为所述第一关联项的关联项。

接着，根据联动值，对第二关联项执行第二联动操作。

例如：在表单和表格中，根据表单和表格字段的变化，通过配置的接口从服务端拉取数据，并将数据自动填充到表格的某个单元格中，同时自动填充数据的单元格的值又会影响别的单元格变成不可编辑或者可编辑的功能。

如图8所示生成的表单和表格中，实现的功能有：表格“状态1”的一列的单元格在配置页面中选择了不能编辑，并指定其值由服务端提供，用户配置从服务端拉取数据的接口url，接口参数配置为：“集群1”、“集群2”、“数据库名1”、“数据表名1”这4项的值，用户在编辑时如果这4项都有值或值发生了变化就调用拉取“状态1”数据的接口，拿到远程服务端返回的数据后，将数据自动填充到“状态1”的单元格中，同时如果从服务端拿到“状态1”的数据会触发表格其他项，如“集群3”、“数据库名3”、“数据表名3”、“状态3”这4列变成不可编辑状态等，如图9所示。

本实施例提供了表间联动，通过联动变的配置信息对关联项执行相关的联动操作，且关联项的变化还会引起其他关联项的变化，从而实现多样化联动。

本发明还提供一种表元素联动装置。本发明表元素联动装置包括：

获取生成模块，用于在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；

检测查询模块，用于若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；

判断执行模块，用于若存在，则对所述关联项执行联动操作。

优选地，所述表元素联动装置还包括接收显示模块，所述接收显示模块用于：

若接收到配置指令，则显示所述配置指令对应的配置界面，所述配置界面包含模板项；

若检测到基于所述模板项的选择指令，则确定所述选择指令对应的目标模板；

若检测到基于所述目标模板的新增指令，则确定所述目标模板的模板类型，并基于所述模板类型确定所述新增指令对应的配置页面，以供输入。

优选地，所述获取生成模块还用于：

在操作页面获取所述服务器预先存储的所述配置信息，并确定所述配置信息对应的模板类型；

基于所述模板类型，确定所述配置信息对应的模板组件，并将所述配置信息传入所述模板组件，以渲染生成目标表。

优选地，所述检测查询模块还用于：

若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并确定所述编辑项对应的修改值；

基于所述配置信息和所述修改值，查询所述编辑项是否存在关联项。

优选地，所述判断执行模块还用于：

确定所述关联项对应的目标值，基于所述目标值，确定所述关联项的信息类型，所述信息类型包括敏感信息和非敏感信息；

基于所述信息类型和所述修改值，确定所述关联项对应的联动操作并执行。

优选地，所述判断执行模块还用于：

确定所述关联项所处的位置，并基于所述位置，确定所述关联项的联动类别；

若所述联动类别为表间联动，则获取所述关联项所在的联动表的配置信息，并基于所述联动表的配置信息，对所述关联项执行联动操作。

优选地，所述关联项至少包括第一关联项和第二关联项，所述联动操作至少包括第一联动操作和第二联动操作，所述判断执行模块还用于：

对第一关联项执行第一联动操作，并确定所述第一联动操作对应的联动值；

基于所述联动值，对所述第二关联项执行第二联动操作，所述第二关联项为所述第一关联项的关联项。

本发明还提供一种计算机可读存储介质。

本发明计算机可读存储介质上存储有表元素联动程序，所述表元素联动程序被处理器执行时实现如上所述的表元素联动方法的步骤。

其中，在所述处理器上运行的表元素联动程序被执行时所实现的方法可参照本发明表元素联动方法各个实施例，此处不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书与附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种表元素联动方法，其特征在于，所述表元素联动方法包括如下步骤：

在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；

若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；

若存在，则对所述关联项执行联动操作。

2.如权利要求1所述的表元素联动方法，其特征在于，所述在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表的步骤之前，所述表元素联动方法还包括：

若接收到配置指令，则显示所述配置指令对应的配置界面，所述配置界面包含模板项；

若检测到基于所述模板项的选择指令，则确定所述选择指令对应的目标模板；

若检测到基于所述目标模板的新增指令，则确定所述目标模板的模板类型，并基于所述模板类型确定所述新增指令对应的配置页面；

接收基于所述配置页面输入的所述配置信息，并将所述配置信息按照预设标准格式存储在所述服务器中。

3.如权利要求1所述的表元素联动方法，其特征在于，所述在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表的步骤包括：

在操作页面获取所述服务器预先存储的所述配置信息，并确定所述配置信息对应的模板类型；

基于所述模板类型，确定所述配置信息对应的模板组件，并将所述配置信息传入所述模板组件，以渲染生成目标表。

4.如权利要求1所述的表元素联动方法，其特征在于，所述若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项的步骤包括：

若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并确定所述编辑项对应的修改值；

基于所述配置信息和所述修改值，查询所述编辑项是否存在关联项。

5.如权利要求4所述的表元素联动方法，其特征在于，所述对所述关联项执行联动操作的步骤包括：

确定所述关联项对应的目标值，基于所述目标值，确定所述关联项的信息类型，所述信息类型包括敏感信息和非敏感信息；

基于所述信息类型和所述修改值，确定所述关联项对应的联动操作并执行。

6.如权利要求1所述的表元素联动方法，其特征在于，所述对所述关联项执行联动操作的步骤包括：

确定所述关联项所处的位置，并基于所述位置，确定所述关联项的联动类别；

若所述联动类别为表间联动，则获取所述关联项所在的联动表的配置信息，并基于所述联动表的配置信息，对所述关联项执行联动操作。

7.如权利要求1-6任一项所述的表元素联动方法，其特征在于，所述关联项至少包括第一关联项和第二关联项，所述联动操作至少包括第一联动操作和第二联动操作，所述对所述关联项执行联动操作的步骤包括：

对第一关联项执行第一联动操作，并确定所述第一联动操作对应的联动值；

基于所述联动值，对所述第二关联项执行第二联动操作，所述第二关联项为所述第一关联项的关联项。

8.一种表元素联动装置，其特征在于，所述表元素联动装置包括：

获取生成模块，用于在操作页面获取服务器预先存储的配置信息，并基于所述配置信息和所述配置信息对应的模板组件，生成目标表；

检测查询模块，用于若检测到基于所述目标表的编辑事件，则确定所述编辑事件对应的编辑项，并基于所述配置信息，查询所述编辑项是否存在关联项；

判断执行模块，用于若存在，则对所述关联项执行联动操作。

9.一种表元素联动设备，其特征在于，所述表元素联动设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的表元素联动程序，所述表元素联动程序被所述处理器执行时实现如权利要求1至7中任一项所述的表元素联动方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有表元素联动程序，所述表元素联动程序被处理器执行时实现如权利要求1至7中任一项所述的表元素联动方法的步骤。

Images