CN110333864B

CN110333864B - 一种树形数据渲染方法、装置、设备及介质

Info

Publication number: CN110333864B
Application number: CN201910524363.8A
Authority: CN
Inventors: 杜佳; 高飞宇
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2019-06-18
Filing date: 2019-06-18
Publication date: 2021-09-14
Anticipated expiration: 2039-06-18
Also published as: CN110333864A

Abstract

本发明公开了一种树形数据渲染方法、装置、设备及介质，所述方法包括获取具备树形拓扑的第一数据，所述第一数据每个节点均对应一个属性集合；获取目标节点集，为所述目标节点集中每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据。本发明基于树形拓扑的数据进行二次建模以得到扁平化结构的数据，从而在保持树形渲染结果不变的前提下提升了渲染速度。

Description

一种树形数据渲染方法、装置、设备及介质

技术领域

本发明涉及页面渲染领域，尤其涉及一种树形数据渲染方法、装置、设备及介质。

背景技术

现有技术中的前端组件中能够用于显示树形拓扑的组件(例如Ant Design，Element UI)均采用了与树形拓扑相适应的文档对象模型(Document Object Model，DOM)，在DOM中可以表征树形拓扑，只需要使用能够对应渲染树形拓扑的前端组件即可达到显示树形拓扑的目的。请参考图1(1)，其示出了Ant Design官方文档的截图，从所述官方文档可以明显看出其使用的数据模型是树形拓扑。请参考图1(2)其示出了Ant Design官方文档对应的渲染结果，显然其渲染结果也具有树形拓扑。以Ant Design为示例可知，现有技术中的用于渲染树形拓扑的前端组件的内部数据模型与渲染结果具备一致性。

但是，这种一致性为浏览器的实时渲染带来了负担，在海量数据条件下(比如十万级数据量)会出现严重的性能下降，从而导致浏览器近乎假死，难以及时响应用户操作。

发明内容

为了解决现有技术中对于海量树形拓扑数据渲染性能严重下降的技术问题，本发明实施例提供一种树形数据渲染方法、装置、设备及介质。

一方面，本发明提供了一种树形数据渲染方法，所述方法包括：

获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；

获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；

提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；

根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

另一方面，本发明提供了一种树形数据渲染装置，所述装置包括：

第一数据获取模块，用于获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；

属性添加模块，用于获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；

重建模模块，用于提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；

渲染模块，用于根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

另一方面，本发明提供了一种设备，其特征在于，所述设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现一种树形数据渲染方法。

另一方面，本发明提供了一种计算机存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行一种树形数据渲染方法。

本发明提供了一种树形数据渲染方法、装置、设备及介质。本发明基于树形拓扑的数据进行二次建模以得到扁平化结构的数据，从而在保持树形渲染结果不变的前提下显著提升了渲染的速度。并且通过只渲染当前渲染区间对应的数据，进一步减轻了浏览器的渲染压力，提升了浏览器响应用户操作的速度，以使得体验过程中几乎感觉不到任何延迟，缓解了在大数据量场景下树形数据的渲染压力和提升了响应速度。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。

图1(1)是本发明背景技术提供的Ant Design官方文档的截图示意图；

图1(2)是本发明背景技术提供的Ant Design官方文档的截图对应的渲染结果示意图；

图2是本发明提供的一种树形数据渲染方法流程图；

图3是本发明提供的树形拓扑示意图；

图4是本发明提供的一种深度属性对应值的获取方法流程图；

图5是本发明提供的另一种深度属性值的获取方法流程图；

图6是本发明提供的现有的前端组件渲染第一数据的示意图；

图7是本发明提供的第二数据渲染示意图；

图8是本发明提供的根据所述缩进量和所述目标拓扑渲染所述第二数据流程图；

图9是本发明提供的渲染逻辑示意图；

图10是本发明提供的一种树形数据渲染装置框图；

