[发明专利]一种实现树形控件支持大数据渲染的方法及相关装置

说明书

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

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

可选的，还包括：

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

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

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

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

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