CN112506509A

CN112506509A - 一种实现树形控件支持大数据渲染的方法及相关装置

Info

Publication number: CN112506509A
Application number: CN202011453156.7A
Authority: CN
Inventors: 郑思慧; 范渊; 刘博�
Original assignee: Hangzhou Dbappsecurity Technology Co Ltd
Current assignee: Hangzhou Dbappsecurity Technology Co Ltd
Priority date: 2020-12-11
Filing date: 2020-12-11
Publication date: 2021-03-16
Anticipated expiration: 2040-12-11
Also published as: CN112506509B

Abstract

本申请公开了一种实现树形控件支持大数据渲染的方法，包括为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。该方法能够使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况。本申请还公开了一种实现树形控件支持大数据渲染的装置、设备及计算机可读存储介质，均具有上述技术效果。

Description

一种实现树形控件支持大数据渲染的方法及相关装置

技术领域

本申请涉及树形控件技术领域，特别涉及一种实现树形控件支持大数据渲染的方法；还涉及一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质。

背景技术

在前端行业中，目前iView、Element-UI是主流的UI框架，其树形控件在渲染上万条数据时，页面通常会发生崩溃而无法使用。虽然，目前jQuery的zTree树插件在渲染上万条数据时不会发生页面崩溃，但是却存在页面卡顿的缺陷，导致用户体验不佳。另外，尽管在真实业务场景中，可以通过搜索的方式仅显示部分节点，但是也会存在某个或某些父节点下的子节点数量非常多的情况，由此仍需渲染大量数据，同样会发生页面崩溃或页面卡顿的情况。有鉴于此，如何使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况已成为本领域技术人员亟待解决的技术问题。

发明内容

本申请的目的是提供一种实现树形控件支持大数据渲染的方法，能够使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况。本申请的另一个目的是提供一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质，均具有上述技术效果。

为解决上述技术问题，本申请提供了一种实现树形控件支持大数据渲染的方法，包括：

为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；

通过所述空容器模拟列表的滚动操作；

当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。

可选的，所述在所述虚拟列表展示所述节点包括：

根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。

可选的，所述根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点包括：

计算滚动距离与节点行高的比值，得到要渲染的起始节点；

计算所述起始节点与所述固定高度的和值，得到要渲染的终止节点；所述起始节点与所述终止节点之间的节点为所述虚拟列表要渲染的节点。

可选的，添加节点的点击事件的方式为将点击事件委托于所述虚拟列表。

可选的，还包括：

通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。

为解决上述技术问题，本申请还提供了一种实现树形控件支持大数据渲染的装置，包括：

设置模块，用于为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；

模拟模块，用于通过所述空容器模拟列表的滚动操作；

展示模块，用于当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。

可选的，所述展示模块具体用于根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。

可选的，还包括：

记录模块，用于通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。

为解决上述技术方案，本申请还提供了一种实现树形控件支持大数据渲染的设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上任一项所述的实现树形控件支持大数据渲染的方法的步骤。

为解决上述技术问题，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的实现树形控件支持大数据渲染的方法的步骤。

本申请所提供的实现树形控件支持大数据渲染的方法，包括：为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。

可见，本申请所提供的实现树形控件支持大数据渲染的方法，设置并通过空容器模拟列表的滚动操作，通过虚拟列表展示固定高度的节点，虚拟列表中所展示的节点的内容随着滚动操作发生变化，但树形控件只需渲染与所设置的固定高度对应的固定数量的节点，可以极大的减少DOM渲染。此外，本申请所提供的实现树形控件支持大数据渲染的方法中，各节点在DOM层均属于同一层级，较之传统的层级嵌套方式，该方法可以有效规避层级嵌套过深而加大复杂度，从而提升页面性能。由此，通过减少DOM渲染以及提升页面性能，能够使树形控件支持万级数据渲染，且不发生页面卡顿、崩溃的情况。

本申请所提供的实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质，均具有上述技术效果。

附图说明

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

图1为本申请实施例所提供的一种实现树形控件支持大数据渲染的方法的流程示意图；

图2为本申请实施例所提供的一种容器视觉层结构示意图；

图3为本申请实施例所提供的一种DOM结构示意图；

图4为本申请实施例所提供的一种数结构示意图；

图5为本申请实施例所提供的一种实现树形控件支持大数据渲染的装置的示意图；

图6为本申请实施例所提供的一种实现树形控件支持大数据渲染的设备的示意图。

具体实施方式

本申请的核心是提供一种实现树形控件支持大数据渲染的方法，能够使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况。本申请的另一个核心是提供一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质，均具有上述技术效果。

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

请参考图1，图1为本申请实施例所提供的一种实现树形控件支持大数据渲染的方法的流程示意图，参考图1所示，该方法包括：

S101：为根节点设置固定高度，并在根节点添加空容器与虚拟列表；空容器的高度与真实列表的高度一致；虚拟列表的高度与所设置的固定高度一致；

具体的，本申请为根节点设置固定高度，设置overflow属性值为auto。根节点框定可视区域范围，当根节点内的内容超出设置的固定高度时，会出现滚动条。根节点绑定滚动事件，当鼠标滚动时会触发滚动事件。

此外，本申请在根节点添加两个容器，即空容器与虚拟列表。在计算得到真实列表的高度的基础上，将真实列表的高度赋值给空容器，使空容器的高度与真实列表的高度一致。虚拟列表的高度与根节点的高度一致，即为所设置的固定高度。

参考图2所示，图2中最外层边框表示根节点，中间层边框表示空容器，最内层边框表示虚拟列表。

对于固定高度的具体值，本申请不做唯一限定，可以根据应用需要进行差异性设置。

S102：通过空容器模拟列表的滚动操作；

具体的，在将真实列表的高度赋值给空容器的基础上，通过空容器模拟列表的滚动操作。空容器在可视区域即根节点的滚动与真实列表在可视区域的滚动表现一致。

S103：根据滚动事件及固定高度生成虚拟列表要渲染的节点，并在虚拟列表展示节点；其中，各节点在DOM层均属于同一层级。

具体的，虚拟列表通过绝对定位定在与根节点同样的位置，始终保持在可视区域。虚拟列表的高度为根节点的高度，虚拟列表所展示的始终是固定高度的节点，只是节点的内容随着滚动事件的触发而发生变化。当发生滚动事件后，根据滚动事件即固定高度生成虚拟列表中要渲染的节点并在虚拟列表中进行展示。其中，无论是当前在虚拟列表中展示的节点还是当前未在虚拟列表中展示的节点，各节点在DOM层均属于同一层级，而非层级嵌套，由此可以规避层级嵌套过深而加大复杂度，从而提升页面性能。

例如，参考图3所示，节点parent1、parent1-1、leaf1-1-1、leaf1-1-2等均属于同一层级，节点parent1-1并非嵌套于节点parent1，节点leaf1-1-1及节点leaf1-1-2并非嵌套于节点parent1-1。

其中，在一种具体的实施方式中，上述根据滚动事件即固定高度生成虚拟列表要渲染的节点包括：计算滚动距离与节点行高的比值，得到要渲染的起始节点；计算起始节点与固定高度的和值，得到要渲染的终止节点；起始节点与终止节点之间的节点为虚拟列表要渲染的节点。

具体而言，首先根据滚动距离计算得到要渲染的节点的起始位置。

起始节点的索引为startIndex，startIndex＝scrollTop/itemHeight；scrollTop表示滚动距离，itemHeight表示节点行高。

终止节点的索引为endIndex，endIndex＝startIndex+count；count表示可视区域可渲染的节点数，即所设置的固定高度。

根据起始节点与终止节点的索引找到要渲染的节点进行渲染，在虚拟列表展示。在监听滚动事件的过程中重复上述确定虚拟列表要渲染的节点的操作。

另外，在上述实施例的基础上，在虚拟列表展示节点包括：

根据一维数组中记录的节点位于树的深度，采用树形CSS样式在虚拟列表展示节点。

具体而言，本实施例中，数据结构采用扁平化的一维数组，并在一维数组中添加字段记录节点位于树的深度。如此，一方面利于查找节点，另一方面，当在虚拟列表中展示固定高度的节点时，根据一维数组中记录的节点位于树的深度，采用树形CSS样式进行展示，视觉上可以达到树形结构，具有父子层级结构，但是在DOM层各节点实则属于同一层级。

例如，参考图4所示，视觉上，节点parent1与节点parent1-1及节点parent1-2具有父子层级结构，节点parent1-1与节点leaf1-1-1及节点leaf1-1-2具有父子层级结构，节点parent1-2与节点leaf1-2-1及节点leaf1-2-2具有父子层级结构。但是在DOM层，节点parent1、parent1-1、parent1-2、leaf1-1-1、leaf1-1-2、leaf1-2-1以及leaf1-2-2均属于同一层级。

对于一维数组除添加用于记录节点位于树的深度的字段外，还可以尽可能的缩短其他字段以及去除不必要的字段，以将数据大小缩减到最小，减少http的请求时间。

进一步，由于可视区域的DOM节点会被频繁的删除添加，如果将点击事件绑定在树节点上，一方面需要给所有展示出来的DOM节点绑定点击事件，另一方面在可视区域的DOM节点发生变化时，还需要去做相应的解绑和绑定操作，从而造成性能的损耗。因此，在一种具体的实施方式中，添加节点的点击事件的方式为：将点击事件委托于虚拟列表，通过HTMLElement.dataset属性获取当前所点击节点，由此进一步提升性能。

