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

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

【技术实现步骤摘要】
一种实现树形控件支持大数据渲染的方法及相关装置
本申请涉及树形控件
，特别涉及一种实现树形控件支持大数据渲染的方法；还涉及一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质。
技术介绍
在前端行业中，目前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。根节点框定可视区域范围，当根节点内的内容超出设置的固定高度时，会出现滚动条。根节点绑定滚动事件，当鼠标滚动时会触发滚动事件。此外，本申请在根节点添加两个容本文档来自技高网...

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

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


2.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，所述在所述虚拟列表展示所述节点包括：
根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。


3.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，所述根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点包括：
计算滚动距离与节点行高的比值，得到要渲染的起始节点；
计算所述起始节点与所述固定高度的和值，得到要渲染的终止节点；所述起始节点与所述终止节点之间的节点为所述虚拟列表要渲染的节点。


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


5.根据权利要求1至4任一项所述的实现树形控件支持大数据渲染的方法，其特征在于，还包括：
通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲...

【专利技术属性】
技术研发人员：郑思慧，范渊，刘博，
申请(专利权)人：杭州安恒信息技术股份有限公司，
类型：发明
国别省市：浙江;33