树形数据虚拟滚动处理方法及装置制造方法及图纸

技术编号:38764124 阅读:8 留言:0更新日期:2023-09-10 10:37
本申请实施例提供一种树形数据虚拟滚动处理方法及装置,方法包括:获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点;根据所述树形展开节点计算全量树形有效数据高度,对应的确定列表区域高度;根据所述列表区域高度确定对应的待渲染可见节点,并将所述待渲染可见节点移动至设定视窗内;本申请能够有效提高树形数据的展示渲染性能。够有效提高树形数据的展示渲染性能。够有效提高树形数据的展示渲染性能。

【技术实现步骤摘要】
树形数据虚拟滚动处理方法及装置


[0001]本申请涉及数据处理领域,具体涉及一种树形数据虚拟滚动处理方法及装置。

技术介绍

[0002]前端dom页面渲染时,每一次页面滚动事件将会让对应 DOM 中的所有元素重新渲染。若页面存在大量的dom元素,则重新渲染的性能开销巨大,往往造成页面卡顿。
[0003]当页面需要展示大量数据时,且数据需要全量加载到前端进行一些实时计算时,由于dom元素数量过多,页面初次加载和滚动变化时,大量dom元素参与重排动作,带来巨大性能开销,造成页面卡顿。

技术实现思路

[0004]针对现有技术中的问题,本申请提供一种树形数据虚拟滚动处理方法及装置,能够有效提高树形数据的展示渲染性能。
[0005]为了解决上述问题中的至少一个,本申请提供以下技术方案:第一方面,本申请提供一种树形数据虚拟滚动处理方法,包括:获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点;根据所述树形展开节点计算全量树形有效数据高度,对应的确定列表区域高度;根据所述列表区域高度确定对应的待渲染可见节点,并将所述待渲染可见节点移动至设定视窗内。
[0006]进一步地,所述获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点,还包括:判断获取到的页面视图信息是否存在级联父节点未展开;若存在,则剔除对应的级联父节点。
[0007]进一步地,所述根据所述列表区域高度确定对应的待渲染可见节点,包括:根据所述列表区域高度确定当前列表滚动区域;根据所述当前列表滚动区域确定对应的待渲染可见节点。
[0008]进一步地, 所述将所述待渲染可见节点移动至设定视窗内,包括:通过监听滚动区域的滚动事件,动态计算待显示的内容;将所述待渲染可见节点定位到设定视窗内对应的位置。
[0009]进一步地,所述将所述待渲染可见节点移动至设定视窗内,还包括:将可视区域的非末级树形节点的第一个子节点渲染到文档对象模型中;若父节点状态为收缩,则该节点收缩不可见。
[0010]进一步地,所述将所述待渲染可见节点移动至设定视窗内,还包括:将可视区域第一个节点的所有上级节点渲染到文档对象模型中;通过位置偏移使其偏移到可视区域上方以达到不可见的效果。
[0011]第二方面,本申请提供一种树形数据虚拟滚动处理装置,包括:
树形节点展开模块,用于获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点;区域高度确定模块,用于根据所述树形展开节点计算全量树形有效数据高度,对应的确定列表区域高度;渲染节点移动模块,用于根据所述列表区域高度确定对应的待渲染可见节点,并将所述待渲染可见节点移动至设定视窗内。
[0012]进一步地,所述树形节点展开模块包括:父节点判断单元,用于判断获取到的页面视图信息是否存在级联父节点未展开;父节点剔除单元,用于若存在,则剔除对应的级联父节点。
[0013]进一步地,所述渲染节点移动模块包括:滚动区域确定单元,用于根据所述列表区域高度确定当前列表滚动区域;渲染节点确定单元,用于根据所述当前列表滚动区域确定对应的待渲染可见节点。
[0014]进一步地, 所述渲染节点移动模块包括:滚动监听单元,用于通过监听滚动区域的滚动事件,动态计算待显示的内容;节点移动单元,用于将所述待渲染可见节点定位到设定视窗内对应的位置。
[0015]进一步地,所述渲染节点移动模块还包括:子节点渲染单元,用于将可视区域的非末级树形节点的第一个子节点渲染到文档对象模型中;父节点收缩单元,用于若父节点状态为收缩,则该节点收缩不可见。
[0016]进一步地,所述渲染节点移动模块还包括:上级节点渲染单元,用于将可视区域第一个节点的所有上级节点渲染到文档对象模型中;节点偏移单元,用于通过位置偏移使其偏移到可视区域上方以达到不可见的效果。
[0017]第三方面,本申请提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现所述的树形数据虚拟滚动处理方法的步骤。
[0018]第四方面,本申请提供一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现所述的树形数据虚拟滚动处理方法的步骤。
[0019]第五方面,本申请提供一种计算机程序产品,包括计算机程序/指令,该计算机程序/指令被处理器执行时实现所述的树形数据虚拟滚动处理方法的步骤。
[0020]由上述技术方案可知,本申请提供一种树形数据虚拟滚动处理方法及装置,通过获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点;根据所述树形展开节点计算全量树形有效数据高度,对应的确定列表区域高度;根据所述列表区域高度确定对应的待渲染可见节点,并将所述待渲染可见节点移动至设定视窗内,由此能够有效提高树形数据的展示渲染性能。
附图说明
[0021]为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
[0022]图1为本申请实施例中的树形数据虚拟滚动处理方法的流程示意图之一;图2为本申请实施例中的树形数据虚拟滚动处理方法的流程示意图之二;图3为本申请实施例中的树形数据虚拟滚动处理方法的流程示意图之三;图4为本申请实施例中的树形数据虚拟滚动处理方法的流程示意图之四;图5为本申请实施例中的树形数据虚拟滚动处理方法的流程示意图之五;图6为本申请实施例中的树形数据虚拟滚动处理方法的流程示意图之六;图7为本申请实施例中的树形数据虚拟滚动处理装置的结构图之一;图8为本申请实施例中的树形数据虚拟滚动处理装置的结构图之二;图9为本申请实施例中的树形数据虚拟滚动处理装置的结构图之三;图10为本申请实施例中的树形数据虚拟滚动处理装置的结构图之四;图11为本申请实施例中的树形数据虚拟滚动处理装置的结构图之五;图12为本申请实施例中的树形数据虚拟滚动处理装置的结构图之六;图13为本申请一具体实施例中的滚动原理示意图之一;图14为本申请一具体实施例中的滚动原理示意图之二;图15为本申请实施例中的电子设备的结构示意图。
具体实施方式
[0023]为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整的描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
[0024]本申请技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
[0025]考虑到现有技术中当页面需要展示大量数据时,且数据需要全量加载到前端进行一些实时计算时,由于dom元素数量过多,页面初次加载和滚动变化时,大量dom元素参与重排动作本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种树形数据虚拟滚动处理方法,其特征在于,所述方法包括:获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点;根据所述树形展开节点计算全量树形有效数据高度,对应的确定列表区域高度;根据所述列表区域高度确定对应的待渲染可见节点,并将所述待渲染可见节点移动至设定视窗内。2.根据权利要求1所述的树形数据虚拟滚动处理方法,其特征在于,所述获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点,还包括:判断获取到的页面视图信息是否存在级联父节点未展开;若存在,则剔除对应的级联父节点。3.根据权利要求1所述的树形数据虚拟滚动处理方法,其特征在于,所述根据所述列表区域高度确定对应的待渲染可见节点,包括:根据所述列表区域高度确定当前列表滚动区域;根据所述当前列表滚动区域确定对应的待渲染可见节点。4.根据权利要求1所述的树形数据虚拟滚动处理方法,其特征在于,所述将所述待渲染可见节点移动至设定视窗内,包括:通过监听滚动区域的滚动事件,动态计算待显示的内容;将所述待渲染可见节点定位到设定视窗内对应的位置。5.根据权利要求1所述的树形数据虚拟滚动处理方法,其特征在于,所述将所述待渲染可见节点移动至设定视窗内,还包括:将可视区域的非末级树形节点的第一个子节点渲染到文档对象模型中;若父节点状态为收缩,则该节点收缩不可见。6.根据权利要求1所述的树形数据虚拟滚动处理方法,其特征在于,所述将所述待渲染可见节点移动至设定视窗内,还包括:将可视区域第一个节点的所有上级节点渲染到文档对象模型中;通过位置偏移使其偏移到可视区域上方以达到不可见的效果。7.一种树形数据虚拟滚动处理装置,其特征在于,包括:树形节点展开模块,用于获取页面视图信息,根据所述页面视图信息确定对应的树形展开节点;区域高度确定模块,用于根据所述树形展开节点计算全量树形有效数据高度,对应的确定列表区域高度;渲染节点移动模块,用于根据所述列表区域高度确定对应的待渲染可见节点,并将所述待渲染可见节点移...

【专利技术属性】
技术研发人员:刘誉坤
申请(专利权)人:北京久其金建科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1