[发明专利]树组件弹窗的渲染方法及装置

说明书

本发明实施例提供一种树组件弹窗的渲染方法及装置，其中方法包括：响应于节点展开指令，确定待展开的数据节点；节点展开指令中指示待展开的数据节点；更新与待展开的数据节点处于同一层级的其他数据节点的状态均为隐藏状态，隐藏其他数据节点的子孙节点；将待展开的数据节点的状态由隐藏状态更新为展示状态，在待展开的数据节点下显示待展开的数据节点的所有子节点。本发明实施例提升了树组件弹窗的渲染速度。

技术领域

本发明涉及数据处理技术领域，更具体地，涉及树组件弹窗的渲染方法及装置。

背景技术

React技术栈、vue技术栈以及angular技术栈是前端(网页端)目前主流的框架，在业界中使用非常广泛，这三种技术栈都存在两个特点，1、数据驱动视图，2、具有虚拟dom这一层的存在。基于以上两点，大数据量的渲染问题在上述三种技术栈中会体现的更明显：包含树组件(具体场景例如银行树、组织树)的弹窗在大数据量下(4000以上的节点数)时操作会非常的卡顿，弹窗完全展开甚至需要5秒钟时间，影响用户的使用体验。

针对该技术栈该场景下的优化，业界只着重于分析问题的原因，并且只给出一些大的优化的方向，没有给出具体的、可执行的方案。

发明内容

本发明实施例提供一种克服上述问题或者至少部分地解决上述问题的树组件弹窗的渲染方法及装置。

第一个方面，本发明实施例提供一种树组件弹窗的渲染方法，包括：

响应于节点展开指令，确定待展开的数据节点；所述节点展开指令中指示待展开的数据节点；

更新与所述待展开的数据节点处于同一层级的其他数据节点的状态均为隐藏状态，隐藏所述其他数据节点的子孙节点；

将所述待展开的数据节点的状态由隐藏状态更新为展示状态，在所述待展开的数据节点下显示所述待展开的数据节点的所有子节点。

进一步地，所述响应于节点展开指令，确定待展开的数据节点的步骤之前还包括：

构建树组件弹窗，将所述树组件弹窗中预设层级的数据节点的状态设置为默认展开状态，将预设层级的数据节点之外的数据节点的状态更新为隐藏状态；所述预设层数小于树组件弹窗中的总层数；

响应于弹窗开启指令，将所述树组件弹窗中的所述预设层级的数据节点的默认展开状态更新为展开状态，开启弹窗界面，在状态为展开状态的数据节点下显示所有子节点。

进一步地，本发明实施例的树组件弹窗的渲染方法，还包括：

响应于弹窗关闭指令，操作dom文档对象模型将弹窗界面关闭，之后通过setState方法对树组件弹窗中的数据节点进行更新。

进一步地，所述通过setState方法对树组件弹窗中的数据节点进行更新，具体为：

将所述树组件弹窗中预设层级的数据节点的状态更新为默认展开状态，将预设层级的数据节点之外的数据节点的状态更新为隐藏状态。

进一步地，所述更新与所述待展开的数据节点处于同一层级的其他数据节点的状态均为隐藏状态，具体为：

确定与所述待展开的数据节点处于同一层级的其他数据节点的状态；

若存在处于展示状态的其他数据节点，则将所述处于展示状态的其他数据节点的状态更新为隐藏状态。

进一步地，所述树组件弹窗中的数据节点具有唯一标识和父节点属性；父节点属性用于表征数据节点的父节点的唯一标识；

相应的，所述与所述待展开的数据节点处于同一层级的其他数据节点，根据与所述待展开的数据节点具有相同的父节点属性确定。

第二个方面，本发明实施例提供一种树组件弹窗的渲染装置，包括：