委托节点点击事件的相关代码可如下所示：

//click事件绑定在虚拟列表而非内部的树节点

<div

v-for＝“item in treeData”

:key＝“item.id”

:class＝“`tree-node level-${item.level}`”

:data-id＝“item.id”

></div>

</div>

//点击事件处理

handleClick(e){

const{target}＝e；

const currentNodeId＝target.dataset.id；//currentNodeId为点击的树节点的ID}

进一步，在上述实施例的基础上，还包括：通过数组记录存在子节点的节点的点击状态，以根据点击状态渲染节点。

具体而言，对于存在子节点的节点作展开和折叠处理时，本实施例首先声明一个数组，用于保存被点击的节点在原始数据中的索引以及记录节点的点击状态。当滚动事件触发时，可以根据该数组中记录的点击状态进行渲染。当用户进行节点展开操作的时候，从点击的节点在原始数据中的索引开始往后找相应深度的数据，并且记录找到的数据中的尾索引，将这些数据添加到需要渲染的数组中。折叠同展开操作类似，在此不做赘述。当用户进行节点折叠操作时，将数据从渲染的数组中移除。由此，可以保证在可视区域中无须渲染多余的折叠的数据，减少DOM节点，提高性能。

综上所述，本申请所提供的实现树形控件支持大数据渲染的方法，设置并通过空容器模拟列表的滚动操作，通过虚拟列表展示固定高度的节点，虚拟列表中所展示的节点的内容随着滚动操作发生变化，但树形控件只需渲染与所设置的固定高度对应的固定数量的节点，可以极大的减少DOM渲染。此外，本申请所提供的实现树形控件支持大数据渲染的方法中，各节点在DOM层均属于同一层级，较之传统的层级嵌套方式，该方法可以有效规避层级嵌套过深而加大复杂度，从而提升页面性能。由此，通过减少DOM渲染以及提升页面性能，能够使树形控件支持万级数据渲染，且不发生页面卡顿、崩溃的情况。

本申请还提供了一种实现树形控件支持大数据渲染的装置，下文描述的该装置可以与上文描述的方法相互对应参照。请参考图5，图5为本申请实施例所提供的一种实现树形控件支持大数据渲染的装置的示意图，结合图5所示，该装置包括：

设置模块10，用于为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；

模拟模块20，用于通过所述空容器模拟列表的滚动操作；

展示模块30，用于当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。

在上述实施例的基础上，可选的，所述展示模块30具体用于根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。

在上述实施例的基础上，可选的，所述展示模块30具体用于计算滚动距离与节点行高的比值，得到要渲染的起始节点；计算所述起始节点与所述固定高度的和值，得到要渲染的终止节点；所述起始节点与所述终止节点之间的节点为所述虚拟列表要渲染的节点。

在上式实施例的基础上，可选的，添加节点的点击事件的方式为将点击事件委托于所述虚拟列表。

在上述实施例的基础上，可选的，还包括：

本申请还提供了一种实现树形控件支持大数据渲染的设备，参考图6所示，该设备包括存储器1和处理器2。

存储器1，用于存储计算机程序；

处理器2，用于执行计算机程序实现如下的步骤：

为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。

对于本申请所提供的设备的介绍请参照上述方法实施例，本申请在此不做赘述。

本申请还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时可实现如下的步骤：

该计算机可读存储介质可以包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

对于本申请所提供的计算机可读存储介质的介绍请参照上述方法实施例，本申请在此不做赘述。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置、设备以及计算机可读存储介质而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上对本申请所提供的实现树形控件支持大数据渲染的方法、装置、设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围。

Claims

1.一种实现树形控件支持大数据渲染的方法，其特征在于，包括：

通过所述空容器模拟列表的滚动操作；

2.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，所述在所述虚拟列表展示所述节点包括：

3.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，所述根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点包括：

计算滚动距离与节点行高的比值，得到要渲染的起始节点；

4.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，添加节点的点击事件的方式为将点击事件委托于所述虚拟列表。

5.根据权利要求1至4任一项所述的实现树形控件支持大数据渲染的方法，其特征在于，还包括：

6.一种实现树形控件支持大数据渲染的装置，其特征在于，包括：

模拟模块，用于通过所述空容器模拟列表的滚动操作；

7.根据权利要求6所述的实现树形控件支持大数据渲染的装置，其特征在于，所述展示模块具体用于根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。

8.根据权利要求6所述的实现树形控件支持大数据渲染的装置，其特征在于，还包括：

9.一种实现树形控件支持大数据渲染的设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1至5任一项所述的实现树形控件支持大数据渲染的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述的实现树形控件支持大数据渲染的方法的步骤。