CN116881594A - 视图更新方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种视图更新方法、装置、计算机设备、存储介质和计算机程序产品，涉及前端技术领域，可用于金融科技领域或其他相关领域。方法包括：加载视图树形数据中的选中节点及选中节点下的子节点；响应于针对选中节点的信息修改操作，基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息；根据匹配子节点对应的属性对象，确定选中节点对应的当前节点属性信息；匹配子节点为更新后的子节点列表信息中，与选中节点匹配的子节点；根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式；节点样式用于对选中节点对应的视图效果进行更新。采用本方法能够在进行视图更新时提高人机交互的智能性。

Description

视图更新方法、装置、计算机设备和存储介质

技术领域

本申请涉及前端技术领域，特别是涉及一种视图更新方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

目前在Web前端开发中，经常使用树形结构数据进行视图展示。对于节点数较少的情形，可以直接请求所有节点数据；但对于节点较多的情形，一般使用树组件的懒加载方法，只对选中节点加载子节点，不需要加载所有节点。但在懒加载状态下，更新任意树节点后，动态树会自动折叠到第一层级，需要重新展开来重新加载子节点，这种动态树反复展开的繁琐操作，导致人机交互效果较差。

因此，相关技术中在进行视图更新时存在着人机交互智能性较差的问题。

发明内容

基于此，有必要针对上述技术问题，提供一种能够在进行视图更新时提高人机交互智能性的视图更新方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种视图更新方法。所述方法包括：

加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

在其中一个实施例中，所述加载视图树形数据中的选中节点及所述选中节点下的子节点，包括：

动态加载所述视图树形数据的目标层级树节点；

响应于对所述目标层级树节点的节点选择操作，确定所述选中节点；

加载所述选中节点下的子节点。

在其中一个实施例中，所述响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息，包括：

响应于针对所述选中节点的信息修改操作，对所述选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点；

基于所述选中节点与对应的子节点之间的父子关系，更新所述信息修改后的选中节点对应的父节点的子节点列表信息。

在其中一个实施例中，所述基于所述选中节点与对应的子节点之间的父子关系，更新所述信息修改后的选中节点对应的父节点的子节点列表信息，包括：

按照预设的数据结构，将所述选中节点与对应的子节点之间的父子关系存储至映射关系中；

根据目标父节点对应的节点标识，更新所述映射关系中所述目标父节点下的子节点列表信息，得到所述更新后的子节点列表信息；所述目标父节点为所述信息修改后的选中节点对应的父节点。

在其中一个实施例中，所述响应于针对所述选中节点的信息修改操作，对所述选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点，包括：

获取所述选中节点对应的节点描述信息；

根据所述节点描述信息确定所述选中节点对应的节点状态；

在所述选中节点对应的节点状态为正常状态的情况下，响应于针对所述选中节点的信息修改操作。

在其中一个实施例中，所述根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息的步骤之前，所述方法还包括：

根据所述选中节点对应的节点标识，对所述更新后的子节点列表信息中的子节点进行匹配；

将所述更新后的子节点列表信息中对应的节点标识，与所述选中节点对应的节点标识相同的子节点，作为所述匹配子节点。

在其中一个实施例中，所述根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式，包括：

根据所述选中节点对应的节点标识，确定所述选中节点对应的视图页面元素节点；

根据所述选中节点对应的当前节点属性信息，修改所述视图页面元素节点对应的内联样式的属性值，得到对应的内联样式的修改后属性值；

根据所述视图页面元素节点对应的内联样式的修改后属性值，确定所述视图页面元素节点的修改后节点样式，得到所述选中节点对应的节点样式。

第二方面，本申请还提供了一种视图更新装置。所述装置包括：

加载模块，用于加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

更新模块，用于响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

属性确定模块，用于根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

样式确定模块，用于根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

上述视图更新方法、装置、计算机设备、存储介质和计算机程序产品，通过加载视图树形数据中的选中节点及选中节点下的子节点；选中节点为视图树形数据的目标层级树节点中的树节点；响应于针对选中节点的信息修改操作，基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息；根据匹配子节点对应的属性对象，确定选中节点对应的当前节点属性信息；匹配子节点为更新后的子节点列表信息中，与选中节点匹配的子节点；根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式；节点样式用于对选中节点对应的视图效果进行更新。

如此，实现了动态树懒加载时的局部更新，适用于动态树且节点量大的业务场景，通过树结构和节点详情信息的方式进行阐述，在加载子节点的过程中，对节点进行更新操作后，保持树层级和节点展开效果不变的情况下，结合业务需求，对节点进行视图更新，既保证了视图效果与后台视图树形数据的一致性，同时解决了懒加载树节点，更新任意树节点后，动态树自动折叠到第一层级，需反复展开的问题，达到了较好的交互效果，从而在进行视图更新时提高了人机交互的智能性。

附图说明

图1为一个实施例中一种视图更新方法的流程示意图；

图2为一个实施例中加载视图树形数据中的选中节点及选中节点下的子节点步骤的流程示意图；

图3为一个实施例中响应于针对选中节点的信息修改操作步骤的流程示意图；

图4为另一个实施例中一种视图更新方法的流程示意图；

图5为一个实施例中另一种视图更新方法的流程示意图；

图6为一个实施例中一种视图更新装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

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

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在一个实施例中，如图1所示，提供了一种视图更新方法，以该方法应用于计算机设备为例进行说明，该计算机设备可以是终端，终端可以但不限于是各种个人计算机、笔记本电脑、智能手机和平板电脑等。

本实施例中，该方法包括以下步骤：

步骤S110，加载视图树形数据中的选中节点及选中节点下的子节点。

其中，选中节点为视图树形数据的目标层级树节点中的树节点。

其中，视图树形数据为采用树组件和节点信息进行视图展示的视图页面对应的树形数据。

其中，目标层级树节点为视图树形数据中目标层级的树节点，可以为视图树形数据的第一层树节点。

具体实现中，计算机设备可以响应于用户账户的节点选择操作，确定视图树形数据的目标层级树节点中被用户账户选中的树节点，作为选中节点，计算机设备可以展开选中节点，以加载视图树形数据中的选中节点以及选中节点下的子节点。

步骤S120，响应于针对选中节点的信息修改操作，基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息。

具体实现中，用户账户可以对选中节点对应的节点描述信息进行修改，以向计算机设备输入针对选中节点的信息修改操作，从而计算机设备可以响应于信息修改操作，根据信息修改后的选中节点，并基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息。

其中，节点描述信息可以包括但不限于为节点名称、节点状态等信息中的至少一种。实际应用中，节点描述信息可以命名为节点详情信息。

步骤S130，根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息。

其中，匹配子节点为更新后的子节点列表信息中，与选中节点匹配的子节点

具体实现中，计算机设备在更新选中节点对应的父节点的子节点列表信息后，可以得到更新后的子节点列表信息，计算机设备可以在更新后的子节点列表信息中，确定与选中节点匹配的子节点，作为与选中节点匹配的匹配子节点；如此，此匹配子节点对应的属性对象为选中节点的最新节点属性信息，该最新节点属性信息作为选中节点对应的当前节点属性信息。

步骤S140，根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式。

其中，节点样式用于对选中节点对应的视图效果进行更新。

具体实现中，计算机设备可以根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式，通过节点样式对选中节点对应的视图效果进行更新，使得视图效果与后台视图树形数据保持一致。

上述视图更新方法中，通过加载视图树形数据中的选中节点及选中节点下的子节点；选中节点为视图树形数据的目标层级树节点中的树节点；响应于针对选中节点的信息修改操作，基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息；根据匹配子节点对应的属性对象，确定选中节点对应的当前节点属性信息；匹配子节点为更新后的子节点列表信息中，与选中节点匹配的子节点；根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式；节点样式用于对选中节点对应的视图效果进行更新。

