树组件弹窗的渲染方法及装置制造方法及图纸

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

【技术实现步骤摘要】
树组件弹窗的渲染方法及装置
本专利技术涉及数据处理
，更具体地，涉及树组件弹窗的渲染方法及装置。
技术介绍
React技术栈、vue技术栈以及angular技术栈是前端(网页端)目前主流的框架，在业界中使用非常广泛，这三种技术栈都存在两个特点，1、数据驱动视图，2、具有虚拟dom这一层的存在。基于以上两点，大数据量的渲染问题在上述三种技术栈中会体现的更明显：包含树组件(具体场景例如银行树、组织树)的弹窗在大数据量下(4000以上的节点数)时操作会非常的卡顿，弹窗完全展开甚至需要5秒钟时间，影响用户的使用体验。针对该技术栈该场景下的优化，业界只着重于分析问题的原因，并且只给出一些大的优化的方向，没有给出具体的、可执行的方案。
技术实现思路
本专利技术实施例提供一种克服上述问题或者至少部分地解决上述问题的树组件弹窗的渲染方法及装置。第一个方面，本专利技术实施例提供一种树组件弹窗的渲染方法，包括：响应于节点展开指令，确定待展开的数据节点；所述节点展开指令中指示待展开的数据节点；r>更新与所述待展开本文档来自技高网...

【技术保护点】
1.一种树组件弹窗的渲染方法，其特征在于，包括：/n响应于节点展开指令，确定待展开的数据节点；所述节点展开指令中指示待展开的数据节点；/n更新与所述待展开的数据节点处于同一层级的其他数据节点的状态均为隐藏状态，隐藏所述其他数据节点的子孙节点；/n将所述待展开的数据节点的状态由隐藏状态更新为展示状态，在所述待展开的数据节点下显示所述待展开的数据节点的所有子节点。/n

【技术特征摘要】
1.一种树组件弹窗的渲染方法，其特征在于，包括：
响应于节点展开指令，确定待展开的数据节点；所述节点展开指令中指示待展开的数据节点；
更新与所述待展开的数据节点处于同一层级的其他数据节点的状态均为隐藏状态，隐藏所述其他数据节点的子孙节点；
将所述待展开的数据节点的状态由隐藏状态更新为展示状态，在所述待展开的数据节点下显示所述待展开的数据节点的所有子节点。


2.根据权利要求1所述的树组件弹窗的渲染方法，其特征在于，所述响应于节点展开指令，确定待展开的数据节点的步骤之前还包括：
构建树组件弹窗，将所述树组件弹窗中预设层级的数据节点的状态设置为默认展开状态，将预设层级的数据节点之外的数据节点的状态更新为隐藏状态；所述预设层数小于树组件弹窗中的总层数；
响应于弹窗开启指令，将所述树组件弹窗中的所述预设层级的数据节点的默认展开状态更新为展开状态，开启弹窗界面，在状态为展开状态的数据节点下显示所有子节点。


3.根据权利要求2所述的树组件弹窗的渲染方法，其特征在于，还包括：
响应于弹窗关闭指令，操作dom文档对象模型将弹窗界面关闭，之后通过setState方法对树组件弹窗中的数据节点进行更新。


4.根据权利要求3所述的树组件弹窗的渲染方法，其特征在于，所述通过setState方法对树组件弹窗中的数据节点进行更新，具体为：
将所述树组件弹窗中预设层级的数据节点的状态更新为默认展开状态，将预设层级的数据节点之外的数据节点的状态更新为隐藏状态。


5.根据权利要求1所述的树组件弹窗的渲染方法，其特征在于，所述更新与所述待展开的数据节点处于同一层级的其他数据节点的状态均为隐藏状态，具体为：
确定与所述待展开的数据节点处于同一层级的其他数据节点的状态；
若存在处于展示状态的其他数据节点，则将所述处于展示状态的其他...

【专利技术属性】
技术研发人员：李金鹏，
申请(专利权)人：贝壳技术有限公司，
类型：发明
国别省市：天津;12