CN116955863A - 基于虚拟树的动态树形结构渲染方法及装置 - Google Patents
基于虚拟树的动态树形结构渲染方法及装置 Download PDFInfo
- Publication number
- CN116955863A CN116955863A CN202310628377.0A CN202310628377A CN116955863A CN 116955863 A CN116955863 A CN 116955863A CN 202310628377 A CN202310628377 A CN 202310628377A CN 116955863 A CN116955863 A CN 116955863A
- Authority
- CN
- China
- Prior art keywords
- data
- rendering
- tree structure
- height
- array
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 155
- 238000000034 method Methods 0.000 title claims abstract description 77
- 238000000547 structure data Methods 0.000 claims abstract description 36
- 238000012545 processing Methods 0.000 claims abstract description 24
- 230000000007 visual effect Effects 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 15
- 238000007781 pre-processing Methods 0.000 claims description 4
- 238000012216 screening Methods 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 14
- 230000008569 process Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 238000004364 calculation method Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000011068 loading method Methods 0.000 description 2
- 238000013508 migration Methods 0.000 description 2
- 230000005012 migration Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 125000004122 cyclic group Chemical group 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 238000000638 solvent extraction Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本发明提供一种基于虚拟树的动态树形结构渲染方法及装置，该基于虚拟树的动态树形结构渲染方法包括：获取树结构数据；对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据；基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。本发明所述方法能够对当前页面中的虚拟树结构数组的动态渲染，运用预估高度和更新缓存位置信息方法摆脱了固定高度的束缚，实现了列表项高度的动态更新，使得应用场景更丰富。
Description
技术领域
本发明涉及数据处理技术领域，尤其涉及一种基于虚拟树的动态树形结构渲染方法及装置。
背景技术
目前的树形结构渲染展示方法，主要通过循环或者递归的方式组装数据，生成有层级的树形结构，然后页面将全部树形结构数据进行渲染展示，对于数据量大的情景，页面进行树形结构全部数据渲染耗时巨大，会出现页面卡死现象；或是分批渲染，一开始只渲染一级节点，不对二级节点做解析和渲染，等用户点击某一个一级节点时才开始渲染此节点的二级节点，以此类推，当节点展开的数据多了后，同样会出现渲染时间长，页面卡死的现象，且上述方法只能对固定高度的树结构数据进行渲染，实用性差。
发明内容
本发明提供一种基于虚拟树的动态树形结构渲染方法及装置，用以解决现有技术采用循环、递归或者分批渲染的方式组装大量数据进行渲染展示时渲染效率低，容易导致页面卡死，且仅针对固定高度的树结构数据进行渲染，而导致实用性的缺陷，提高了渲染效率和实用性。
本发明提供一种基于虚拟树的动态树形结构渲染方法，包括：
获取树结构数据；
对所述树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；
基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，所述预设的缓存值用于设置待渲染区域的缓冲区域；
基于所述真实渲染数据对所述当前页面进行树渲染，得到动态树形结构的节点信息，并基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息。
根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述待渲染区域包括可视区域和缓冲区域，所述缓冲区域与所述可视区域相互独立；
所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，包括：
基于所述可视区域的高度和所述预估高度计算所述可视区域所需渲染的元素数目，得到所述可视区域的渲染数据和所需渲染的元素的位置的索引信息；
基于所述预设的缓存值和所述预估高度得到所述缓冲区域的列表项数目；
基于所述可视区域的渲染数据、所需渲染的元素的位置的索引信息和所述缓冲区域的列表项数目，得到所述当前页面的真实渲染数据。
根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述得到结构化数组之后，所述方法还包括：
对所述结构化数组进行是否具有节点层级、是否展开和是否可视化的筛选，并在所述结构化数组具备节点层级、所述结构化数组可以展开和所述结构化数组可视的情况下，确定所述结构化数组为有效数组。
根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述结构化数组包括多个列表项，所述基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息，包括：
将每个列表项的预估高度更新为实际高度并存入缓存数组，所述缓存数组用于在页面渲染后存储每个列表项的高度数据和位置信息。
根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，在所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据之后，所述方法还包括：
基于所述当前页面的真实渲染数据确定目标滚动条；
获取所述目标滚动条当前位置的数据索引；
计算所述数据索引对应的数据在所述结构化数组中的偏移位置，并将所述偏移位置设置在所述结构化数组。
根据本发明提供的一种基于虚拟树的动态树形结构渲染方法，所述计算所述数据索引对应的数据在所述结构化数组中的偏移位置，包括：
应用如下公式确定所述偏移位置：
偏移量＝itemCache[startIndex].top-itemCache[oldStartIndex].top；
其中，itemCache[startIndex].top为当前起始数据的top值，itemCache[oldStartIndex].top为滚动前起始数据的top值，startIndex为所述当前位置的数据索引，oldStartIndex为滚动前的位置的数据索引，itemCache[]为缓存数组。
本发明还提供一种基于虚拟树的动态树形结构渲染装置，包括：
获取模块，用于获取树结构数据；
数据预处理模块，用于对所述树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；
计算模块，用于基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，所述预设的缓存值用于设置待渲染区域的缓冲区域；
渲染和更新模块，用于基于所述真实渲染数据对所述当前页面进行树渲染，得到动态树形结构的节点信息，并基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息。
本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述基于虚拟树的动态树形结构渲染方法。
本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述基于虚拟树的动态树形结构渲染方法。
本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述基于虚拟树的动态树形结构渲染方法。
本发明提供的基于虚拟树的动态树形结构渲染方法及装置，通过获取树结构数据，对树结构数据进行深度优先遍历处理，得到结构化数组，基于结构化数组的预估高度、待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据根据获取的真实渲染数据，并基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，能够对当前页面中的虚拟树结构数组的动态渲染，运用预估高度和更新缓存位置信息方法摆脱了固定高度的束缚，实现了列表项高度的动态更新，使得应用场景更丰富。
附图说明
为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明提供的基于虚拟树的动态树形结构渲染方法的流程示意图之一；
图2是本发明提供的结构化数组中待渲染区域的结构示意图之一；
图3是本发明提供的基于虚拟树的动态树形结构渲染方法的流程示意图之二；
图4是本发明提供的结构化数组中待渲染区域的结构示意图之二；
图5是本发明提供的缓存数组的结构示意图；
图6是本发明提供的滚动渲染前后的数据偏移的界面示意图；
图7是本发明提供的基于虚拟树的动态树形结构渲染装置的结构示意图；
图8示例了一种电子设备的实体结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
下面结合图1-图7描述本发明的基于虚拟树的动态树形结构渲染方法及装置。
图1是本发明提供的基于虚拟树的动态树形结构渲染方法的流程示意图之一，如图1所示，该基于虚拟树的动态树形结构渲染方法包括如下步骤：
步骤110、获取树结构数据。
在该步骤中，可以通过数据传输协议获取服务器发送的树结构数据，例如，可以通过HTTP(Hyper Text Transfer Protocol，超文本传输协议)接口从服务端获取树结构数据。
在该实施例中，服务器可以是本地服务器，还可以是远程服务器。
步骤120、对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组。
在该步骤中，结构化的数组可以是虚拟树，虚拟树包括多个列表项，每个列表项的高度并不固定。
在该实施例中，结构化数组展开前是以列表的形式展现，展开后以树的形式展现。
在该实施例中，对树结构数据进行深度优先遍历处理，即从根节点出发，以此向树结构的多个子节点方向搜索，每当访问一个结点的时候，要检查是否还有与当前结点相邻的且没有被访问过的结点，如果有的话就往下一层遍历。
在该实施例中，将树结构数据转换为结构化的转换标准可以根据用户需求设置，利用设置标准化模板，将树结构数据按照该模板依次组装，得到结构化数组。
在该实施例中，标准化模板可以包括节点层级划分和数据格式统一等约束选项。
步骤130、基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据，预设的缓存值用于设置待渲染区域的缓冲区域。
在该步骤中，获取结构化数组后，可以通过初始化数组计算当前页面中展开后的结构化数组的待渲染区域。
在该步骤中，结构化数组的预估高度是根据用户需求设置的默认值。
在该步骤中，预设的缓存值可以根据用户需求设置，用于在虚拟树定义的缓冲区域的位置和长度。
在该实施例中，待渲染区域主要包括可视区域和缓冲区域。
图2是本发明提供的结构化数组中待渲染区域的结构示意图之一，在图2所示的实施例中，结构化数组为一个虚拟树，列表区域为可滚动区域，即虚拟树的总长度。假设有10000条数据，每个列表项的高度是50，那么可滚动的区域的高度就是10000*50。当用户改变列表的滚动条的当前滚动值的时候，会造成可视区域的内容的变更；列表右侧有纵向滚动条可以滚动，则视觉可视的区域就是可视区域，可视区域高度支持自定义设置；列表渲染区是可以大于等于可视区。自定义设置合适的缓存值，在可视区外设置缓冲区，额外渲染合适的列表项。
在该实施例中，当前页面的真实渲染数据主要由两部分组成，一部分是可视区域的渲染数据，由该区域中待渲染的元素数目及其位置索引信息确定，另一部分是缓冲区域的渲染数据；在滚动幅度小且未超过缓冲区域时，渲染中心可以直接渲染，不用计算中心再进行计算，一定程度减少计算频次，而在滚动过快时，会先显示缓存区中的元素，以减少白屏出现的情况。
步骤140、基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。
在该步骤中，在实现页面树渲染后，添加获取列表项高度的功能，并将该功能传入数据项的索引Index，以返回对应列表项的高度，并将列表项预估高度更新为实际高度并存入缓存数组。
在该步骤中，结构化数组为虚拟树时，数组中包括多个列表项，每个列表项的高度并不固定，可以通过预估高度和更新缓存位置信息来动态更新列表项的高度。
在该实施例中，可以定义一个缓存数组itemCache，用于列表项渲染后存储每一项的高度以及位置信息。
在该实施例中，初次渲染完成后，对itemCache的节点进行更新，使得列表位置信息更精确。
在该实施例中，在初次渲染完成后，可以采用二分法计算滚动条位置对应数组位置索引，以获取对应数据在整个列表中的偏移位置，进而得到数组更新后的位置。
图3是本发明提供的基于虚拟树的动态树形结构渲染方法的流程示意图之二，在图3所示的实施例中，动态树形结构渲染展示包括树展示和滚动滚动条或收展树节点的过程，在树展示过程，通过数据中心获取树结构数据，并通过对书结构数据进行预估高度初始化的数据组装过程，得到结构化数据，并计算待渲染区域(可视区域和缓冲区域)，在初次展开结构化数据(以列表的形式展开)，通过添加滚动完成树渲染过程；另外，在滚动滚动条时，可以将每次渲染保存的节点信息进行缓存，并通过更新缓存对虚拟树中各列表项的高度及您修改动态更新，以确保各列表项位置的准确性。
本发明实施例提供的基于虚拟树的动态树形结构渲染方法，通过获取树结构数据，对树结构数据进行深度优先遍历处理，得到结构化数组，基于结构化数组的预估高度、待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据根据获取的真实渲染数据，并基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，能够对当前页面中的虚拟树结构数组的动态渲染，运用预估高度和更新缓存位置信息方法摆脱了固定高度的束缚，实现了列表项高度的动态更新，使得应用场景更丰富。
在一些实施例中，待渲染区域包括可视区域和缓冲区域，缓冲区域与可视区域相互独立；基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据，包括：基于可视区域的高度和预估高度计算可视区域所需渲染的元素数目，得到可视区域的渲染数据和所需渲染的元素的位置的索引信息；基于预设的缓存值和预估高度得到缓冲区域的列表项数目；基于可视区域的渲染数据、所需渲染的元素的位置的索引信息和缓冲区域的列表项数目，得到当前页面的真实渲染数据。
在该是实施例中，初次加载结构化数组时，由于对每项的列表项的高度未知，可以采用列表项预估高度加载法，可自定义设置每个列表项的高度默认值。
在该实施例中，可以根据可视区域高度和列表项预估高度计算出可视区域需要渲染的元素个数，例如，通过如下关系式获取可视区域需要渲染的元素数目visibleCount：
visibleCount＝Math.ceil(screenHeight/itemHeight)，
其中，itemHeight表示列表项预估高度，screenHeight表示可视区域高度。
在该是实施例中，列表渲染区域是可以大于等于可视区，设置缓冲区域时可以根据用户需求设置合适的缓存值。在可视区外设置缓冲区，额外渲染合适的列表项。
在该实施例中，通过如下关系式获取缓冲区域的列表项数量cacheCount：
cacheCount＝Math.ceil(cacheHeight/itemHeight)；
其中，cacheHeight为缓冲区域高度。
在该实施例中，计算初次加载需要渲染的数据起始索引和结束索引，可通过下式获取初次加载数据的结束索引：
endIndex＝startIndex+visibleCount+cacheCount；
其中，startIndex＝0初次加载起始数据索引为0，也就是列表第一项；计算当前渲染区域的数据renderData，即页面真实渲染的数据。
需要说明的是，初次加载时，默认只展开层级为0和1的，即根节点和下一级节点。得到listData列表。
通过下式计算需要渲染的数据：
renderData＝listData.slice(startIndex,endIndex)。
图4是本发明提供的结构化数组中待渲染区域的结构示意图之二，在图4所示的实施例中，可视区域的第一个列表项(如列表3)和最后一个列表项(如列表12)分别对应一个起始索引和结束索引，渲染区域包括缓冲区域(列表10、列表1和列表13、列表14)和可视区域(列表3-列表12对应区域)。
本发明实施例提供的基于虚拟树的动态树形结构渲染方法，通过可视区域的高度和预估高度得到可视区域的渲染数据和所需渲染的元素的位置的索引信息，再根据预设的缓存值和预估高度得到缓冲区域的列表项数目，最后根据可视区域的渲染数据、所需渲染的元素的位置的索引信息和缓冲区域的列表项数目，得到当前页面的真实渲染数据，在滚动幅度小且未超过缓冲区域时，可以减少计算渲染数据的计算频次，而在滚动过快时，会先显示缓存区中的元素，减少白屏出现的情况，提高树结构数据的展示效率。
在一些实施例中，在得到结构化数组之后，该方法还包括：对结构化数组进行是否具有节点层级、是否展开和是否可视化的筛选，并在结构化数组具备节点层级、结构化数组可以展开和结构化数组可视的情况下，确定结构化数组为有效数组。
在该实施例中，在获取结构化数组之后，可以同时添加level、expand和visible属性，分别代表节点层级、是否展开、是否可视，结构化数组进行筛选，以快速获取有效的结构化数组。
在该实施例中，虚拟树展开或收起时，还可以通过修改expand、visible属性的值，并动态计算listData列表数据，即计算可滚动区域。
在该实施例中，每次展开和收起树节点，都需要遍历原始列表数据，以判断当前节点是否收起和是否可视，如果当前节点收起，则该列表数据就不在计算范围内，根据节点的显示情况判断这个节点是否要进行绘制，在这个过程中，还要计算当前树的总高度和更新节点缓存。
本发明实施例提供的基于虚拟树的动态树形结构渲染方法，通过对结构化数组进行是否具有节点层级、是否展开和是否可视化的筛选，能够快速确定有效的结构化数组，进而减少渲染数据量过大时导致页面卡顿现象。
在一些实施例中，结构化数组包括多个列表项，基于节点信息动态更新预估高度，得到结构化数组的位置更新信息，包括：将每个列表项的预估高度更新为实际高度并存入缓存数组，缓存数组用于在页面渲染后存储每个列表项的高度数据和位置信息。
在该实施例中，在实现页面树渲染后，可以添加一个获取列表项高度的方法，并通过传入Index返回对应列表项的高度，将列表项预估高度更新为实际高度并存入缓存数组。
在该实施例中，定义一个缓存数组itemCache，用于列表项渲染后存储每一项的高度以及位置信息。
图5是本发明提供的缓存数组的结构示意图，在图5所示的实施例中，一个itemCache包括若干个缓存项，其中，每个缓存项对应一个当前项的索引Index、当前项高度height和当前项顶部到列表顶部的距离top等信息，例如，Index＝10，top＝45，height＝5；Index＝11，top＝50，height＝10；每一次渲染完成后，对itemCache节点进行更新，将预估高度更新为实际高度，使得列表位置信息更精确。
本发明实施例提供的基于虚拟树的动态树形结构渲染方法，通过将每个列表项的预估高度更新为实际高度并存入缓存数组，提高获取的列表位置信息的准确性。
在一些实施例中，在基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据之后，该方法还包括：基于当前页面的真实渲染数据确定目标滚动条；获取目标滚动条当前位置的数据索引；计算数据索引对应的数据在结构化数组中的偏移位置，并将偏移位置设置在结构化数组。
在该实施例中，可以设置滚动条对结构化数组进行树渲染，当用户改变列表的滚动条的当前滚动值的时候，会造成可视区域的内容的变更。
在该实施例中，可以根据列表项预估高度计算出列表总高度listHeight，计算公式如下：
listHeight＝listData.length*itemHeight；
其中，listData.length为列表数据长度，通过前端组件监控滚动事件，实现回调函数。
在该实施例中，由于itemCache是有序的，可以使用二分查找法，通过scrollTop(滚动条当前位置)在滚动条的位置，计算itemCache缓存数组中对应位置的数据索引，即滚动后的startIndex。
在该实施例中，通过下式计算滚动条滚动后的结束索引：
endHeight＝scrollTop+screenHeight+cacheHeight；
其中，endHeight为结束的位置，cacheHeight为缓冲区域高度，可视区域高度。
图6是本发明提供的滚动渲染前后的数据偏移的界面示意图，在图6所示的实施例中，可以使用二分查找法，在itemCache缓存数组中找到endHeight对应位置的数据索引，即滚动后的endIndex；再计算startIndex对应的数据在整个列表中的偏移位置startOffset，并设置到列表上。
本发明实施例提供的基于虚拟树的动态树形结构渲染方法，通过确定目标滚动条，并获取目标滚动条当前位置的数据索引来计算数据索引对应的数据在结构化数组中的偏移位置，最后将偏移位置设置在结构化数组，以实现对结构化数组的动态渲染和树形结构的动态展示。
在一些实施例中，计算数据索引对应的数据在结构化数组中的偏移位置，包括：应用如下公式确定偏移位置：
偏移量＝itemCache[startIndex].top-itemCache[oldStartIndex].top；其中，itemCache[startIndex].top为当前起始数据的top值，itemCache[oldStartIndex].top为滚动前起始数据的top值，startIndex为当前位置的数据索引，oldStartIndex为滚动前的位置的数据索引，itemCache[]为缓存数组。
在该实施例中，当用户滚动改变可视区域的数据时，需要计算偏移量startOffset的值，以保证新的数据会出现在用户页面的视口中，否则，本应该渲染在可视区域内的元素会渲染到可视区域之外。
在图6所示的实施例中，偏移量startOffset的值就是元素6的上边框(可视区域内最上面一个元素)到元素1的上边框的偏移量。
在该实施例中，偏移量等于当前起始数据的top值减去滚动前起始数据的top值。
本发明实施例提供的基于虚拟树的动态树形结构渲染方法，通过提供滚动后的数据在虚拟树中的偏移量的计算方法，以保证滚动后的数据会出现在用户页面的可视区域中，以保证树渲染过程正常展示。
下面对本发明提供的基于虚拟树的动态树形结构渲染装置进行描述，下文描述的基于虚拟树的动态树形结构渲染装置与上文描述的基于虚拟树的动态树形结构渲染方法可相互对应参照。
图7是本发明提供的基于虚拟树的动态树形结构渲染装置的结构示意图，如图7所示，该基于虚拟树的动态树形结构渲染装置包括：获取模块710、数据预处理模块720、计算模块730和渲染模块740
本发明还提供一种基于虚拟树的动态树形结构渲染装置，包括：
获取模块，用于获取树结构数据；
数据预处理模块，用于对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；
计算模块，用于基于结构化数组的预估高度、基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据，预设的缓存值用于设置待渲染区域的缓冲区域；
渲染和更新模块，用于基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。
本发明实施例提供的基于虚拟树的动态树形结构渲染装置，通过获取树结构数据，对树结构数据进行深度优先遍历处理，得到结构化数组基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据根据获取的真实渲染数据，并基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，能够对当前页面中的虚拟树结构数组的动态渲染，运用预估高度和更新缓存位置信息方法摆脱了固定高度的束缚，实现了列表项高度的动态更新，使得应用场景更丰富。
图8示例了一种电子设备的实体结构示意图，如图8所示，该电子设备可以包括：处理器(processor)810、通信接口(Communications Interface)820、存储器(memory)830和通信总线840，其中，处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信。处理器810可以调用存储器830中的逻辑指令，以执行基于虚拟树的动态树形结构渲染方法，该方法包括：获取树结构数据；对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；基于结构化数组的预估高度、基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据，预设的缓存值用于设置待渲染区域的缓冲区域；基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。
此外，上述的存储器830中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，所述计算机程序被处理器执行时，计算机能够执行上述各方法所提供的基于虚拟树的动态树形结构渲染方法，该方法包括：获取树结构数据；对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；基于结构化数组的预估高度、基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据，预设的缓存值用于设置待渲染区域的缓冲区域；基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。
又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的基于虚拟树的动态树形结构渲染方法，该方法包括：获取树结构数据；对树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；基于结构化数组的预估高度、基于结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到当前页面的真实渲染数据，预设的缓存值用于设置待渲染区域的缓冲区域；基于真实渲染数据对当前页面进行树渲染，得到动态树形结构的节点信息，并基于节点信息动态更新预估高度，得到结构化数组的位置更新信息。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种基于虚拟树的动态树形结构渲染方法，其特征在于，包括：
获取树结构数据；
对所述树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；
基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，所述预设的缓存值用于设置待渲染区域的缓冲区域；
基于所述真实渲染数据对所述当前页面进行树渲染，得到动态树形结构的节点信息，并基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息。
2.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述待渲染区域包括可视区域和缓冲区域，所述缓冲区域与所述可视区域相互独立；
所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，包括：
基于所述可视区域的高度和所述预估高度计算所述可视区域所需渲染的元素数目，得到所述可视区域的渲染数据和所需渲染的元素的位置的索引信息；
基于所述预设的缓存值和所述预估高度得到所述缓冲区域的列表项数目；
基于所述可视区域的渲染数据、所需渲染的元素的位置的索引信息和所述缓冲区域的列表项数目，得到所述当前页面的真实渲染数据。
3.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述得到结构化数组之后，所述方法还包括：
对所述结构化数组进行是否具有节点层级、是否展开和是否可视化的筛选，并在所述结构化数组具备节点层级、所述结构化数组可以展开和所述结构化数组可视的情况下，确定所述结构化数组为有效数组。
4.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述结构化数组包括多个列表项，所述基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息，包括：
将每个列表项的预估高度更新为实际高度并存入缓存数组，所述缓存数组用于在页面渲染后存储每个列表项的高度数据和位置信息。
5.根据权利要求1所述的基于虚拟树的动态树形结构渲染方法，其特征在于，在所述基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据之后，所述方法还包括：
基于所述当前页面的真实渲染数据确定目标滚动条；
获取所述目标滚动条当前位置的数据索引；
计算所述数据索引对应的数据在所述结构化数组中的偏移位置，并将所述偏移位置设置在所述结构化数组。
6.根据权利要求5所述的基于虚拟树的动态树形结构渲染方法，其特征在于，所述计算所述数据索引对应的数据在所述结构化数组中的偏移位置，包括：
应用如下公式确定所述偏移位置：
偏移量＝itemCache[startIndex].top-itemCache[oldStartIndex].top；
其中，itemCache[startIndex].top为当前起始数据的top值，itemCache[oldStartIndex].top为滚动前起始数据的top值，startIndex为所述当前位置的数据索引，oldStartIndex为滚动前的位置的数据索引，itemCache[]为缓存数组。
7.一种基于虚拟树的动态树形结构渲染装置，其特征在于，包括：
获取模块，用于获取树结构数据；
数据预处理模块，用于对所述树结构数据同步进行深度优先遍历处理和标准化处理，得到结构化数组；
计算模块，用于基于所述结构化数组的预估高度、当前页面中待渲染区域的高度信息和预设的缓存值得到所述当前页面的真实渲染数据，所述预设的缓存值用于设置待渲染区域的缓冲区域；
渲染和更新模块，用于基于所述真实渲染数据对所述当前页面进行树渲染，得到动态树形结构的节点信息，并基于所述节点信息动态更新所述预估高度，得到所述结构化数组的位置更新信息。
8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述基于虚拟树的动态树形结构渲染方法。
9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述基于虚拟树的动态树形结构渲染方法。
10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述基于虚拟树的动态树形结构渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310628377.0A CN116955863A (zh) | 2023-05-30 | 2023-05-30 | 基于虚拟树的动态树形结构渲染方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310628377.0A CN116955863A (zh) | 2023-05-30 | 2023-05-30 | 基于虚拟树的动态树形结构渲染方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116955863A true CN116955863A (zh) | 2023-10-27 |
Family
ID=88441754
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310628377.0A Pending CN116955863A (zh) | 2023-05-30 | 2023-05-30 | 基于虚拟树的动态树形结构渲染方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116955863A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117519891A (zh) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
| CN117648153A (zh) * | 2024-01-29 | 2024-03-05 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
-
2023
- 2023-05-30 CN CN202310628377.0A patent/CN116955863A/zh active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117519891A (zh) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
| CN117519891B (zh) * | 2024-01-08 | 2024-04-30 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
| CN117648153A (zh) * | 2024-01-29 | 2024-03-05 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
| CN117648153B (zh) * | 2024-01-29 | 2024-04-26 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN116955863A (zh) | 基于虚拟树的动态树形结构渲染方法及装置 | |
| US9390077B2 (en) | Document division method and system | |
| CN109508420B (zh) | 一种知识图谱属性的清洗方法及装置 | |
| CN102884526B (zh) | 在应用窗口中显示项目 | |
| CN109783757B (zh) | 渲染网页的方法及装置、系统、存储介质、电子装置 | |
| CN112506509B (zh) | 一种实现树形控件支持大数据渲染的方法及相关装置 | |
| CN113642292B (zh) | 一种树形列表的实现方法、系统、设备及存储介质 | |
| CN104572668B (zh) | 基于多个样式文件生成合并样式文件的方法和设备 | |
| CN106095917B (zh) | 一种书签保存、展示方法、装置及浏览器 | |
| CN107992589B (zh) | 一种svg地图数据的加载方法、装置及系统 | |
| CN111931097A (zh) | 信息展示方法、装置、电子设备以及存储介质 | |
| CN114579912A (zh) | 页面布局方法、装置、设备及介质 | |
| CN115546809A (zh) | 基于单元格约束的表格结构识别方法及其应用 | |
| CN111652144A (zh) | 基于目标区域融合的题目分割方法、装置、设备和介质 | |
| CN116841536B (zh) | 一种组件引用关系重构方法、装置、系统及存储介质 | |
| CN111539186A (zh) | 一种应用于html5的大数据树组件实现方法及系统 | |
| CN115186738B (zh) | 模型训练方法、装置和存储介质 | |
| US20230368445A1 (en) | Layout-aware text rendering and effects execution | |
| CN113095058B (zh) | 一种流式文档翻页处理方法、装置、电子设备及存储介质 | |
| CN107038176B (zh) | 网络图页面渲染方法、装置及设备 | |
| WO2007035615A1 (en) | Positioning screen elements | |
| CN114356327A (zh) | React可视区域渲染方法及设备 | |
| CN107636650A (zh) | 符合基于渲染评估的条件的文档呈现 | |
| CN110515618A (zh) | 页面信息录入优化方法、设备、存储介质及装置 | |
| CN111291055B (zh) | 数据存储方法及装置、数据处理方法及装置、电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |