递归树形组件展示方法、装置、计算机设备及计算机可读存储介质与流程

本发明属于前端展示，具体涉及一种递归树形组件展示方法、装置、计算机设备及计算机可读存储介质。

背景技术：

1、在传统的递归树形组件中，每个节点包含有若干个子节点，使得节点与节点之间的关系是相互嵌套的。这种递归树形组件在数据量较小的场景下进行展示没有任何问题，但是在需要展示大量数据和多层嵌套结构的情况下，传统的递归树形组件展示方案的性能瓶颈将表现为渲染速度特别慢，需要较长时间才能完成渲染。这是因为传统的递归方式需要递归多层节点，嵌套越深，递归次数越多，耗费的时间也会越久。当需要展示全部数据时，所有节点都需要被渲染，因此耗时更长，有的甚至需要直接渲染20多秒。这对于用户而言是无法接受的，因为用户希望能够快速地查看大量和深层次的数据，而不希望等待太久。因此，如何提供一种更加优秀的递归树形组件展示方案，以便保证组件的渲染速度和用户感知体验，是本领域技术人员亟需研究的课题。

技术实现思路

1、本发明的目的是提供一种递归树形组件展示方法、装置、计算机设备及计算机可读存储介质，用以解决传统递归树形组件展示方案在需要展示大量数据和多层嵌套结构的情况下，所存在渲染速度慢和用户感知体验差的问题。

2、为了实现上述目的，本发明采用以下技术方案：

3、第一方面，提供了一种递归树形组件展示方法，包括：

4、将具有层次结构的递归树形组件转换为扁平数组，其中，所述扁平数组包含有在所述递归树形组件中的所有节点的内容信息和属性信息，所述属性信息包含有对应节点的节点标识和父节点标识，在所述所有节点中的各个节点的内容展示所需高度相等；

5、根据在所述所有节点中的待展示节点数量和所述内容展示所需高度，确定总体展示所需高度；

6、根据在所述所有节点中的各个待展示节点的属性信息，按照先父后子顺序将所述各个待展示节点的节点标识自上而下地依次排列在总体展示容器中，其中，所述总体展示容器的高度设置为所述总体展示所需高度；

7、根据局部展示容器在所述总体展示容器中的当前所处位置，确定所述局部展示容器的顶部和底部分别以所述总体展示容器的高度基准线为基准的当前相对高度，其中，所述局部展示容器的高度小于所述总体展示容器的高度且为所述内容展示所需高度的正整数倍，所述局部展示容器用于响应用户的人机交互操作结果在所述总体展示容器中纵向移动；

8、根据所述待展示节点数量、所述顶部的当前相对高度和所述内容展示所需高度，确定待展示起始节点的节点标识在所述总体展示容器中的当前自上而下序号，以及根据所述待展示节点数量、所述底部的当前相对高度和所述内容展示所需高度，确定待展示结束节点的节点标识在所述总体展示容器中的当前自上而下序号；

9、根据所述待展示起始节点的节点标识在所述总体展示容器中的当前自上而下序号和所述待展示结束节点的节点标识在所述总体展示容器中的当前自上而下序号，确定在所述总体展示容器中的且自上而下序号位于这两序号之间的至少一个待展示节点的节点标识；

10、根据所述至少一个待展示节点的节点标识，将在所述扁平数组中的所述至少一个待展示节点的内容信息送入浏览器的可见区域进行渲染展示，其中，所述可见区域的高度等于所述局部展示容器的高度，所述可见区域也可响应所述人机交互操作结果在所述浏览器中纵向移动，并与所述局部展示容器一起同步纵向移动。

11、基于上述
技术实现要素：
，提供了一种能够快速渲染展示递归树形组件中部分内容的新方案，即先将具有层次结构的递归树形组件转换为扁平数组，然后根据待展示节点数量和内容展示所需高度，确定总体展示所需高度，再然后按照先父后子顺序将各个待展示节点的节点标识自上而下地依次排列在总体展示容器中，再然后根据局部展示容器在所述总体展示容器中的当前所处位置，确定目标待展示节点的节点标识，最后将在扁平数组中的且目标待展示节点的内容信息送入浏览器的可见区域进行渲染展示，由此仅需对当前可见的少量节点的内容信息进行渲染展示，进而可大大加快渲染速度，缩短所需等待时间，保证用户的感知体验，便于实际应用和推广。

