基于虚拟树的动态树形结构渲染方法及装置与流程

本发明涉及数据处理，尤其涉及一种基于虚拟树的动态树形结构渲染方法及装置。

背景技术：

1、目前的树形结构渲染展示方法，主要通过循环或者递归的方式组装数据，生成有层级的树形结构，然后页面将全部树形结构数据进行渲染展示，对于数据量大的情景，页面进行树形结构全部数据渲染耗时巨大，会出现页面卡死现象；或是分批渲染，一开始只渲染一级节点，不对二级节点做解析和渲染，等用户点击某一个一级节点时才开始渲染此节点的二级节点，以此类推，当节点展开的数据多了后，同样会出现渲染时间长，页面卡死的现象，且上述方法只能对固定高度的树结构数据进行渲染，实用性差。

技术实现思路

1、本发明提供一种基于虚拟树的动态树形结构渲染方法及装置，用以解决现有技术采用循环、递归或者分批渲染的方式组装大量数据进行渲染展示时渲染效率低，容易导致页面卡死，且仅针对固定高度的树结构数据进行渲染，而导致实用性的缺陷，提高了渲染效率和实用性。

2、本发明提供一种基于虚拟树的动态树形结构渲染方法，包括：

3、获取树结构数据；

4、对所述树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；

5、基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，所述预设的缓存值用于设置待渲染区域的缓冲区域；

6、基于所述真实渲染数据对所述当前页面进行树渲染，得到动态树形结构的节点信息，并基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息。

7、根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述待渲染区域包括可视区域和缓冲区域，所述缓冲区域与所述可视区域相互独立；

8、所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，包括：

9、基于所述可视区域的高度和所述预估高度计算所述可视区域所需渲染的元素数目，得到所述可视区域的渲染数据和所需渲染的元素的位置的索引信息；

10、基于所述预设的缓存值和所述预估高度得到所述缓冲区域的列表项数目；

11、基于所述可视区域的渲染数据、所需渲染的元素的位置的索引信息和所述缓冲区域的列表项数目，得到所述当前页面的真实渲染数据。

12、根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述得到结构化数组之后，所述方法还包括：

13、对所述结构化数组进行是否具有节点层级、是否展开和是否可视化的筛选，并在所述结构化数组具备节点层级、所述结构化数组可以展开和所述结构化数组可视的情况下，确定所述结构化数组为有效数组。

14、根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述结构化数组包括多个列表项，所述基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息，包括：

15、将每个列表项的预估高度更新为实际高度并存入缓存数组，所述缓存数组用于在页面渲染后存储每个列表项的高度数据和位置信息。

16、根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，在所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据之后，所述方法还包括：

17、基于所述当前页面的真实渲染数据确定目标滚动条；

18、获取所述目标滚动条当前位置的数据索引；

19、计算所述数据索引对应的数据在所述结构化数组中的偏移位置，并将所述偏移位置设置在所述结构化数组。

20、根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述计算所述数据索引对应的数据在所述结构化数组中的偏移位置，包括：

21、应用如下公式确定所述偏移位置：

22、偏移量＝itemcache[startindex].top-itemcache[oldstartindex].top；

23、其中，itemcache[startindex].top为当前起始数据的top值，itemcache[oldstartindex].top为滚动前起始数据的top值，startindex为所述当前位置的数据索引，oldstartindex为滚动前的位置的数据索引，itemcache[]为缓存数组。

24、本发明还提供一种基于虚拟树的动态树形结构渲染装置，包括：

25、获取模块，用于获取树结构数据；

26、数据预处理模块，用于对所述树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；

27、计算模块，用于基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，所述预设的缓存值用于设置待渲染区域的缓冲区域；

28、渲染和更新模块，用于基于所述真实渲染数据对所述当前页面进行树渲染，得到动态树形结构的节点信息，并基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息。

29、本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述基于虚拟树的动态树形结构渲染方法。

30、本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述基于虚拟树的动态树形结构渲染方法。

31、本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述基于虚拟树的动态树形结构渲染方法。

32、本发明提供的基于虚拟树的动态树形结构渲染方法及装置，通过获取树结构数据，对树结构数据进行深度优先遍历处理，得到结构化数组，基于结构化数组的预估高度、待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据根据获取的真实渲染数据，并基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，能够对当前页面中的虚拟树结构数组的动态渲染，运用预估高度和更新缓存位置信息方法摆脱了固定高度的束缚，实现了列表项高度的动态更新，使得应用场景更丰富。

技术特征：

1.一种基于虚拟树的动态树形结构渲染方法，其特征在于，包括：

2.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述待渲染区域包括可视区域和缓冲区域，所述缓冲区域与所述可视区域相互独立；

3.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述得到结构化数组之后，所述方法还包括：

4.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述结构化数组包括多个列表项，所述基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息，包括：

5.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，在所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据之后，所述方法还包括：

6.根据权利要求5所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述计算所述数据索引对应的数据在所述结构化数组中的偏移位置，包括：

7.一种基于虚拟树的动态树形结构渲染装置，其特征在于，包括：

8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述基于虚拟树的动态树形结构渲染方法。

9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述基于虚拟树的动态树形结构渲染方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述基于虚拟树的动态树形结构渲染方法。

技术总结
本发明提供一种基于虚拟树的动态树形结构渲染方法及装置，该基于虚拟树的动态树形结构渲染方法包括：获取树结构数据；对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据；基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。本发明所述方法能够对当前页面中的虚拟树结构数组的动态渲染，运用预估高度和更新缓存位置信息方法摆脱了固定高度的束缚，实现了列表项高度的动态更新，使得应用场景更丰富。

技术研发人员：付诚
受保护的技术使用者：武汉依迅北斗时空技术股份有限公司
技术研发日：
技术公布日：2024/1/15