如此，实现了动态树懒加载时的局部更新，适用于动态树且节点量大的业务场景，通过树结构和节点详情信息的方式进行阐述，在加载子节点的过程中，对节点进行更新操作后，保持树层级和节点展开效果不变的情况下，结合业务需求，对节点进行视图更新，既保证了视图效果与后台视图树形数据的一致性，同时解决了懒加载树节点，更新任意树节点后，动态树自动折叠到第一层级，需反复展开的问题，达到了较好的交互效果，从而在进行视图更新时提高了人机交互的智能性。

在一个实施例中，如图2所示，步骤S110包括：

步骤S210，动态加载视图树形数据的目标层级树节点。

具体实现中，计算机设备可以动态加载视图树形数据的目标层级树节点。

步骤S220，响应于对目标层级树节点的节点选择操作，确定选中节点。

具体实现中，用户账户可以选中目标层级树节点中的任意树节点进行展开，以向计算机设备输入对目标层级树节点的节点选择操作，从而计算机设备可以响应于节点选择操作，确定用户账户在目标层级树节点中选中的树节点，作为选中节点，并高亮显示选中节点。

步骤S230，加载选中节点下的子节点。

具体实现中，计算机设备在响应于节点选择操作，确定选中节点的同时，可以在视图树形数据中展开该选中节点，以加载该选中节点下的子节点。

本实施例的技术方案，通过动态加载视图树形数据的目标层级树节点；响应于对目标层级树节点的节点选择操作，确定选中节点；加载选中节点下的子节点；如此，可以供用户账户在视图树形数据的目标层级树节点中选中任意树节点，作为选中节点，并只加载选中节点下的子节点，可以减少对节点数据的请求量，更加高效加载树形数据的节点数据。

在一个实施例中，响应于针对选中节点的信息修改操作，基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息，包括：响应于针对选中节点的信息修改操作，对选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点；基于选中节点与对应的子节点之间的父子关系，更新信息修改后的选中节点对应的父节点的子节点列表信息。

具体实现中，计算机设备在响应于针对选中节点的信息修改操作，基于选中节点与对应的子节点之间的父子关系，更新选中节点对应的父节点的子节点列表信息的过程中，计算机设备可以响应于用户账户针对选中节点的信息修改操作，根据用户账户输入的修改信息对选中节点对应的节点描述信息进行修改，确定选中节点对应的修改后节点描述信息，从而可以得到信息修改后的选中节点，并显示操作成功提示消息。

如此，计算机设备可以基于选中节点与对应的子节点之间的父子关系，更新信息修改后的选中节点对应的父节点的子节点列表信息。

本实施例的技术方案，通过响应于针对选中节点的信息修改操作，对选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点；基于选中节点与对应的子节点之间的父子关系，更新信息修改后的选中节点对应的父节点的子节点列表信息；如此，在更新选中节点对应的节点描述信息后，再更新其父节点下的子节点列表信息，实现了对被更新的选中节点相关联的节点数据进行准确更新，以保持视图树形数据中树层级和节点展开效果不变。

在一个实施例中，基于选中节点与对应的子节点之间的父子关系，更新信息修改后的选中节点对应的父节点的子节点列表信息，包括：按照预设的数据结构，将选中节点与对应的子节点之间的父子关系存储至映射关系中；根据目标父节点对应的节点标识，更新映射关系中目标父节点下的子节点列表信息，得到更新后的子节点列表信息；目标父节点为信息修改后的选中节点对应的父节点。

具体实现中，计算机设备在基于选中节点与对应的子节点之间的父子关系，更新信息修改后的选中节点对应的父节点的子节点列表信息的过程中，计算机设备可以按照预设的数据结构，将选中节点与对应的子节点之间的父子关系存储至映射关系中。具体来说，计算机设备可以将选中节点添加到【父节点列表】中，以<选中节点，子节点列表.>的数据结构将父节点(添加到父节点列表的选中节点)、子节点及其关系存入映射关系Map中。

然后，计算机设备可以将信息修改后的选中节点对应的父节点作为目标父节点，获取目标父节点对应的节点标识(节点id)，再次请求子节点列表，更新Map中节点标识对应的目标父节点下的子节点列表信息，得到更新后的子节点列表信息。

本实施例的技术方案，通过按照预设的数据结构，将选中节点与对应的子节点之间的父子关系存储至映射关系中；根据目标父节点对应的节点标识，更新映射关系中目标父节点下的子节点列表信息，得到更新后的子节点列表信息；目标父节点为信息修改后的选中节点对应的父节点；如此，在选中节点的信息更新后，通过获取选中节点对应的父节点的节点标识，可以在存储有选中节点与对应的子节点之间的父子关系的映射关系中，快速准确地对其父节点下的子节点列表信息进行更新。

在一个实施例中，如图3所示，响应于针对选中节点的信息修改操作，对选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点，包括以下步骤：

步骤S310，获取选中节点对应的节点描述信息。

步骤S320，根据节点描述信息确定选中节点对应的节点状态。

其中，节点状态包括正常状态、修改状态和待复核状态中的一种。

步骤S330，在选中节点对应的节点状态为正常状态的情况下，响应于针对选中节点的信息修改操作。

具体实现中，计算机设备在响应于针对选中节点的信息修改操作，对选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点的过程中，计算机设备可以获取选中节点对应的节点描述信息，由于节点描述信息可以包括节点状态，计算机设备可以通过选中节点对应的节点描述信息，确定选中节点对应的节点状态，在选中节点对应的节点状态为正常状态的情况下，判定修改按钮可用，以供用户账户针对该选中节点进行信息修改操作，用户账户可以点击修改按钮，向计算机设备输入针对选中节点的信息修改操作，从而计算机设备可以响应于该信息修改操作。

本实施例的技术方案，通过获取选中节点对应的节点描述信息；根据节点描述信息确定选中节点对应的节点状态；在选中节点对应的节点状态为正常状态的情况下，响应于针对选中节点的信息修改操作；如此，可以根据节点状态准确判断是否可以针对选中节点进行信息修改，以在选中节点为正常状态的情况下进行信息修改，防止在选中节点为非正常状态下进行信息修改，有效提高了针对选中节点的信息修改操作的可靠性。

在一个实施例中，根据匹配子节点对应的属性对象，确定选中节点对应的当前节点属性信息的步骤之前，方法还包括：根据选中节点对应的节点标识，对更新后的子节点列表信息中的子节点进行匹配；将更新后的子节点列表信息中对应的节点标识，与选中节点对应的节点标识相同的子节点，作为匹配子节点。

具体实现中，计算机设备在根据匹配子节点对应的属性对象，确定选中节点对应的当前节点属性信息的步骤之前，计算机设备可以根据选中节点对应的节点标识，对更新后的子节点列表信息中的子节点进行匹配；如果更新后的子节点列表信息中，存在对应的节点标识与选中节点对应的节点标识相同的子节点，则将该子节点作为匹配子节点，此匹配子节点对应的属性对象为选中节点的最新节点属性信息，该最新节点属性信息作为选中节点对应的当前节点属性信息。

其中，当前节点属性信息可以包括但不限于为nodeType(节点的类型)、nodeName(节点的名称(标签名称))、nodeValue(节点值)等。

本实施例的技术方案，通过根据选中节点对应的节点标识，对更新后的子节点列表信息中的子节点进行匹配；将更新后的子节点列表信息中对应的节点标识，与选中节点对应的节点标识相同的子节点，作为匹配子节点；如此通过节点标识进行匹配，可以快速准确地在子节点列表信息中确定与选中节点匹配的匹配子节点。

在一个实施例中，根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式，包括：根据选中节点对应的节点标识，确定选中节点对应的视图页面元素节点；根据选中节点对应的当前节点属性信息，修改视图页面元素节点对应的内联样式的属性值，得到对应的内联样式的修改后属性值；根据视图页面元素节点对应的内联样式的修改后属性值，确定视图页面元素节点的修改后节点样式，得到选中节点对应的节点样式。

其中，视图页面元素节点为视图页面中的节点，视图页面元素节点相当于DOM(Document Object Model，文档对象模型)对象。具体来说，视图页面中的每一个元素可以视为一个节点，每个节点为一个对象，在操作视图页面元素时，可以将视图页面元素节点视为一个DOM对象，从而可以使用DOM对象的属性和方法进行相关操作。

具体实现中，计算机设备在根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式的过程中，由于视图树形数据中的树节点对应的节点名称、节点状态(包括正常状态、修改状态和待复核状态)等分别添加了id属性，且id属性与节点的node-key已进行关联，计算机设备可以根据选中节点对应的节点标识，通过DOM的id属性获取选中节点对应的DOM对象(即视图页面元素节点)。

然后，计算机设备可以根据选中节点对应的当前节点属性信息，修改对应的DOM对象内联样式的属性值，得到对应的内联样式的修改后属性值，从而通过视图页面元素节点对应的内联样式的修改后属性值，可以确定视图页面元素节点的修改后的节点样式，以使视图页面元素节点展示修改后的节点样式，以确定选中节点对应的节点样式。

本实施例的技术方案，通过根据选中节点对应的节点标识，确定选中节点对应的视图页面元素节点；然后，根据选中节点对应的当前节点属性信息，修改视图页面元素节点对应的内联样式的属性值，得到对应的内联样式的修改后属性值；然后，根据视图页面元素节点对应的内联样式的修改后属性值，确定视图页面元素节点的修改后节点样式，得到选中节点对应的节点样式；如此，可以根据选中节点对应的节点样式对选中节点对应的视图效果进行更新，使得视图效果与后台视图树形数据保持一致。

在另一个实施例中，如图4所示，提供了一种视图更新方法，以该方法应用于计算机设备为例进行说明，包括以下步骤：

步骤S402，动态加载视图树形数据的目标层级树节点。

步骤S404，响应于对目标层级树节点的节点选择操作，确定选中节点。

步骤S406，加载选中节点下的子节点。

步骤S408，响应于针对选中节点的信息修改操作，对选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点。

步骤S410，基于选中节点与对应的子节点之间的父子关系，更新信息修改后的选中节点对应的父节点的子节点列表信息，得到更新后的子节点列表信息。

步骤S412，根据选中节点对应的节点标识，对更新后的子节点列表信息中的子节点进行匹配。

步骤S414，将更新后的子节点列表信息中对应的节点标识，与选中节点对应的节点标识相同的子节点，作为匹配子节点。

步骤S416，根据匹配子节点对应的属性对象，确定选中节点对应的当前节点属性信息。

步骤S418，根据选中节点对应的当前节点属性信息，确定选中节点对应的节点样式。

需要说明的是，上述步骤的具体限定可以参见上文对一种视图更新方法的具体限定。

为了便于本领域技术人员立即额，图5提供了另一种视图更新方法的流程示意图。如图5所示，上述方法的工作流程分为三部分：1、初始渲染；2、数据更新和3、DOM更新；其中：

1.初始渲染

1.1用户账户可以在template(模板)中使用树组件，使用【slot(标签)+span(插槽)】自定义节点展示内容，包括三类；(1)未进行更新操作，展示为：节点名称；(2)对节点进行修改，展示为：节点名称(修改)；(3)其他用户账户下，修改节点显示为：节点名称(待复核)；如此，计算机设备通过响应于用户账户对节点的自定义操作，可以确定节点的自定义展示内容。

1.2计算机设备响应于用户账户在【span】中的节点属性添加操作，对节点名称、节点状态(包括正常状态、修改状态和待复核状态)等分别添加id属性，并将id属性与节点的node-key进行关联，以及针对节点设置内联样式或样式类。

举例：<span:id＝”`label_`+data.id”>{{node.label}}</span>

2.数据更新

2.1计算机设备动态加载第一层树节点；

2.2用户账户选中上述第一层树节点中的任意树节点展开，计算机设备将选中的树节点作为选中节点，并将选中节点高亮显示，并加载选中节点下的子节点，将选中节点添加到【父节点列表】中，以<选中节点，子节点列表.>的数据结构将父节点、子节点及其关系存入Map中；

2.3计算机设备获取选中节点对应的节点详情信息，根据选中节点是否是正常状态，判断修改按钮是否可用，如果是修改状态或待复核状态，修改按钮置灰不可用；若可用，用户账户通过点击修改按钮，向计算机设备输入针对选中节点的信息修改操作，从而计算机设备可以响应于该信息修改操作，确定选中节点对应的修改后节点描述信息，并显示操作成功提示消息。

2.4计算机设备获取选中节点的父节点id，再次请求子节点列表，更新Map中选中节点对应父节点的子节点列表信息，得到更新后的子节点列表信息；

2.5计算机设备在更新后的子节点列表信息中匹配选中节点，确定匹配子节点，此匹配子节点对应的属性对象为选中节点的最新节点属性信息，修改按钮禁用。

3.DOM更新

3.1计算机设备根据选中节点的最新节点属性信息，判断选中节点的展示内容，如节点颜色，节点当前状态等；

3.2计算机设备根据选中节点的节点id值(节点标识)，通过DOM的id属性获取选中节点的DOM对象；

3.3根据选中节点的最新节点属性信息，修改DOM对象内联样式的属性值，使其展示修改后的节点样式

举例：

const labelId＝`label_${id}`

Document.getElementById(labenId).style.color＝‘orange’

3.4其他用户账户登录，查看上述修改的选中节点，展示为：节点名称(待复核)；

3.5其他用户账户选中上述修改的选中节点，计算机设备获取选中节点对应的节点详情信息，判断修改按钮状态，修改按钮禁用，复核按钮显示，用户账户对选中节点进行复核操作，计算机设备提示操作成功，重复上述2.4，2.5，3.1，3.2，3.3；当选中节点为正常状态时，执行3.6；

3.6用户账户在视图树形数据中点击选中节点，选中节点的样式与其他未选中节点颜色有区别，在组件高亮样式下，添加样式类，点击任一正常状态节点，节点名称显示高亮效果。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的视图更新方法的视图更新装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个视图更新装置实施例中的具体限定可以参见上文中对于视图更新方法的限定，在此不再赘述。

在一个实施例中，如图6所示，提供了一种视图更新装置，包括：加载模块610、更新模块620、属性确定模块630和样式确定模块640，其中：

加载模块610，用于加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点。

更新模块620，用于响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息。

属性确定模块630，用于根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点。

样式确定模块640，用于根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

在其中一个实施例中，所述加载模块610，具体用于动态加载所述视图树形数据的目标层级树节点；响应于对所述目标层级树节点的节点选择操作，确定所述选中节点；加载所述选中节点下的子节点。

在其中一个实施例中，所述更新模块620，具体用于响应于针对所述选中节点的信息修改操作，对所述选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点；基于所述选中节点与对应的子节点之间的父子关系，更新所述信息修改后的选中节点对应的父节点的子节点列表信息。

在其中一个实施例中，所述更新模块620，具体用于按照预设的数据结构，将所述选中节点与对应的子节点之间的父子关系存储至映射关系中；根据目标父节点对应的节点标识，更新所述映射关系中所述目标父节点下的子节点列表信息，得到所述更新后的子节点列表信息；所述目标父节点为所述信息修改后的选中节点对应的父节点。

在其中一个实施例中，所述更新模块620，具体用于获取所述选中节点对应的节点描述信息；根据所述节点描述信息确定所述选中节点对应的节点状态；在所述选中节点对应的节点状态为正常状态的情况下，响应于针对所述选中节点的信息修改操作。

在其中一个实施例中，所述属性确定模块630，还用于根据所述选中节点对应的节点标识，对所述更新后的子节点列表信息中的子节点进行匹配；将所述更新后的子节点列表信息中对应的节点标识，与所述选中节点对应的节点标识相同的子节点，作为所述匹配子节点。

在其中一个实施例中，所述样式确定模块640，具体用于根据所述选中节点对应的节点标识，确定所述选中节点对应的视图页面元素节点；根据所述选中节点对应的当前节点属性信息，修改所述视图页面元素节点对应的内联样式的属性值，得到对应的内联样式的修改后属性值；根据所述视图页面元素节点对应的内联样式的修改后属性值，确定所述视图页面元素节点的修改后节点样式，得到所述选中节点对应的节点样式。

上述视图更新装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种视图更新方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置。显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

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

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

Claims (11)

1.一种视图更新方法，其特征在于，所述方法包括：

加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

2.根据权利要求1所述的方法，其特征在于，所述加载视图树形数据中的选中节点及所述选中节点下的子节点，包括：

动态加载所述视图树形数据的目标层级树节点；

响应于对所述目标层级树节点的节点选择操作，确定所述选中节点；

加载所述选中节点下的子节点。

3.根据权利要求1所述的方法，其特征在于，所述响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息，包括：

响应于针对所述选中节点的信息修改操作，对所述选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点；

基于所述选中节点与对应的子节点之间的父子关系，更新所述信息修改后的选中节点对应的父节点的子节点列表信息。

4.根据权利要求3所述的方法，其特征在于，所述基于所述选中节点与对应的子节点之间的父子关系，更新所述信息修改后的选中节点对应的父节点的子节点列表信息，包括：

按照预设的数据结构，将所述选中节点与对应的子节点之间的父子关系存储至映射关系中；

根据目标父节点对应的节点标识，更新所述映射关系中所述目标父节点下的子节点列表信息，得到所述更新后的子节点列表信息；所述目标父节点为所述信息修改后的选中节点对应的父节点。

5.根据权利要求3所述的方法，其特征在于，所述响应于针对所述选中节点的信息修改操作，对所述选中节点对应的节点描述信息进行修改，得到信息修改后的选中节点，包括：

获取所述选中节点对应的节点描述信息；

根据所述节点描述信息确定所述选中节点对应的节点状态；

在所述选中节点对应的节点状态为正常状态的情况下，响应于针对所述选中节点的信息修改操作。

6.根据权利要求1所述的方法，其特征在于，所述根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息的步骤之前，所述方法还包括：

根据所述选中节点对应的节点标识，对所述更新后的子节点列表信息中的子节点进行匹配；

将所述更新后的子节点列表信息中对应的节点标识，与所述选中节点对应的节点标识相同的子节点，作为所述匹配子节点。

7.根据权利要求1所述的方法，其特征在于，所述根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式，包括：

根据所述选中节点对应的节点标识，确定所述选中节点对应的视图页面元素节点；

根据所述选中节点对应的当前节点属性信息，修改所述视图页面元素节点对应的内联样式的属性值，得到对应的内联样式的修改后属性值；

根据所述视图页面元素节点对应的内联样式的修改后属性值，确定所述视图页面元素节点的修改后节点样式，得到所述选中节点对应的节点样式。

8.一种视图更新装置，其特征在于，所述装置包括：

加载模块，用于加载视图树形数据中的选中节点及所述选中节点下的子节点；所述选中节点为所述视图树形数据的目标层级树节点中的树节点；

更新模块，用于响应于针对所述选中节点的信息修改操作，基于所述选中节点与对应的子节点之间的父子关系，更新所述选中节点对应的父节点的子节点列表信息；

属性确定模块，用于根据匹配子节点对应的属性对象，确定所述选中节点对应的当前节点属性信息；所述匹配子节点为更新后的子节点列表信息中，与所述选中节点匹配的子节点；

样式确定模块，用于根据所述选中节点对应的当前节点属性信息，确定所述选中节点对应的节点样式；所述节点样式用于对所述选中节点对应的视图效果进行更新。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

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

11.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。