一种前端海量树形结构展示方法、装置、电子设备及介质制造方法及图纸

本发明专利技术涉及一种前端海量树形结构展示方法、装置、电子设备及介质，其方法包括：将扁平数组进行递归计算得到树形层级关系数据，并将树形层级关系数据在Web端显示得到菜单树；实时获取菜单树中可滚动数据的数据总数；获取单条可滚动数据的高度，基于可滚动数据的数据总数和单条可滚动数据的高度确定可滚动总高度；获取菜单树的当前可视区域高度，基于当前可视区域高度和可滚动总高度确定滚动条的位置；基于滚动条的位置得到菜单树的当前可视区域的第一条数据的索引和最后一条数据的索引，在浏览器中对第一条数据的索引和最后一条数据的索引之间的数据进行渲染。本发明专利技术的海量树形数据在Web页面显示的时候实现了虚拟滚动。据在Web页面显示的时候实现了虚拟滚动。据在Web页面显示的时候实现了虚拟滚动。

【技术实现步骤摘要】
一种前端海量树形结构展示方法、装置、电子设备及介质


[0001]本专利技术涉及计算机
，尤其涉及一种前端海量树形结构展示方法、装置、电子设备及介质。

技术介绍

[0002]在Web浏览器环境中，数据的展示有很多种形式。但是数据量较大时，一般以“表格”形式来展示所有数据细节。
[0003]虚拟滚动是指在Web页面中对数据不进行显示的数据分页，根据每行数据的高度和数据的总条数计算出数据的总高度，然后跟表格展示区域的高度做对比计算，计算出一个虚拟滚动条。当滚动条滚动时，根据滚动条的相对位置，计算出当前应展示的数据页，然后将当前数据页及前后部分数据的DOM加载到Web浏览器中。
[0004]现有技术中的虚拟滚动在数据量在10
‑
50条的时候，嵌套的DOM数量不会很多，Web浏览器流畅加载。然而在海量树形数据的展示中，在浏览器中对海量树形数据进行渲染时如何实现虚拟滚动是现有技术中存在的问题。

技术实现思路

[0005]有鉴于此，有必要提供一种前端海量树形结构展示方法、装置、电子设备及介质，用以实现海量树形数据在Web页面显示的时候实现虚拟滚动的目的。
[0006]为了实现上述目的，本专利技术提供一种前端海量树形结构展示方法，包括：获取需要在Web端展示的树形结构的源数据，通过递归组件将所述源数据转换为扁平数组；基于所述扁平数组进行递归计算得到树形层级关系数据，并将所述树形层级关系数据在Web端显示得到菜单树；基于深度优先算法对所述菜单树进行遍历，实时获取所述菜单树中可滚动数据的数据总数；获取单条可滚动数据的高度，基于所述可滚动数据的数据总数和所述单条可滚动数据的高度确定可滚动总高度；获取所述菜单树的当前可视区域高度，基于所述当前可视区域高度和所述可滚动总高度确定滚动条的位置；基于所述滚动条的位置得到所述菜单树的当前可视区域的第一条数据的索引；根据所述第一条数据的索引、所述可视区域高度、所述单条可滚动数据的高度得到菜单树当前可视区域的最后一条数据的索引；在浏览器中对所述第一条数据的索引和所述最后一条数据的索引之间的数据进行渲染。
[0007]在一些可能的实现方式中，所述递归组件为JavaScript解析引擎。
[0008]在一些可能的实现方式中，所述菜单树初始状态只包括根节点。
[0009]在一些可能的实现方式中，所述实时获取所述菜单树中可滚动数据的数据总数，包括：当在所述菜单树中添加叶子节点数据时，获取所述菜单树中可滚动数据的数据总数；当在所述菜单树中删除叶子节点数据时，获取所述菜单树中可滚动数据的数据总数；当在所述菜单树中将一个叶子节点数据拖动到另外一个节点数据上时，获取所述菜单树中可滚动数据的数据总数。
[0010]在一些可能的实现方式中，所述基于所述当前可视区域高度和所述可滚动总高度确定滚动条的位置，包括：基于所述当前可视区域高度和所述可滚动总高度得到滚动条的高度；基于所述滚动条的高度确定滚动条的位置。
[0011]在一些可能的实现方式中，所述基于所述当前可视区域高度和所述可滚动总高度得到滚动条的高度，包括：基于所述当前可视区域高度和所述可滚动总高度的比例，得到滚动条的高度。
[0012]在一些可能的实现方式中，还包括：在所述第一条数据的索引之前添加偏移量得到第一索引，在所述最后一条数据的索引之后添加所述偏移量得到第二索引；将第一索引和第二索引之间的数据截取得到数据片；在浏览器中对所述数据片进行渲染。
[0013]另一方面，本专利技术还提供了一种前端海量树形结构展示装置，包括：源数据转化模块，用于获取需要在Web端展示的树形结构的源数据，通过递归组件将所述源数据转换为扁平数组；菜单树获取模块，用于对所述扁平数组进行递归计算得到树形层级关系数据，并将所述树形层级关系数据在Web端显示得到菜单树；可滚动数据获取模块，用于基于深度优先算法对所述菜单树进行遍历，实时获取所述菜单树中可滚动数据的数据总数；可滚动总高度获取模块，用于获取单条可滚动数据的高度，基于所述可滚动数据的数据总数和所述单条可滚动数据的高度确定可滚动总高度；滚动条位置确定模块，用于获取所述菜单树的当前可视区域高度，基于所述当前可视区域高度和所述可滚动总高度确定滚动条的位置；第一索引确定模块，用于基于所述滚动条的位置得到所述菜单树的当前可视区域的第一条数据的索引；第二索引确定模块，用于根据所述第一条数据的索引、所述可视区域高度、所述单条可滚动数据的高度得到菜单树当前可视区域的最后一条数据的索引；页面渲染模块，用于在浏览器中对所述第一条数据的索引和所述最后一条数据的索引之间的数据进行渲染。
[0014]另一方面，本专利技术还提供了一种电子设备，包括存储器和处理器，其中，所述存储器，用于存储程序；
所述处理器，与所述存储器耦合，用于执行所述存储器中存储的所述程序，以实现上述任意一种实现方式中所述的一种前端海量树形结构展示方法中的步骤。
[0015]另一方面，本专利技术还提供了一种计算机可读存储介质，用于存储计算机可读取的程序或指令，所述程序或指令被处理器执行时能够实现上述任意一种实现方式中所述的一种前端海量树形结构展示方法中的步骤。
[0016]采用上述实施例的有益效果是：本专利技术提供的一种前端海量树形结构展示方法，将获取的扁平数组进行递归计算得到树形层级关系数据，并将树形层级关系数据在Web端显示得到菜单树，对菜单树进行遍历，实时获取菜单树中可滚动数据的数据总数，获取单条可滚动数据的高度，根据可滚动数据的数据总数和单条可滚动数据的高度确定可滚动总高度，然后获取菜单树的当前可视区域高度，基于当前可视区域高度和可滚动总高度确定滚动条的位置，根据滚动条的位置得到菜单树的当前可视区域的第一条数据的索引，然后根据第一条数据的索引、可视区域高度、单条可滚动数据的高度得到菜单树当前可视区域的最后一条数据的索引，最后在浏览器中对第一条数据的索引和最后一条数据的索引之间的数据进行渲染。本专利技术实时获取菜单树中每条可滚动数据总数、可滚动总高度和菜单树的当前可视区域高度确定滚动条的位置，根据滚动条的位置确定第一条数据索引以及最后一条数据索引，最后对第一条数据索引和最后一条数据索引之间的数据进行渲染，本专利技术在海量树形数据在Web页面显示的时候实现虚拟滚动。
附图说明
[0017]图1为本专利技术提供的一种前端海量树形结构展示方法一实施例的方法流程图；图2为本专利技术提供的一种前端海量树形结构展示装置的一个实施例结构示意图；图3为本专利技术提供的电子设备的一个实施例结构示意图。
具体实施方式
[0018]下面结合附图来具体描述本专利技术的优选实施例，其中，附图构成本申请一部分，并与本专利技术的实施例一起用于阐释本专利技术的原理，并非用于限定本专利技术的范围。
[0019]图1为本专利技术提供的一种前端海量树形结构展示方法的一个实施例流程示意图，如图1所示，一种前端海量树形结构展示方法，包括：S101、获取需要在Web端展示的树形结构的源数据，通过递归组件将所述源数据转换为扁平数组；S102本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端海量树形结构展示方法，其特征在于，包括：获取在Web端展示的树形结构的源数据，通过递归组件将所述源数据转换为扁平数组；对所述扁平数组进行递归计算得到树形层级关系数据，并将所述树形层级关系数据在Web端显示得到菜单树；基于深度优先算法对所述菜单树进行遍历，实时获取所述菜单树中可滚动数据的数据总数；获取单条可滚动数据的高度，基于所述可滚动数据的数据总数和所述单条可滚动数据的高度确定可滚动总高度；获取所述菜单树的当前可视区域高度，基于所述当前可视区域高度和所述可滚动总高度确定滚动条的位置；基于所述滚动条的位置得到所述菜单树的当前可视区域的第一条数据的索引；根据所述第一条数据的索引、所述可视区域高度、所述单条可滚动数据的高度得到菜单树当前可视区域的最后一条数据的索引；在浏览器中对所述第一条数据的索引和所述最后一条数据的索引之间的数据进行渲染。2.根据权利要求1所述的前端海量树形结构展示方法，其特征在于，所述递归组件为JavaScript解析引擎。3.根据权利要求1所述的前端海量树形结构展示方法，其特征在于，所述菜单树初始状态只包括根节点。4.根据权利要求1所述的前端海量树形结构展示方法，其特征在于，所述实时获取所述菜单树中可滚动数据的数据总数，包括：当在所述菜单树中添加叶子节点数据时，获取所述菜单树中可滚动数据的数据总数；当在所述菜单树中删除叶子节点数据时，获取所述菜单树中可滚动数据的数据总数；当在所述菜单树中将一个叶子节点数据拖动到另外一个节点数据上时，获取所述菜单树中可滚动数据的数据总数。5.根据权利要求1所述的前端海量树形结构展示方法，其特征在于，所述基于所述当前可视区域高度和所述总的可滚动总高度确定滚动条的位置，包括：基于所述当前可视区域高度和所述可滚动总高度得到滚动条的高度；基于所述滚动条的高度确定滚动条的位置。6.根据权利要求5所述的前端海量树形结构展示方法，其特征在于，所述基于所述当前可视区域高度和所述可滚动总高度得到滚动条的高度，包括：基于所...

【专利技术属性】
技术研发人员：林景宜，陈超凡，白云，李磊，魏以伟，向万里，
申请(专利权)人：中建三局信息科技有限公司，
类型：发明
国别省市：