图11是本发明提供的一种用于实现本发明实施例所提供的方法的设备的硬件结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为了使本发明实施例公开的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明实施例进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本发明实施例，并不用于限定本发明实施例。为了便于详述本发明实施例中的技术方案，本发明实施例首先对下述基本概念进行介绍：

JavaScript(JS)：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。JavaScript为具有函数优先的轻量级解释型或即时编译型的编程语言。

DOM：文档对象模型(Document Object Model)，是处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形拓扑中，用来表示文档中对象的标准模型就称为DOM。

padding-left：几乎所有主流浏览器都支持padding-left属性。padding-left属性设置元素左内边距(空白)。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现。

padding-top：几乎所有主流浏览器都支持padding-top属性。padding-top属性设置元素的上内边距(顶部空间)。该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。

padding-bottom：几乎所有主流浏览器都支持padding-bottom属性。padding-bottom属性设置元素的下内边距(底部空白)。该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。

本发明实施例公开一种树形数据渲染方法，如图2所示，所述方法包括：

S101.获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性。

每个节点均包括标识属性，所述标识属性可以作为区分各个节点的唯一凭证。

所述第一数据记录了树形拓扑中各个节点之间的真实的继承关系，其也是树形数据渲染的数据基础，其与渲染结果具备一致性。相比于现有技术中直接将第一数据使用某些前端组件进行直接渲染不同，本发明实施例对其进行了扁平化的二次建模，具体可参见下文。

所述第一数据可以使用JS语言表示，符合DOM标准。本发明实施例给出第一数据的表示代码：

从上述代码可以看出，与所述第一数据对应的树形拓扑如图3所示，其示出了所述第一数据对应的树形拓扑。第一数据表示的树形拓扑包括四个节点，节点g1，其包括两个子节点p1和g2，g2包括一个子节点p2。

S103.获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定。

在一个可行的实施例中，所述目标节点集即为所述第一数据中的全部节点构成的集合，深度属性对应值可以由第一数据唯一确定。相应的，本发明实施例公开一种深度属性对应值的获取方法，如图4所示，所述方法包括：

S1031.获取每个节点在第一数据表征的树形拓扑结构中的深度。

S1033.将所述深度设置所述节点的深度属性对应值。

以上述的第一数据为例，为每个节点添加深度属性之后得到的代码为：

从上述代码可以看出，第一数据表示的树形拓扑所包括四个节点的深度属性对应值根据其拓扑而被唯一确定，节点g1深度值为0(根节点)，其包括的两个子节点p1和g2的深度值均为1，g2包括的一个子节点p2的深度值为2。

若第一数据的数据量过大，为第一数据全部进行深度属性的添加需要较长的数据处理时间，而受限于终端的显示条件，在某个时刻只可能显示第一数据中的部分数据，因此，可以根据显示的实际情况对深度属性的获取环节进行优化，只对落入用户视觉范围(当前渲染区间)的第一数据进行深度属性的添加。

在一个优选的实施例中，所述目标节点集为待渲染的节点构成的集合，所述深度属性的值还可以由第一数据、当前渲染区间以及相关的用户操作联合确定。相应的，本发明实施例公开另一种深度属性值的获取方法，如图5所示，所述方法包括：

S1032.获取第一数据中用于在所述当前渲染区间渲染的目标数据。

根据当前渲染区间和用户的操作可以判断接下来待渲染的第一数据，以确定目标数据。所述目标节点集与所述目标数据具备一一对应关系。

具体地，所述当前渲染区间可能只能够渲染50条数据，则目标节点集只有50个节点，所述目标数据也只有50条，而与之形成对应的，第一数据可以为海量数据，其可能能够达到十万级的数据量，显然根据当前渲染空间获取目标数据可以大大缩减深度属性添加的范围，提升数据处理速度和渲染速度。

S1034.获取所述目标数据对应的子树拓扑。

本发明实施例中第一数据为树形拓扑，目标数据为所述第一数据中的部分数据，其对应的拓扑为子树拓扑。

S1036.获取所述目标数据的每个节点在所述子树拓扑中的深度。

S1038.将所述深度设置为所述节点的深度属性对应值。

S105.提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构。

本发明实施例中目标拓扑中各个节点之间不具备继承关系，都具备对等地位，但是各个节点之间上下文关系与所述第一数据对应的树形拓扑保持一致，从而形成了一种扁平化列表拓扑。

以上述的第一数据为例，其对应的第二数据为：

可见，第二数据是由第一数据中节点对应的属性集构成的，所述第二数据中各个节点不具备继承关系，并且其上下文关系与第一数据保持一致。比如所述第一数据中节点p1之前是节点g1，节点p1之后是节点g2，则第二数据中节点p1之前依然是节点g1，节点p1之后依然是节点g2。

S107.根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

对应于现有技术中树形结构的渲染方式，子节点相对于其父节点都是通过缩进的方式展示。最为常见的通过左偏移的方式来体现缩进。比如每个子节点均相对于其父节点左偏移N个字符，而同级节点的偏移程度一样，从而能够显示出树形结构。

具体地，左偏移可以使用padding-left字段来表征，padding-left字段对应值体现了缩进量，其是根据深度属性对应值来设置的。

如图6所示，其示出使用现有的前端组件渲染第一数据的示意图。显然，子节点p1和g2相对于其父节点g1缩进两个字符，子节点p1和g2的缩进程度一样，而子节点p2相对于其父节点g2缩进两个字符，从而达到了树形拓扑的显示效果。

本发明实施例中所述节点的缩进量可以正比于所述节点的深度属性对应值。虽然第二数据并不具备树形结构，但是其每个节点具备深度属性，通过将节点的缩进量与节点的深度属性对应值相关联，也可以达到树形拓扑显示效果。

如图7所示，其示出了第二数据渲染示意图，依次渲染第二数据中的各个节点，由于第二数据中各个节点与第一数据具备相同的上下文关系，从而保证了第二数据的渲染结果的各个节点的顺序与第一数据的直接渲染效果一致。第二数据中每个节点具备深度属性，根据深度属性对节点进行缩进，从而保证了第二数据中各个节点的缩进值与第一数据的直接渲染效果一致。因此，虽然第二数据不具备树形拓扑，其也可以得到与第一数据相同的渲染效果。

在前端显示过程中，受限于终端的显示条件，在某个时刻只可能显示部分数据，若当前的显示条件无法显示全部第二数据，可以仅仅对第二数据落入当前渲染区间的部分进行显示，而其它部分进行虚化操作。所述虚化操作为不进行具体渲染的相关操作。

在一个具体的实施例中，可以对全部第一数据进行处理，生成与所述第一数据对应的第二数据，在第二数据的实际渲染过程中，所述根据所述缩进量和所述目标拓扑渲染所述第二数据，如图8所示，包括：

S1071.获取当前渲染区间。

S1073.获取所述第二数据中落入所述当前渲染区间的待渲染数据。

S1075.根据所述缩进量和所述目标拓扑渲染所述待渲染数据。

S1077.对所述第二数据中排序在待渲染数据之前的数据使用padding-top属性定义渲染方式，对所述第二数据中排序在待渲染数据之后前的数据使用padding-bottom属性定义渲染方式。

如图9所示，其示出了渲染逻辑示意图。利用paddingLeft渲染出视觉上的树结构，同时利用paddingTop和paddingBottom填充滚动条，保持长列表同一时间只渲染待渲染数据，减少浏览器渲染压力。

在一个优选的实施例中，若第二数据是根据第一数据和当前渲染区间而得到，则直接渲染第二数据即可。

本发明实施例公开的一种树形结构渲染方法，通过对表征树形拓扑结构的第一数据进行二次建模，得到了具有扁平化目标拓扑的第二数据，并对第二数据进行渲染，从而形成了视觉上的树形结构，确保第二数据渲染结果与其对应的第一数据渲染结果一致。并且使用具有扁平化目标拓扑的第二结构进行渲染代替性能较低的DOM操作，能够显著降低数据拓扑的复杂度，得到的第二数据也更加便于后期优化。

在一个优选的实施例中，还可以监听用户的操作，根据所述用户的操作获取第一数据中待渲染的目标节点集，得到所述目标节点集对应的具有目标拓扑的待渲染数据，并对所述待渲染数据进行渲染。

具体地，获取所述目标节点集对应的具有目标拓扑的待渲染数据的具体执行方法可以参考步骤S103-S105，所述对所述待渲染数据进行渲染的具体执行方法可以参考步骤S107。

在一个可行的实施例中，所述监听用户的操作为监听滚动条的滚动事件，以及对于渲染结果的操作。

具体地，若监听到滚动事件，可以在滚动事件发生时保持当前渲染区域的渲染结果不变，在滚动事件发生后，根据所述滚动事件确定第一数据中待渲染的目标节点集。

具体地，所述对于渲染结果的操作包括渲染结果的展开操作、收起或反选操作。若所述渲染结果中包括选择框，则所述对于渲染结果的操作还包括选择框的选择更新操作。

在本发明实施例的实际使用过程中，经过相关测试，对于十万级节点数据，渲染结果的展开耗时不超过70毫秒，对于渲染结果的反选耗时不超过70毫秒，对渲染结果中的某个节点的选择框进行选择更新，耗时不超过1毫秒。

在一个可行的实施例中，还可以对第二数据中各个节点添加渲染标记属性，所述渲染标记属性用于表征所述节点是否被渲染。监听用户的操作，根据所述用户的操作变更所述第二数据中相关节点的渲染标记属性，根据所述第二数据中各个节点的渲染标记属性确定待渲染数据，并对所述待渲染数据进行渲染。

具体地，可以生成与第一数据一一对应的第二数据，并为第二数据中每个节点均设置渲染标记属性。根据用户的操作得到应当在当前渲染区间中被渲染出的节点，并将其渲染标记属性设置为真，以使得所述节点被渲染出来。

通过变更节点对应的渲染标记属性的方式进行数据渲染，可以进一步提升数据的渲染速度。

本发明实施例可以应用于对于各种海量具备树形拓扑的数据进行渲染的场景之中，比如对企业级应用中对于十万级好友进行选择的场景，以及企业级应用中对庞大组织机构进行渲染的场景。

本发明实施例中基于树形拓扑的数据进行二次建模以得到扁平化结构的数据，从而在保持树形渲染结果不变的前提下显著提升了渲染的速度。并且通过只渲染当前渲染区间对应的数据，进一步减轻了浏览器的渲染压力，提升了浏览器响应用户操作的速度，以使得体验过程中几乎感觉不到任何延迟。缓解了在大数据量场景下树形数据的渲染压力和提升了响应速度。

本发明实施例提供一种树形数据渲染装置，如图10所示，所述装置包括：

第一数据获取模块201，用于获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；

属性添加模块203，用于获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；

重建模模块205，用于提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；

渲染模块207，用于根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

进一步地，所述装置还包括：

监听模块，用于监听用户的操作；

渲染标记属性管理模块，用于对第二数据中各个节点添加渲染标记属性，所述渲染标记属性用于表征所述节点是否被渲染；根据所述用户的操作变更所述第二数据中相关节点的渲染标记属性。

具体地，本发明实施例所述一种树形数据渲染装置与方法实施例均基于相同发明构思。

本发明实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行本发明实施例所述的一种树形数据渲染方法的各种步骤。

所述指令包括：

所述指令还可以包括：

获取每个节点在第一数据表征的树形拓扑结构中的深度；

将所述深度设置所述节点的深度属性对应值。

所述指令还可以包括：

获取当前渲染区间；

获取所述第二数据中落入所述当前渲染区间的待渲染数据；

根据所述缩进量和所述目标拓扑渲染所述待渲染数据；

对所述第二数据中排序在待渲染数据之前的数据使用padding-top属性定义渲染方式，对所述第二数据中排序在待渲染数据之后前的数据使用padding-bottom属性定义渲染方式。

所述指令还可以包括：

获取第一数据中用于在所述当前渲染区间渲染的目标数据；

获取所述目标数据对应的子树拓扑；

获取所述目标数据的每个节点在所述子树拓扑中的深度；

将所述深度设置为所述节点的深度属性对应值。

所述指令还可以包括：

还包括监听用户的操作，根据所述用户的操作获取第一数据中待渲染的目标节点集，得到所述目标节点集对应的具有目标拓扑的待渲染数据，并对所述待渲染数据进行渲染。

所述指令还可以包括：

还包括对第二数据中各个节点添加渲染标记属性，所述渲染标记属性用于表征所述节点是否被渲染；

监听用户的操作，根据所述用户的操作变更所述第二数据中相关节点的渲染标记属性，根据所述第二数据中各个节点的渲染标记属性确定待渲染数据，并对所述待渲染数据进行渲染。

进一步地，图11示出了一种用于实现本发明实施例所提供的方法的设备的硬件结构示意图，所述设备可以参与构成或包含本发明实施例所提供的装置。如图11所示，设备10可以包括一个或多个(图中采用102a、102b，……，102n来示出)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输装置106。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解，图11所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，设备10还可包括比图11中所示更多或者更少的组件，或者具有与图11所示不同的配置。

应当注意到的是上述一个或多个处理器102和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到设备10(或移动设备)中的其他元件中的任意一个内。如本申请实施例中所涉及到的，该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。

存储器104可用于存储应用软件的软件程序以及模块，如本发明实施例中所述的方法对应的程序指令/数据存储装置，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的一种树形数据渲染方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括设备10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(NetworkInterfaceController，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(RadioFrequency，RF)模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与设备10(或移动设备)的用户界面进行交互。

需要说明的是：上述本发明实施例先后顺序仅仅为了描述，不代表实施例的优劣。且上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置和服务器实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种树形数据渲染方法，其特征在于，所述方法包括：

获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性集合包括至少一个属性；

提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的扁平式拓扑结构，并且所述目标拓扑中各个节点具备对等地位，所述各个节点之间上下文关系与所述第一数据对应的树形拓扑保持一致；

根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量；

根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果，所述渲染结果与直接渲染所述第一数据得到的结果一致。

2.根据权利要求1所述的方法，其特征在于，还包括获取深度属性对应值，所述获取深度属性对应值，包括：

获取每个节点在第一数据表征的树形拓扑结构中的深度；

将所述深度设置所述节点的深度属性对应值。

3.根据权利要求2所述的方法，其特征在于，所述根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果，包括：

获取当前渲染区间；

获取所述第二数据中落入所述当前渲染区间的待渲染数据；

根据所述缩进量和所述目标拓扑渲染所述待渲染数据；

4.根据权利要求1所述的方法，其特征在于，还包括获取深度属性对应值，所述获取深度属性对应值，包括：

获取第一数据中用于在当前渲染区间渲染的目标数据；

获取所述目标数据对应的子树拓扑；

获取所述目标数据的每个节点在所述子树拓扑中的深度；

将所述深度设置为所述节点的深度属性对应值。

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

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

7.一种树形数据渲染装置，其特征在于，所述装置包括：

第一数据获取模块，用于获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性集合包括至少一个属性；

重建模模块，用于提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的扁平式拓扑结构，并且所述目标拓扑中各个节点具备对等地位，所述各个节点之间上下文关系与所述第一数据对应的树形拓扑保持一致；

渲染模块，用于根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果，所述渲染结果与直接渲染所述第一数据得到的结果一致。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

监听模块，用于监听用户的操作；

9.一种电子设备，其特征在于，所述设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1-6任一项所述的一种树形数据渲染方法。

10.一种计算机存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行权利要求1-6任一项所述的一种树形数据渲染方法。