CN119166870A - 一种树状结构的生成方法及装置 - Google Patents

Abstract

本发明公开了一种树状结构的生成方法及装置，涉及树状结构技术领域，主要目的在于实现减少树状结构的渲染次数，提高页面的渲染速度，而且数据展示更加直观，避免了数据之间的割裂。本发明主要的技术方案为：获取节点数据和节点关系数据；基于节点数据和节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；基于最大层数和每个节点对应的所有父节点，生成待生成目标树状结构中的主树状结构；其中，主树状结构中每个子节点对应一个父节点；当主树状结构存在至少一个第一子节点对应多个父节点时，则在主树状结构的第一子节点上添加至少一个对应的父节点，生成目标树状结构，第一子节点是对应多个父节点的子节点。

Description

一种树状结构的生成方法及装置

技术领域

本发明涉及前端技术领域，尤其涉及一种树状结构的生成方法及装置。

背景技术

在前端开发过程中，经常会用到树状结构来展示数据，树状结构可以很好地展示数据之间的关系，比如常见的组织架构图等，通过树状结构可以清晰的看到各个节点之间的关系。

目前，生成树状结构的方法是前端通过接口从服务端获取节点数据以及节点之间关系的数据，通过组件按子节点的父节点个数渲染树状结构图。例如：如图1所示，一个子节点同时有两个父节点，就会渲染成两个独立的树状结构。以此类推，多个子节点同时拥有多个父节点，就会渲染出多个独立树状结构，在页面上就会出现多个树状结构图。

但是，上述生成树状结构的方法只支持单个父节点的设计，在处理一个子节点同时拥有多个父节点的情况时，由于需要渲染成多个独立的树状结构，会导致树状结构的渲染次数较多，页面的渲染速度较慢，并且会出现数据之间的割裂的问题。

发明内容

鉴于上述问题，本发明提供一种树状结构的生成方法及装置，主要目的是为了实现减少树状结构的渲染次数，提高页面的渲染速度，而且数据展示更加直观，避免了数据之间的割裂。

为解决上述技术问题，本发明提出以下方案：

第一方面，本发明提供一种树状结构的生成方法，所述方法包括：

获取节点数据和节点关系数据；

基于所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；

基于所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；

当所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点。

第二方面，本发明提供一种树状结构的生成装置，包括：

第一获取单元，用于获取节点数据和节点关系数据；

第二获取单元，用于基于所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；

第一生成单元，用于基于所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；

第二生成单元，用于当所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点。

为了实现上述目的，根据本发明的第三方面，提供了一种存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述第一方面所述树状结构的生成方法。

为了实现上述目的，根据本发明的第四方面，提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面所述用于树状结构的生成方法的全部或部分步骤。

为了实现上述目的，根据本发明的第五方面，提供了一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现第一方面所述方法的步骤。

借由上述技术方案，本发明提供的树状结构的生成方法及装置，是由于目前生成树状结构的方法只支持单个父节点的设计。为此，本发明通过获取节点数据和节点关系数据；基于所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；基于所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；当所述主树状结构存在至少一个子节点时，则在所述主树状结构的所述子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点。本发明通过计算最大层级的主树状结构，然后通过节点关系数据渲染子节点，避免节点的重复渲染以及树状结构的重复渲染，提高了页面的渲染速度，更加直观的展示节点之间的关系，避免了数据之间的割裂。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了现有技术中的一种树状结构图；

图2-1示出了本发明实施例提供的一种树状结构的生成方法流程图；

图2-2示出了本发明实施例提供的一种目标树状结构图；

图2-3示出了本发明实施例提供的一种主树状结构图；

图2-4示出了本发明实施例提供的一种由主树状结构构建目标树状结构示意图；

图2-5示出了本发明实施例提供的另一种主树状结构图；

图2-6示出了本发明实施例提供的另一种由主树状结构构建目标树状结构示意图；

图3示出了本发明实施例提供的另一种树状结构的生成方法流程图；

图4示出了本发明实施例提供的一种树状结构图；

图5示出了本发明实施例提供的一种树状结构的生成装置的组成框图；

图6示出了本发明实施例提供的另一种树状结构的生成装置的组成框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

对于目前生成树状结构的方法只支持单个父节点的设计，存在树状结构的渲染次数较多，导致页面的渲染速度较慢，并且会出现数据之间的割裂的问题。针对此问题，发明人想到确定树状结构的最大层数生成主树状结构，再将子节点对应的其他父节点添加到主树状结构对应的子节点上，生成目标树状结构。

为此，本发明实施例提供了一种树状结构的生成方法，通过该方法实现减少树状结构的渲染次数，提高页面的渲染速度，而且数据展示更加直观，避免了数据之间的割裂，执行主体为客户端，其具体执行步骤如图2-1所示，至少包括100-400。

100、获取节点数据和节点关系数据。

在数据获取阶段，客户端通过向服务端发送HTTP(Hyper Text TransferProtocal，超文本传输协议)请求，可以采用API接口的方式从服务端获取目标页面的节点数据以及节点关系数据，其中目标页面可以是当前访问的页面，也可以是当前显示的页面，还可以是其它指定页面。这些数据通常以JSON或XML格式进行传输，包含了节点的唯一标识、名称、属性等节点数据以及某一节点与其他节点的关联关系构成的节点关系数据，节点关系数据包括但不限于父子关系、祖孙关系、上下级关系、平级关系等。如在企业组织架构中，将企业的员工(I1、I2|……IN)作为员工节点(I1、I2|……IN)、将部门(W1、W2、W3)作为部门节点(W1、W2、W3、W4)，由于员工I1隶属于部门W1，那么员工节点I1与W1之间的节点关系数据是父子关系类型；同时，不同部门之间可能存在协作关系，比如部门W2和部门W3合作开展项目，那么部门节点W2和W3之间是合作关系类型的节点关系数据，对于其节点关系数据还可以是平级的同事关系、上下级关系，在此本实施例不做具体限定。

200、基于节点数据和节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点。

其中，所述目标树状结构包括获取到的所有节点以及各节点与其他节点的节点关系。

从100得到节点数据和节点关系数据之后，计算出最大层数。如在一个示例中，可根据节点数据和节点关系数据确定树状结构的个数，以及各树状结构的层数，并从各树状结构的层数中确定层数最高的最大层数。

例如：节点数据为A节点、B节点、C节点、D节点、E节点，节点关系数据是作为叶子节点的D节点、E节点，D节点和E节点的父节点为B节点，B节点的父节点为A节点，E节点还有第二个父节点为C节点，可计算出目标树状结构的最大层数为3层。如图2-2所示，上述E节点和C节点构成一个树状结构，其树状结构具体为第二层是叶子节点的E节点，以及第一层是E节点的父节点的C节点，可见由E节点、C节点构建的树状结构的最大层数为二层。而由A节点、B节点、D节点、E节点构建的树状结构是一个三层树状结构，具体为第三层是“作为叶子节点的D节点、E节点”，第二层是D节点和E节点的父节点的“B节点”，以及第一层是B节点的父节点的“A节点”，对比可知，上述由E节点和C节点构建的二层树状结构相较于由A节点、B节点、D节点、E节点构建的三层树状结构少一层，因此，该上述节点构建的树状结构的最大层数为3层。

再继续获取每个节点对应的所有父节点，以上述例子进行说明：

A节点的父节点为0个，B节点的父节点为1个(A节点)，C节点的父节点为0个，D节点的父节点为1个(B节点)、E节点的父节点为2个(B节点和C节点)。

需要说明的是，在一些实施例中，可以采用递归方法分析节点数据以及节点关系数据，用于获取待生成目标树状结构的最大层数和每个节点对应的所有父节点，本实施例不做具体限定。

300、基于最大层数和每个节点对应的所有父节点，生成待生成目标树状结构中的主树状结构。

其中，所述主树状结构中每个子节点对应一个父节点；

从200得到最大层数和每个节点对应的所有父节点之后，以最大层数涉及的节点和节点关系确定主树状结构。

以200中的例子继续说明：已知：最大层数为三层，其中，三层主树状结构涉及的节点有第三层中“作为叶子节点的D节点、E节点”，第二层中作为D节点和E节点的父节点的“B节点”，以及第一层中作为B节点父节点的“A节点”，如图2-3所示，构建这个树状结构的方法可以是：从A节点出发，向下连接直接子节点B节点作为第一层到第二层的分支；然后，从B节点再分别连接B节点的直接子节点，也就是作为叶子节点的D节点和E节点，作为第二层到第三层的分支。这样，我们就得到了一个以A节点为根节点，B节点为中间节点，D节点和E节点为叶子节点的三层树状结构。

400、当主树状结构存在至少一个第一子节点时，则在主树状结构的第一子节点上添加至少一个第一对应的父节点，生成目标树状结构，所述第一子节点是对应多个父节点的子节点。

在一些实施例中，对应多个父节点是指包括或具有多个父节点。

从300得到主树状结构之后，由于构建目标树状结构中每一个节点数据及其节点关系数据已获知，即每个节点对应的所有父节点是已知的，那么在主树状结构中查找每一个节点的父节点，可判断主树状结构上是否存在某一节点具有多个父节点。

以200中的例子继续说明：其中，第一子节点为E节点，包括两个父节点，即B节点和C节点，由A节点、B节点、D节点以及E节点构建的主树状结构上已存在E节点以及E节点的父节点(B节点)，因此，在主树状结构的第一子节点(E节点)上再添加一个父节点(C节点)，得到目标树状结构，如图2-4所示，待由A节点、B节点、D节点以及E节点构建的主树状结构上，查找各个节点的父节点，此时发现E节点作为第一子节点，其还有一个父节点，即C节点，因此根据E节点的层级，获取其父节点C的层级，并将其添加至主树状结构中。

基于上述图2-1实施例的实现方式可以看出，本发明提供一种树状结构的生成方法，通过计算节点数据和节点关系数据中最大层数用于确定主树状结构，然后再基于其子节点具有多个父节点的情况，在主树状结构上添加除主树状结构以外的父节点，在添加父节点的过程中，可以仅渲染用户可见的节点，也可以应用已完成渲染的节点，从而减少渲染时间，进而快速完成构建目标树状结构。如图1所示，已知节点11、节点12、节点21、节点22、节点23、节点31，节点31的父节点(节点22和节点12)，节点21、节点22和节点23的共同父节点为节点11。现有技术采取分割处理的方式构建目标树状结构，导致上述节点需两次渲染，最终形成两个相互独立的目标树状结构。然而若上述节点采用本发明的技术方法，基于节点11、节点21、节点22、节点23、节点31以及节点间的关系数据构建主树状结构(图1中左侧树状结构)，并在主树状结构上添加节点31的父节点“节点12”的分支，从而一次性渲染出一个完整、包含所有节点及其复杂关系的目标树状结构，可见本发明减少树状结构图的渲染次数，提高页面的渲染速度，而且避免了数据之间的割裂数据，可以更加直观看到每个节点的上下级，观察节点之间的关系，提高数据的可读性。

为了获取待生成目标树状结构的最大层数和每个节点对应的所有父节点，在本申请某些实施例中，前述200包括210。

210、基于节点数据和节点关系数据，利用预设节点对象模型获取待生成目标树状结构的最大层数和每个节点对应的所有父节点。其中，所述预设节点对象模型的每个节点对象设置有一个父节点列表，用于储存对应节点关联的所有父节点。

从100得到节点数据和节点关系数据之后，需要分析出节点与节点之间的上下级关系，以便后续构建目标树状结构。

本实施例采用预设节点对象模型获取节点与节点之间的上下级关系，进而获取待生成目标树状结构的最大层数和每个节点对应的所有父节点。

具体为：构建一个包含父节点关系的预设节点对象模型，该预设节点对象模型中的每个节点对象都包含了一个父节点列表，父节点列表用于存储与该节点关联的所有父节点。根据父节点列表可以获取最大层数以及每个节点对应的所有父节点。

举例说明：

A节点对应的父节点列表中父节点为0，B节点对应的父节点列表中父节点为1个(A节点)，C节点对应的父节点列表中父节点为2个(B节点和D节点)。根据父节点列表可知，A节点没有父节点，可将A节点作为起始点，即A节点为第1层；接下来查找与A节点相关的节点，可知A节点是B节点的父节点，由于B节点是根据A节点确定的，即B节点处于第2层。接下来查找与B节点有关的节点，可知C节点的父节点是B节点，由于C节点是根据B节点确定的，即C节点处于第3层，此外C节点还有另一个父节点D，若假设D节点在第2层(或者至少与B节点处于同一层级或者更上层，但按照最大层数的假设将其考虑在第2层)，此时由A节点、B节点和C节点构建树状结构树的层数大于由C节点和D节点构建树状结构树的层数，即目标树状结构的最多层数是3层。即在上述确定最大层数的过程中，A节点位于目标树状结构的第一层，查找与A节点有关的子节点，确定子节点的层数，再查找子节点的子节点，并确定其所在层级，以此类推，直至遍历所有子节点的父节点列表，确定出目标树状结构的最大层数，通过逐层查找方式，下一层级的节点定位依赖于上一层级的节点。由此构建的从属联系呈现出上下级关系的特征，为目标树状结构的层级构建奠定基础。

本实施例通过预设节点对象模型，根据节点数据和节点关系数据，为各节点设置父节点列表用于存储该节点的节点信息，不仅清晰地展现了每个节点在整个结构中的位置和层级关系，还为后续主树状结构和目标树状结构的构建奠定基础。使得在构建树状结构过程中，能够直接依据已梳理好并存储在父节点列表中的数据，快速地进行搭建，极大地提高了构建效率。

为了构建主树状结构，在本申请某些实施例中，前述300包括310。

310、基于最大层数涉及的目标节点和每个所述目标节点对应的所有父节点，从所述目标节点中的第一子节点开始构建所述主树状结构。

一些实施例中，从200得到最大层数和每个节点对应的所有父节点之后，从目标节点中的第一子节点开始，根据节点的父节点列表，构建出主树状结构。

若构建主树状结构的目标节点中仅有一个第一子节点时，其主树状结构的具体构建过程如下：根据目标节点的父节点列表，确定出具有多个父节点的子节点，即第一子节点，以此节点为构建树状结构的起始点，查找与第一子节点存在直接数据关系的X节点，在第一子节点上添加X节点，该节点与第一子节点的关系为父子关系，再查找与树状结构中新添加第一子节点存在直接数据关系的Y节点，将此节点添加在X节点上，此时，Y节点与X节点之间的关系为父子关系，以此类推，直至根据上述添加节点操作完成主树状结构的构建。

若构建主树状结构的目标节点中存在多个第一子节点时，依据预设次序遍历第一子节点，对各第一子节点执行前述内容中关于第一子节点构建树结构的构建过程，即重复上述步骤，直至遍历完所有的第一子节点，以此种递归的方式构建出完整的主树状结构，其中，预设次序可以是按照第一子节点的父节点数量进行排序，如父节点数量高的节点优先遍历或父节点数量低的节点优先遍历，在此对预设次序的具体方式不作限定。

下面，以步骤210的例子继续说明310中如何根据最大层数涉及的目标节点和每个所述目标节点对应的所有父节点，进而构建主树状结构，具体如下：

已知“A节点对应的父节点列表中父节点为0，B节点对应的父节点列表中父节点为1个(A节点)，C节点对应的父节点列表中父节点为2个(B节点和D节点)，最大层数为3层”。如图2-5所示，上述节点构建的主树状结构为三层，且此三层涉及的目标节点为A节点、B节点和作为叶子节点的C节点，其构建主树状结构从作为第一子节点的C节点开始，根据C节点对应的父节点列表(父节点为B节点和D节点)，在C节点向上构建其父节点B节点，由于D节点不属于该最大层数涉及的节点，因此，不构建D节点；再根据B节点对应的父节点列表(父节点为A节点)，在B节点向上构建其父节点A节点，进而通过上述递归方式得到以C节点为叶子节点、作为C节点的父节点的B节点，以及作为B节点的父节点的A节点构建的主树状结构。

本实施例通过明确地从目标节点中的第一子节点(即对应多个父节点的子节点)开始，以上述递归方式构建出主树状结构，能够确保在复杂的节点关系中有序地构建主树状结构，减少构建过程中的冗余步骤，提高整体构建效率。

需要说明的是，在一些实施例中，构建目标树状结构的主树状结构过程中，存在没有第一子节点情况，此时，则从目标节点中的根节点或者是叶子节点开始进行构建主树状结构。

为了在主树状结构上添加除了该主树状结构之外的父节点，在本申请某些实施例中，前述400包括410-420。

410、基于每个节点对应的所有父节点，判断主树状结构是否存在第一子节点。

其中，所述第一子节点是对应多个父节点的子节点。

从300得到主树状结构和每个节点对应的所有父节点之后，判断该主树状结构上的节点是否还存在其他父节点，具体为：根据每个节点对应的父节点可以得到具有多个父节点的节点，然后基于该具有多个父节点的节点，匹配该主树状结构上的所有节点，如果匹配成功，则将对应节点确定为第一子节点，即主树状结构存在第一子节点，后续需要执行步骤420；否则，该主树状结构不存在第一子节点，不需要执行步骤420。

420、在主树状结构存在至少一个第一子节点时，在主树状结构的每个第一子节点上添加至少一个对应的父节点，生成目标树状结构。

从步骤410得到的判断结果是主树状结构存在至少一个第一子节点后，按照预设次序逐一为第一子节点添加除主树状结构已存在的父节点以外的其它父节点。具体操作为：首先，根据预设次序选择第一个第一子节点作为起始点；然后，在该第一子节点上添加与其存在直接数据关系的节点，此时该节点与该第一子节点的关系是父子关系；接着，以相同的方式处理下一个第一子节点，直至所有第一子节点都完成新的父子关系的建立；最终，生成目标树状结构。其中，预设次序可以是按照第一子节点的父节点数量进行排序，如父节点数量多的节点优先在主树状结构中添加父节点或父节点数量少的节点优先在主树状结构中添加父节点，还可以是按照第一子节点在主树状结构中的层级高低顺序在主树状结构中添加父节点，如层级较高的第一子节点优先添加除主树状结构上的父节点以外的父节点或层级较低的第一子节点优先添加除主树状结构上以外的父节点。应当理解，某一第一子节点添加了父节点后，该第一子节点与添加的父节点的上下级关系保持不变，添加的父节点位于的层级也保持不变。

举例说明：

现有主树状结构为A节点的子节点为B节点，B节点的子节点为C节点和D节点，C节点和D节点为叶子节点，且已知B节点为第一子节点，本身对应2个父节点(A节点和E节点)，C节点也为第一子节点，本身对应3个父节点(B节点、F节点和G节点)那么，从该主树状结构可得，如图2-6所示，其中C节点的父节点个数多于B节点的父节点的个数，即从C节点开始，先将除主树状结构之外的其他父节点(F节点和G节点)添加在C节点上，再处理B节点，将除主树状结构之外的其他父节点(E节点)添加在B节点上，得到目标树状结构。

本实施例通过先查找到主树状结构上的第一子节点，再将该第一子节点上的其他父节点添加到该第一子节点上，完成目标树状结构的构建。可以避免数据展示的割裂，更加直观的看到每个节点的上下级，提高数据的可读性。

为了更好的渲染目标树状结构，在本申请某些实施例中，如图3所示，在前述400之后还包括500-700。

500、以不同的渲染形式渲染所述第一子节点和第二子节点，所述第二子节点为所述目标树状结构中除所述第一子节点之外的子节点，其中，所述第一子点与对应的父节点的渲染形式一致。

在上述步骤中，可采用不同的渲染形式。具体如下：

颜色设置方式：对第一子节点以及其对应的父节点进行一种颜色设置，如红色，对第二子节点以及其对应的父节点进行另一种不同的颜色设置，如绿色。通过颜色在视觉上有明显的差异，用户可以通过不同颜色快速识别出第一子节点和第二子节点及其对应的父节点所属的不同类别。

单纯形状设置方式：对第一子节点以及其对应的父节点进行一种形状设置，如正方形，对第二子节点以及其对应的父节点进行另一种不同的形状设置，如三角形。通过形状在视觉上有明显的差异，用户可以通过不同形状快速识别出第一子节点和第二子节点及其对应的父节点所属的不同类别。

颜色与形状混合设置方式：对第一子节点以及其对应的父节点进行一种颜色和形状设置，如红色正方形，对第二子节点以及其对应的父节点进行另一种不同的颜色和形状设置，如绿色三角形。此方式不仅在颜色上有区分，而且形状上也不同。这种混合设置方式在视觉上更加丰富和独特，使用户可以通过颜色和形状的双重特征更准确地识别相应节点的类型。

值得注意的是，所述第一子点与对应的父节点的渲染形式一致可以是将所述目标树状结构上具有多个父节点的第一子节点渲染成不同颜色和/或不同形状，第一子节点对应的所有父节点的颜色和/或形状一致。同理，第二子节点与对应的父节点的渲染形式也是一致的。

在预设节点对象模型中还可以为每个节点对象设置了相应的属性和方法，其中，该属性可以为背景颜色属性、形状属性等，本实施例不做具体限定；该方法可以为渲染方法(如某渲染函数)、监听事件(如点击事件监听器)等，本实施例不做具体限定，以便后续的操作和渲染。

在上述采用不同颜色和/或不同形状的渲染方式的基础上，本申请实施例还提供交互功能，如点击节点时展开或收起其子节点，例如：Element-Ui组件(页面布局组件)的Collapse(折叠面板)，以便用户能够更加方便地查看和操作树状结构图。

600、利用虚拟滚动方式，渲染目标树状结构中用户可见的部分节点。

在前述实施例的基础上，如在500的基础上，本申请实施例还采用虚拟滚动的方式，渲染用户可见的部分节点，从而减少了渲染时间。

虚拟滚动的方法是：利用滚动容器和一个用于展示数据的容器，假设一个数据数组，基于该数据数组中每个数据项的高度计算容器视口可以容纳的数据项数量以及数据项总数，然后基于容器视口可以容纳的数据项数量以及数据项总数进行渲染数据。

700、利用缓存机制缓存目标树状结构中已渲染过的节点。

在前述实施例的基础上，如在500或600的基础上，本申请实施例还利用缓存机制将已经渲染过的节点进行缓存，以便在需要时快速复用。缓存机制为能够实现缓存的方法，例如：浏览器缓存，本实施例不做具体限定。

基于上述图3的实现方式可以看出，本发明提供一种树状结构的生成方法，通过不同颜色和/或不同形状的渲染方式使节点之间的关系更加明确直观，配合交互功能可以更加方便地查看和操作目标树状结构。通过虚拟滚动方式可减少渲染数据以及缓存机制可以减少渲染次数，避免树状结构的重复渲染，提高页面渲染速度。

值得注意的是，本实施例在渲染大型目标树状结构时，500、600以及700提供的优化措施(如虚拟滚动与缓存机制)可灵活搭配使用。用户可根据实际需求，选择单独应用某一策略或组合使用，以达到最优性能，本实施例对具体使用方式保持开放，不设定硬性约束。

为能更好地解释本申请实施例提供的方案，如图4所示，以下举例说明。

(1)在数据获取阶段，客户端通过向服务端发送HTTP(Hyper Text TransferProtocal，超文本传输协议)请求，采用API接口的方式从服务端获取节点数据以及节点关系数据。

具体为：节点11、节点12、节点21、节点22、节点23、节点31，节点31的父节点(节点22和节点12)，节点21、节点22和节点23的共同父节点为节点11。

(2)基于节点数据和节点关系数据，利用预设节点对象模型获取待生成目标树状结构的最大层数和每个节点对应的所有父节点。

具体为：在步骤(1)获取节点数据和节点关系数据后，利用预设节点对象模型可得节点11的父节点列表内容为空，节点12的父节点列表内容为空，节点21、节点22和节点23分别对应的父节点列表均记录一个父节点为节点11，节点31的父节点列表记录2个父节点分别为节点12和节点22。最大层数为3层，其中，第三层为节点31，第二层为节点21、节点22和节点23，第一层为节点11。

(3)基于最大层数涉及的目标节点和每个所述目标节点对应的所有父节点，从所述目标节点中的第一子节点开始构建所述主树状结构。

具体为：在步骤(2)获取最大层数和每个节点对应的所有父节点后，根据上述数据可知主树状结构为三层，且涉及的节点数据有节点11、节点21、节点22、节点23以及节点31。将具有多个父节点的节点31作为构建主树状结构的起始点，根据节点22是节点31的父节点，即将节点22添加在节点31上，此时节点22与节点31之间的关系为父子关系；接着根据节点22的父节点是节点11，将节点11添加在已经构建的树状结构的节点22上，节点22与节点11的关系为父子关系，接着根据节点11是节点21、节点23的父节点，将节点21、节点23分别添加在上述树状结构中，此时节点21、节点23分别与节点11构成父子关系，待上述节点添加完毕后得到主树状结构。

(4)基于每个节点对应的所有父节点，判断主树状结构是否存在第一子节点。

具体为：在步骤(3)构建主树状结构后，根据上述数据可知，主树状结构中具有2个父节点的节点为节点31，其父节点分别为节点22和节点12，可见，该主树状结构上存在第一子节点为节点31。

(5)在主树状结构存在至少一个第一子节点时，为主树状结构的每个第一子节点上添加至少一个对应的父节点，生成目标树状结构。

具体为：在步骤(4)确定主树状结构上存在第一子节点，即节点31，根据上述数据可知，节点31存在另外一个父节点12，即将节点12添加到步骤(3)构建的主树状结构的节点31上，此时节点12与节点31的关系是父子关系，待节点12添加完毕后生成目标树状结构，若此时节点31中还存在除节点22、节点12的其它父节点，则以添加节点12的方式添加其它父节点至主树状结构中。

若主树状结构存在至少一个第一子节点时，按照预设次序逐一为第一子节点添加除主树状结构已存在的父节点以外的其它父节点。具体操作为：首先，根据预设次序选择第一个第一子节点作为起始点；然后，为该第一子节点添加与其存在直接数据关系的节点，此时该节点与该第一子节点的关系是父子关系；接着，以相同的方式处理下一个第一子节点，直至所有第一子节点都完成父子关系的建立；最终，生成目标树状结构。其中，预设次序可以是按照第一子节点的父节点数量进行排序，如父节点数量多的节点优先在主树状结构中添加父节点，还可以是按照第一子节点在主树状结构中的层级高低顺序在主树状结构中添加父节点，如层级较高的第一子节点优先添加除主树状结构上的父节点以外的父节点。

(6)以不同的渲染形式渲染所述第一子节点和第二子节点，所述第二子节点为所述目标树状结构中除所述第一子节点之外的子节点，其中，所述第一子点与对应的父节点的渲染形式一致。

具体的，可以利用虚拟滚动方式，将目标树状结构上具有多个父节点的第一子节点和第二节点渲染成不同颜色和/或不同形状，同时第一子节点和第二子节点对应的所有父节点的颜色和/或形状一致。

具体为：以上述确定的目标树状结构为例，若将作为第一子节点的节点31设置为某颜色和/或形状，此时，节点31对应的父节点(节点22和节点12)也将被设置为与节点31相同的颜色和/或形状，用于区别于其他节点。

另一方面，作为对上述实施例所示方法的实现，本发明实施例还提供了一种树状结构的生成装置，该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。如图5所示，该装置包括：

第一获取单元31，用于获取节点数据和节点关系数据；

第二获取单元32，用于基于从所述第一获取单元31得到的所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；

第一生成单元33，用于基于从所述第二获取单元32得到的所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；

第二生成单元34，用于当从所述第一生成单元33得到的所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点。

在某些实施例中，作为对上述图3所示方法的实现，本发明实施例还提供了另一种树状结构的生成装置，用于对上述图2-1所示的方法进一步的实现。该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。如图6所示，该装置包括：

第一获取单元31，用于获取节点数据和节点关系数据；

第二获取单元32，用于基于从所述第一获取单元31得到的所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；

第一生成单元33，用于基于从所述第二获取单元32得到的所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；

第二生成单元34，用于当从所述第一生成单元33得到的所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点对应多个父节点的子节点；

第一渲染单元35，用于以不同的渲染形式渲染所述第二生成单元34得到的所述第一子节点和第二子节点，所述第二子节点为所述目标树状结构中除所述第一子节点之外的子节点，其中，所述第一子点与对应的父节点的渲染形式一致；

第二渲染单元36，用于利用虚拟滚动方式，渲染将从所述第一渲染单元35得到的所述目标树状结构中用户可见的部分节点；

缓存单元37，用于利用缓存机制缓存所述目标树状结构中经所述第二渲染单元36已渲染过的节点。

某些实施例中，所述第二获取单元32，还用于：

基于所述节点数据和所述节点关系数据，利用预设节点对象模型获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；其中，所述预设节点对象模型的每个节点对象设置有一个父节点列表，用于储存对应节点关联的所有父节点。

某些实施例中，所述第一生成单元33，还用于：

基于所述最大层数涉及的目标节点和每个所述目标节点对应的所有父节点，从所述目标节点中的第一子节点开始构建所述主树状结构。

某些实施例中，所述第二生成单元34，包括：

判断模块341，用于基于每个节点对应的所有父节点，判断所述主树状结构是否存在第一子节点；

生成模块342，用于在所述主树状结构存在至少一个第一子节点时，在所述主树状结构的每个所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构。

在某些实施例中，本发明实施例还提供一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述图2-1至图4中所述的树状结构的生成方法。

在某些实施例中，本发明实施例还提供一种存储介质，所述存储介质用于存储计算机程序，其中，所述计算机程序运行时控制所述存储介质所在设备执行上述图2-1至图4中所述的树状结构的生成方法。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

此外，存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

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

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种树状结构的生成方法，其特征在于，所述方法包括：

获取节点数据和节点关系数据；

基于所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；

基于所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；

当所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点。

2.根据权利要求1所述的方法，其特征在于，所述基于所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点，包括：

基于所述节点数据和所述节点关系数据，利用预设节点对象模型获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；其中，所述预设节点对象模型的每个节点对象设置有一个父节点列表，用于储存对应节点关联的所有父节点。

3.根据权利要求2所述的方法，其特征在于，所述基于所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构，包括：

基于所述最大层数涉及的目标节点和每个所述目标节点对应的所有父节点，从所述目标节点中的第一子节点开始构建所述主树状结构。

4.根据权利要求3所述的方法，其特征在于，所述当所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点，包括：

基于每个节点对应的所有父节点，判断所述主树状结构是否存在所述第一子节点；

在所述主树状结构存在至少一个第一子节点时，在所述主树状结构的每个所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构。

5.根据权利要求1-4任一所述的方法，其特征在于，在当所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点之后，所述方法还包括：

以不同的渲染形式渲染所述第一子节点和第二子节点，所述第二子节点为所述目标树状结构中除所述第一子节点之外的子节点，其中，所述第一子点与对应的父节点的渲染形式一致。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

利用虚拟滚动方式，渲染所述目标树状结构中用户可见的部分节点；和/或

利用缓存机制缓存所述目标树状结构中已渲染过的节点。

7.一种树状结构的生成装置，其特征在于，包括：

第一获取单元，用于获取节点数据和节点关系数据；

第二获取单元，用于基于所述节点数据和所述节点关系数据，获取待生成目标树状结构的最大层数和每个节点对应的所有父节点；

第一生成单元，用于基于所述最大层数和每个节点对应的所有父节点，生成所述待生成目标树状结构中的主树状结构；其中，所述主树状结构中每个子节点对应一个父节点；

第二生成单元，用于当所述主树状结构存在至少一个第一子节点时，则在所述主树状结构的所述第一子节点上添加至少一个对应的父节点，生成所述目标树状结构，所述第一子节点是对应多个父节点的子节点。

8.一种存储介质，所述存储介质包括存储的程序，其特征在于，在所述程序运行时控制所述存储介质所在设备执行权利要求1至权利要求6中任一项所述树状结构的生成方法。

9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至权利要求6中任一项所述树状结构的生成方法的全部或部分步骤。

10.一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1至权利要求6中任一项所述树状结构的生成方法的步骤。