12、在一个可能的设计中，将具有层次结构的递归树形组件转换为扁平数组，包括：

13、创建一个为空的数组；

14、遍历在具有层次结构的递归树形组件中的各个节点：先将节点的且在所述递归树形组件中的内容信息添加到所述数组中；然后判断所述节点在所述递归树形组件中是否有父节点，若有，则将所述节点和该父节点分别在所述递归树形组件中的节点标识作为所述节点的属性信息添加到所述数组中，否则将所述节点在所述递归树形组件中的节点标识和为空的父节点标识作为所述节点的属性信息添加到所述数组中，最后在判定所述节点在所述递归树形组件中有子节点时，将该子节点作为待遍历的下一个节点；

15、将最终所得的所述数组作为一个扁平数组，其中，所述扁平数组包含有在所述递归树形组件中的所有节点的内容信息和属性信息，所述属性信息包含有对应节点的节点标识和父节点标识，在所述所有节点中的各个节点的内容展示所需高度相等。

16、在一个可能的设计中，当所述属性信息还包含有对应节点的展示选择状态标识时，根据在所述所有节点中的待展示节点数量和所述内容展示所需高度，确定总体展示所需高度，包括：

17、针对在所述所有节点中的各个节点，若对应的展示选择状态标识表示被选中状态或半选中状态，则确定对应节点为待展示节点，其中，所述半选中状态用于指示对应节点的部分后代节点的展示选择状态标识表示被选中状态；

18、根据在所述所有节点中的待展示节点数量和所述内容展示所需高度，确定总体展示所需高度。

19、在一个可能的设计中，当所述属性信息还包含有对应节点的传承路径时，所述方法还包括：

20、当在所述所有节点中的某个节点的展示选择状态标识表示被选中状态时，将位于所述某个节点的传承路径上的各个祖先节点的展示选择状态标识由未选中状态更新为半选中状态，其中，所述传承路径是指从根节点至父节点的路径，所述根节点是指在所述递归树形组件中没有父节点的节点。

21、在一个可能的设计中，当所述属性信息还包含有对应节点的传承路径时，所述方法还包括：

22、当在所述所有节点中的某个节点的展示选择状态标识表示被选中状态时，判断所述某个节点在所述递归树形组件中是否有后代节点，若有，则将该后代节点的展示选择状态标识由未选中状态或半选中状态更新为被选中状态，其中，所述后代节点是指在对应的传承路径上具有所述某个节点的节点，所述传承路径是指从根节点至父节点的路径，所述根节点是指在所述递归树形组件中没有父节点的节点。

23、在一个可能的设计中，当所述属性信息还包含有对应节点的展示样式时，将在所述扁平数组中的所述至少一个待展示节点的内容信息送入浏览器的可见区域进行渲染展示，包括：

24、将在所述扁平数组中的所述至少一个待展示节点的内容信息送入浏览器的可见区域，并针对在所述至少一个待展示节点中的各个待展示节点，根据对应的展示样式在所述可见区域中渲染展示对应的内容信息，其中，所述可见区域的高度等于所述局部展示容器的高度，所述可见区域也可响应所述人机交互操作在所述浏览器中纵向移动，并与所述局部展示容器一起同步纵向移动，所述展示样式包含有对字体、颜色、背景色和/或对齐方式的设置结果。

25、在一个可能的设计中，在将在所述扁平数组中的所述至少一个待展示节点的内容信息送入浏览器的可见区域进行渲染展示之后，所述方法还包括：

26、实时监听所述可见区域是否触发在所述浏览器中的纵向移动事件；

27、在确定触发在所述浏览器中的纵向移动事件时，返回执行步骤：根据所述局部展示容器在所述总体展示容器中的当前所处位置，确定所述局部展示容器的顶部和底部分别以所述总体展示容器的高度基准线为基准的当前相对高度。

28、第二方面，提供了一种递归树形组件展示装置，包括有转换模块、总体高度确定模块、排列模块、相对高度确定模块、序号确定模块、目标节点确定模块和渲染展示模块；

29、所述转换模块用于将具有层次结构的递归树形组件转换为扁平数组，其中，所述扁平数组包含有在所述递归树形组件中的所有节点的内容信息和属性信息，所述属性信息包含有对应节点的节点标识和父节点标识，在所述所有节点中的各个节点的内容展示所需高度相等；

30、所述总体高度确定模块，通信连接所述转换模块，用于根据在所述所有节点中的待展示节点数量和所述内容展示所需高度，确定总体展示所需高度；

31、所述排列模块，分别通信连接所述转换模块和所述总体高度确定模块，用于根据在所述所有节点中的各个待展示节点的属性信息，按照先父后子顺序将所述各个待展示节点的节点标识自上而下地依次排列在总体展示容器中，其中，所述总体展示容器的高度设置为所述总体展示所需高度；

32、所述相对高度确定模块，通信连接所述排列模块，用于根据局部展示容器在所述总体展示容器中的当前所处位置，确定所述局部展示容器的顶部和底部分别以所述总体展示容器的高度基准线为基准的当前相对高度，其中，所述局部展示容器的高度小于所述总体展示容器的高度且为所述内容展示所需高度的正整数倍，所述局部展示容器用于响应用户的人机交互操作结果在所述总体展示容器中纵向移动；

33、所述序号确定模块，通信连接所述相对高度确定模块，用于根据所述待展示节点数量、所述顶部的当前相对高度和所述内容展示所需高度，确定待展示起始节点的节点标识在所述总体展示容器中的当前自上而下序号，以及根据所述待展示节点数量、所述底部的当前相对高度和所述内容展示所需高度，确定待展示结束节点的节点标识在所述总体展示容器中的当前自上而下序号；

34、所述目标节点确定模块，通信连接所述序号确定模块，用于根据所述待展示起始节点的节点标识在所述总体展示容器中的当前自上而下序号和所述待展示结束节点的节点标识在所述总体展示容器中的当前自上而下序号，确定在所述总体展示容器中的且自上而下序号位于这两序号之间的至少一个待展示节点的节点标识；

35、所述渲染展示模块，分别通信连接所述转换模块和所述目标节点确定模块，用于根据所述至少一个待展示节点的节点标识，将在所述扁平数组中的所述至少一个待展示节点的内容信息送入浏览器的可见区域进行渲染展示，其中，所述可见区域的高度等于所述局部展示容器的高度，所述可见区域也可响应所述人机交互操作结果在所述浏览器中纵向移动，并与所述局部展示容器一起同步纵向移动。

36、第三方面，本发明提供了一种计算机设备，包括有依次通信连接的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如第一方面或第一方面中任意可能设计所述的递归树形组件展示方法。

37、第四方面，本发明提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面或第一方面中任意可能设计所述的递归树形组件展示方法。

38、第五方面，本发明提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如第一方面或第一方面中任意可能设计所述的递归树形组件展示方法。

39、上述方案的有益效果：

40、(1)本发明创造性提供了一种能够快速渲染展示递归树形组件中部分内容的新方案，即先将具有层次结构的递归树形组件转换为扁平数组，然后根据待展示节点数量和内容展示所需高度，确定总体展示所需高度，再然后按照先父后子顺序将各个待展示节点的节点标识自上而下地依次排列在总体展示容器中，再然后根据局部展示容器在所述总体展示容器中的当前所处位置，确定目标待展示节点的节点标识，最后将在扁平数组中的且目标待展示节点的内容信息送入浏览器的可见区域进行渲染展示，由此仅需对当前可见的少量节点的内容信息进行渲染展示，进而可大大加快渲染速度，缩短所需等待时间，保证用户的感知体验，便于实际应用和推广。