CN112506509B - 一种实现树形控件支持大数据渲染的方法及相关装置 - Google Patents
一种实现树形控件支持大数据渲染的方法及相关装置 Download PDFInfo
- Publication number
- CN112506509B CN112506509B CN202011453156.7A CN202011453156A CN112506509B CN 112506509 B CN112506509 B CN 112506509B CN 202011453156 A CN202011453156 A CN 202011453156A CN 112506509 B CN112506509 B CN 112506509B
- Authority
- CN
- China
- Prior art keywords
- node
- height
- list
- big data
- virtual list
- 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.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 54
- 238000000034 method Methods 0.000 title claims abstract description 42
- 230000001960 triggered effect Effects 0.000 claims abstract description 10
- 238000004590 computer program Methods 0.000 claims description 10
- 238000005096 rolling process Methods 0.000 claims description 8
- 238000004088 simulation Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 4
- 230000015556 catabolic process Effects 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
-
- 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
本申请公开了一种实现树形控件支持大数据渲染的方法，包括为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。该方法能够使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况。本申请还公开了一种实现树形控件支持大数据渲染的装置、设备及计算机可读存储介质，均具有上述技术效果。
Description
技术领域
本申请涉及树形控件技术领域，特别涉及一种实现树形控件支持大数据渲染的方法；还涉及一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质。
背景技术
在前端行业中，目前iView、Element-UI是主流的UI框架，其树形控件在渲染上万条数据时，页面通常会发生崩溃而无法使用。虽然，目前jQuery的zTree树插件在渲染上万条数据时不会发生页面崩溃，但是却存在页面卡顿的缺陷，导致用户体验不佳。另外，尽管在真实业务场景中，可以通过搜索的方式仅显示部分节点，但是也会存在某个或某些父节点下的子节点数量非常多的情况，由此仍需渲染大量数据，同样会发生页面崩溃或页面卡顿的情况。有鉴于此，如何使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况已成为本领域技术人员亟待解决的技术问题。
发明内容
本申请的目的是提供一种实现树形控件支持大数据渲染的方法，能够使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况。本申请的另一个目的是提供一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质，均具有上述技术效果。
为解决上述技术问题，本申请提供了一种实现树形控件支持大数据渲染的方法，包括：
为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；
通过所述空容器模拟列表的滚动操作；
当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
可选的，所述在所述虚拟列表展示所述节点包括：
根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。
可选的，所述根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点包括：
计算滚动距离与节点行高的比值，得到要渲染的起始节点；
计算所述起始节点与所述固定高度的和值，得到要渲染的终止节点；所述起始节点与所述终止节点之间的节点为所述虚拟列表要渲染的节点。
可选的，添加节点的点击事件的方式为将点击事件委托于所述虚拟列表。
可选的，还包括：
通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。
为解决上述技术问题，本申请还提供了一种实现树形控件支持大数据渲染的装置，包括：
设置模块，用于为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；
模拟模块，用于通过所述空容器模拟列表的滚动操作；
展示模块，用于当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
可选的，所述展示模块具体用于根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。
可选的，还包括：
记录模块，用于通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。
为解决上述技术方案，本申请还提供了一种实现树形控件支持大数据渲染的设备，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如上任一项所述的实现树形控件支持大数据渲染的方法的步骤。
为解决上述技术问题，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的实现树形控件支持大数据渲染的方法的步骤。
本申请所提供的实现树形控件支持大数据渲染的方法，包括：为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
可见，本申请所提供的实现树形控件支持大数据渲染的方法，设置并通过空容器模拟列表的滚动操作，通过虚拟列表展示固定高度的节点，虚拟列表中所展示的节点的内容随着滚动操作发生变化，但树形控件只需渲染与所设置的固定高度对应的固定数量的节点，可以极大的减少DOM渲染。此外，本申请所提供的实现树形控件支持大数据渲染的方法中，各节点在DOM层均属于同一层级，较之传统的层级嵌套方式，该方法可以有效规避层级嵌套过深而加大复杂度，从而提升页面性能。由此，通过减少DOM渲染以及提升页面性能，能够使树形控件支持万级数据渲染，且不发生页面卡顿、崩溃的情况。
本申请所提供的实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质，均具有上述技术效果。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对现有技术和实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例所提供的一种实现树形控件支持大数据渲染的方法的流程示意图；
图2为本申请实施例所提供的一种容器视觉层结构示意图；
图3为本申请实施例所提供的一种DOM结构示意图；
图4为本申请实施例所提供的一种数结构示意图；
图5为本申请实施例所提供的一种实现树形控件支持大数据渲染的装置的示意图；
图6为本申请实施例所提供的一种实现树形控件支持大数据渲染的设备的示意图。
具体实施方式
本申请的核心是提供一种实现树形控件支持大数据渲染的方法，能够使树形控件支持大数据渲染，且不发生页面卡顿、崩溃的情况。本申请的另一个核心是提供一种实现树形控件支持大数据渲染的装置、设备以及计算机可读存储介质，均具有上述技术效果。
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
请参考图1，图1为本申请实施例所提供的一种实现树形控件支持大数据渲染的方法的流程示意图，参考图1所示，该方法包括：
S101：为根节点设置固定高度，并在根节点添加空容器与虚拟列表；空容器的高度与真实列表的高度一致；虚拟列表的高度与所设置的固定高度一致；
具体的，本申请为根节点设置固定高度，设置overflow属性值为auto。根节点框定可视区域范围，当根节点内的内容超出设置的固定高度时，会出现滚动条。根节点绑定滚动事件，当鼠标滚动时会触发滚动事件。
此外，本申请在根节点添加两个容器，即空容器与虚拟列表。在计算得到真实列表的高度的基础上，将真实列表的高度赋值给空容器，使空容器的高度与真实列表的高度一致。虚拟列表的高度与根节点的高度一致，即为所设置的固定高度。
参考图2所示，图2中最外层边框表示根节点，中间层边框表示空容器，最内层边框表示虚拟列表。
对于固定高度的具体值，本申请不做唯一限定，可以根据应用需要进行差异性设置。
S102：通过空容器模拟列表的滚动操作；
具体的，在将真实列表的高度赋值给空容器的基础上，通过空容器模拟列表的滚动操作。空容器在可视区域即根节点的滚动与真实列表在可视区域的滚动表现一致。
S103：根据滚动事件及固定高度生成虚拟列表要渲染的节点，并在虚拟列表展示节点；其中，各节点在DOM层均属于同一层级。
具体的，虚拟列表通过绝对定位定在与根节点同样的位置，始终保持在可视区域。虚拟列表的高度为根节点的高度，虚拟列表所展示的始终是固定高度的节点，只是节点的内容随着滚动事件的触发而发生变化。当发生滚动事件后，根据滚动事件即固定高度生成虚拟列表中要渲染的节点并在虚拟列表中进行展示。其中，无论是当前在虚拟列表中展示的节点还是当前未在虚拟列表中展示的节点，各节点在DOM层均属于同一层级，而非层级嵌套，由此可以规避层级嵌套过深而加大复杂度，从而提升页面性能。
例如，参考图3所示，节点parent1、parent1-1、leaf1-1-1、leaf1-1-2等均属于同一层级，节点parent1-1并非嵌套于节点parent1，节点leaf1-1-1及节点leaf1-1-2并非嵌套于节点parent1-1。
其中，在一种具体的实施方式中，上述根据滚动事件即固定高度生成虚拟列表要渲染的节点包括：计算滚动距离与节点行高的比值，得到要渲染的起始节点；计算起始节点与固定高度的和值，得到要渲染的终止节点；起始节点与终止节点之间的节点为虚拟列表要渲染的节点。
具体而言，首先根据滚动距离计算得到要渲染的节点的起始位置。
起始节点的索引为startIndex，startIndex＝scrollTop/itemHeight；scrollTop表示滚动距离，itemHeight表示节点行高。
终止节点的索引为endIndex，endIndex＝startIndex+count；count表示可视区域可渲染的节点数，即所设置的固定高度。
根据起始节点与终止节点的索引找到要渲染的节点进行渲染，在虚拟列表展示。在监听滚动事件的过程中重复上述确定虚拟列表要渲染的节点的操作。
另外，在上述实施例的基础上，在虚拟列表展示节点包括：
根据一维数组中记录的节点位于树的深度，采用树形CSS样式在虚拟列表展示节点。
具体而言，本实施例中，数据结构采用扁平化的一维数组，并在一维数组中添加字段记录节点位于树的深度。如此，一方面利于查找节点，另一方面，当在虚拟列表中展示固定高度的节点时，根据一维数组中记录的节点位于树的深度，采用树形CSS样式进行展示，视觉上可以达到树形结构，具有父子层级结构，但是在DOM层各节点实则属于同一层级。
例如，参考图4所示，视觉上，节点parent1与节点parent1-1及节点parent1-2具有父子层级结构，节点parent1-1与节点leaf1-1-1及节点leaf1-1-2具有父子层级结构，节点parent1-2与节点leaf1-2-1及节点leaf1-2-2具有父子层级结构。但是在DOM层，节点parent1、parent1-1、parent1-2、leaf1-1-1、leaf1-1-2、leaf1-2-1以及leaf1-2-2均属于同一层级。
对于一维数组除添加用于记录节点位于树的深度的字段外，还可以尽可能的缩短其他字段以及去除不必要的字段，以将数据大小缩减到最小，减少http的请求时间。
进一步，由于可视区域的DOM节点会被频繁的删除添加，如果将点击事件绑定在树节点上，一方面需要给所有展示出来的DOM节点绑定点击事件，另一方面在可视区域的DOM节点发生变化时，还需要去做相应的解绑和绑定操作，从而造成性能的损耗。因此，在一种具体的实施方式中，添加节点的点击事件的方式为：将点击事件委托于虚拟列表，通过HTMLElement.dataset属性获取当前所点击节点，由此进一步提升性能。
委托节点点击事件的相关代码可如下所示：
//click事件绑定在虚拟列表而非内部的树节点
<div class＝“tree-virtual-list”@click＝“handleClick”>
<div
v-for＝“item in treeData”
:key＝“item.id”
:class＝“`tree-node level-${item.level}`”
:data-id＝“item.id”
></div>
</div>
//点击事件处理
handleClick(e){
const{target}＝e；
const currentNodeId＝target.dataset.id；//currentNodeId为点击的树节点的ID}
进一步，在上述实施例的基础上，还包括：通过数组记录存在子节点的节点的点击状态，以根据点击状态渲染节点。
具体而言，对于存在子节点的节点作展开和折叠处理时，本实施例首先声明一个数组，用于保存被点击的节点在原始数据中的索引以及记录节点的点击状态。当滚动事件触发时，可以根据该数组中记录的点击状态进行渲染。当用户进行节点展开操作的时候，从点击的节点在原始数据中的索引开始往后找相应深度的数据，并且记录找到的数据中的尾索引，将这些数据添加到需要渲染的数组中。折叠同展开操作类似，在此不做赘述。当用户进行节点折叠操作时，将数据从渲染的数组中移除。由此，可以保证在可视区域中无须渲染多余的折叠的数据，减少DOM节点，提高性能。
综上所述，本申请所提供的实现树形控件支持大数据渲染的方法，设置并通过空容器模拟列表的滚动操作，通过虚拟列表展示固定高度的节点，虚拟列表中所展示的节点的内容随着滚动操作发生变化，但树形控件只需渲染与所设置的固定高度对应的固定数量的节点，可以极大的减少DOM渲染。此外，本申请所提供的实现树形控件支持大数据渲染的方法中，各节点在DOM层均属于同一层级，较之传统的层级嵌套方式，该方法可以有效规避层级嵌套过深而加大复杂度，从而提升页面性能。由此，通过减少DOM渲染以及提升页面性能，能够使树形控件支持万级数据渲染，且不发生页面卡顿、崩溃的情况。
本申请还提供了一种实现树形控件支持大数据渲染的装置，下文描述的该装置可以与上文描述的方法相互对应参照。请参考图5，图5为本申请实施例所提供的一种实现树形控件支持大数据渲染的装置的示意图，结合图5所示，该装置包括：
设置模块10，用于为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；
模拟模块20，用于通过所述空容器模拟列表的滚动操作；
展示模块30，用于当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
在上述实施例的基础上，可选的，所述展示模块30具体用于根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。
在上述实施例的基础上，可选的，所述展示模块30具体用于计算滚动距离与节点行高的比值，得到要渲染的起始节点；计算所述起始节点与所述固定高度的和值，得到要渲染的终止节点；所述起始节点与所述终止节点之间的节点为所述虚拟列表要渲染的节点。
在上式实施例的基础上，可选的，添加节点的点击事件的方式为将点击事件委托于所述虚拟列表。
在上述实施例的基础上，可选的，还包括：
记录模块，用于通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。
本申请还提供了一种实现树形控件支持大数据渲染的设备，参考图6所示，该设备包括存储器1和处理器2。
存储器1，用于存储计算机程序；
处理器2，用于执行计算机程序实现如下的步骤：
为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
对于本申请所提供的设备的介绍请参照上述方法实施例，本申请在此不做赘述。
本申请还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时可实现如下的步骤：
为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；通过所述空容器模拟列表的滚动操作；当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
该计算机可读存储介质可以包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
对于本申请所提供的计算机可读存储介质的介绍请参照上述方法实施例，本申请在此不做赘述。
说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置、设备以及计算机可读存储介质而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
以上对本申请所提供的实现树形控件支持大数据渲染的方法、装置、设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围。
Claims (10)
1.一种实现树形控件支持大数据渲染的方法，其特征在于，包括：
为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；
通过所述空容器模拟列表的滚动操作；
当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
2.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，所述在所述虚拟列表展示所述节点包括：
根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。
3.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，所述根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点包括：
计算滚动距离与节点行高的比值，得到要渲染的起始节点；
计算所述起始节点与所述固定高度的和值，得到要渲染的终止节点；所述起始节点与所述终止节点之间的节点为所述虚拟列表要渲染的节点。
4.根据权利要求1所述的实现树形控件支持大数据渲染的方法，其特征在于，添加节点的点击事件的方式为将点击事件委托于所述虚拟列表。
5.根据权利要求1至4任一项所述的实现树形控件支持大数据渲染的方法，其特征在于，还包括：
通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。
6.一种实现树形控件支持大数据渲染的装置，其特征在于，包括：
设置模块，用于为根节点设置固定高度，并在所述根节点添加空容器与虚拟列表；所述空容器的高度与真实列表的高度一致；所述虚拟列表的高度与所设置的所述固定高度一致；
模拟模块，用于通过所述空容器模拟列表的滚动操作；
展示模块，用于当滚动事件触发时，根据滚动事件及所述固定高度生成所述虚拟列表要渲染的节点，并在所述虚拟列表展示所述节点；其中，各所述节点在DOM层均属于同一层级。
7.根据权利要求6所述的实现树形控件支持大数据渲染的装置，其特征在于，所述展示模块具体用于根据一维数组中记录的所述节点位于树的深度，采用树形CSS样式在所述虚拟列表展示所述节点。
8.根据权利要求6所述的实现树形控件支持大数据渲染的装置，其特征在于，还包括：
记录模块，用于通过数组记录存在子节点的所述节点的点击状态，以根据所述点击状态渲染节点。
9.一种实现树形控件支持大数据渲染的设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1至5任一项所述的实现树形控件支持大数据渲染的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述的实现树形控件支持大数据渲染的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011453156.7A CN112506509B (zh) | 2020-12-11 | 2020-12-11 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011453156.7A CN112506509B (zh) | 2020-12-11 | 2020-12-11 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112506509A CN112506509A (zh) | 2021-03-16 |
| CN112506509B true CN112506509B (zh) | 2024-02-09 |
Family
ID=74973287
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011453156.7A Active CN112506509B (zh) | 2020-12-11 | 2020-12-11 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112506509B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113642292B (zh) * | 2021-07-14 | 2022-06-14 | 广州市玄武无线科技股份有限公司 | 一种树形列表的实现方法、系统、设备及存储介质 |
| CN114154470A (zh) * | 2021-11-09 | 2022-03-08 | 广州市玄武无线科技股份有限公司 | 一种基于动态行高的表格处理方法 |
| CN116088966A (zh) * | 2023-02-21 | 2023-05-09 | 北京力控元通科技有限公司 | 一种高性能树形控件的加载方法及系统 |
| CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
| CN116719598A (zh) * | 2023-08-11 | 2023-09-08 | 北京久其金建科技有限公司 | 树形数据虚拟滚动处理方法及装置 |
| CN116931783A (zh) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | 一种前端海量树形结构展示方法、装置、电子设备及介质 |
| CN117519891A (zh) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2019052524A1 (zh) * | 2017-09-14 | 2019-03-21 | 腾讯科技（深圳）有限公司 | 视图渲染方法、装置、介质及智能终端 |
| CN109828802A (zh) * | 2017-11-23 | 2019-05-31 | 腾讯科技（武汉）有限公司 | 列表视图显示方法、装置及可读介质 |
| CN110825382A (zh) * | 2019-10-14 | 2020-02-21 | 紫光云(南京)数字技术有限公司 | 一种前端大数据树形结构展示方法 |
| CN110874251A (zh) * | 2018-08-29 | 2020-03-10 | 北京京东尚科信息技术有限公司 | 一种实现图片木桶布局的方法和装置 |
-
2020
- 2020-12-11 CN CN202011453156.7A patent/CN112506509B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2019052524A1 (zh) * | 2017-09-14 | 2019-03-21 | 腾讯科技（深圳）有限公司 | 视图渲染方法、装置、介质及智能终端 |
| CN109828802A (zh) * | 2017-11-23 | 2019-05-31 | 腾讯科技（武汉）有限公司 | 列表视图显示方法、装置及可读介质 |
| CN110874251A (zh) * | 2018-08-29 | 2020-03-10 | 北京京东尚科信息技术有限公司 | 一种实现图片木桶布局的方法和装置 |
| CN110825382A (zh) * | 2019-10-14 | 2020-02-21 | 紫光云(南京)数字技术有限公司 | 一种前端大数据树形结构展示方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112506509A (zh) | 2021-03-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112506509B (zh) | 一种实现树形控件支持大数据渲染的方法及相关装置 | |
| US7917846B2 (en) | Web clip using anchoring | |
| US10176154B2 (en) | System and method for automated conversion of interactive sites and applications to support mobile and other display environments | |
| RU2495478C2 (ru) | Копирование эффектов анимации из исходного объекта, по меньшей мере, в один целевой объект | |
| US9043698B2 (en) | Method for users to create and edit web page layouts | |
| US7536410B2 (en) | Dynamic multi-dimensional scrolling | |
| US20130061124A1 (en) | Managing forms in electronic documents | |
| US20060174189A1 (en) | Focusing on areas of the display of tabular data through hierarchical collapsing and expanding of cell areas | |
| US20120023449A1 (en) | System and method for an interactive filter | |
| US20090138810A1 (en) | Web page editor with element selection mechanism | |
| US20080303827A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
| WO2001082279A2 (en) | System and method for dynamic space management of a display space | |
| US20210019006A1 (en) | Adaptive user interface for a multimedia creative design system | |
| CN107479871B (zh) | 一种海量的矢量数据的访问和渲染方法、电子设备及存储介质 | |
| CA2789403A1 (en) | Method and system for organizing information with a sharable user interface | |
| US20080303826A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
| CN110489682A (zh) | 一种页面加载方法和装置 | |
| CN110825382A (zh) | 一种前端大数据树形结构展示方法 | |
| US20130300763A1 (en) | Rendering Changed Portions of Composited Images | |
| US20120159376A1 (en) | Editing data records associated with static images | |
| CN111539186A (zh) | 一种应用于html5的大数据树组件实现方法及系统 | |
| CN111199005A (zh) | 网页组件处理方法及装置 | |
| CN109298819A (zh) | 选择对象的方法、装置、终端及存储介质 | |
| CN112434030B (zh) | 基于树形结构数据的高性能列表实现方法与设备 | |
| US11816320B2 (en) | Paginated growing widgets |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |