CN112748967A - 树形控件定位显示方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请涉及一种上述树形控件定位显示方法、装置、计算机设备以及存储介质，其中，方法包括：响应用户对树形控件缩略图点击操作，定位点击位置，获取树形控件的空间高度，根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域位置。整个过程中，由于树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到，其能够准确表征整个树形控件中各节点的状态，采用缩略图的方式在有限的显示空间内将整个树形控件有选项都表征出来，以支持准确定位，采用虚拟列表技术实现数据局部渲染与处理，避免出现卡顿，可以实现树形控件高效且准确定位。

Description

树形控件定位显示方法、装置、计算机设备及存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种树形控件定位显示方法、装置、计算机设备及存储介质。

背景技术

由于树形控件具有层次分明、结构清楚的特点，而且用户既能快速地浏览整树的概况，也能方便地深入查看子树的内容，选取节点数据时，既能单选，也能复选，因此，用树形控件来展现树形结构的数据在计算机领域得到了广泛的应用。

虽然树形控件具有上述优良性能，但是其在实际应用中还是存在一些缺陷和局限性。例如树形控件应用于网页中时，网页上加载有大量的树形控件，用户进行点击操作选取所需树形控件，由于树形控件中携带大量数据，其所需加载较多数据，容易造成卡顿，并且由于树形控件种类和数量较多，在有限的显示界面(版面)内无法准确定位用户选取的树形控件。

可见，在传统技术中无法高效且准确定位所需的树形控件。

发明内容

基于此，有必要针对上述技术问题，提供一种高效且准确的树形控件定位显示方法、装置、计算机设备及存储介质，以给用户带来便利。

一种树形控件定位显示方法，所述方法包括：

响应树形控件缩略图点击操作，定位点击位置；

获取树形控件的空间高度；

根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域；

通过虚拟列表技术显示所述树形控件被选取区域；

其中，所述树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

在其中一个实施例中，所述通过虚拟列表技术显示所述树形控件被选取区域包括：

获取树形控件对应的树结构数据；

对所述树结构数据平铺，得到平铺数据；

通过虚拟列表技术截取所述平铺数据中与所述树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在其中一个实施例中，所述通过虚拟列表技术截取所述平铺数据中与所述树形控件被选取区域对应的部分数据并渲染，显示渲染的数据包括：

基于虚拟列表技术截取所述平铺数据中与所述树形控件被选取区域对应的部分数据；

渲染截取的部分数据；

监听网页滚动事件，当发生网页滚动事件时，重新截取所述平铺数据中与所述树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在其中一个实施例中，所述响应树形控件缩略图点击操作，定位点击位置之前，还包括：

识别当前节点状态下树形控件中各节点对应的父节点状态为展开状态或为收起状态；

若当前节点对应父节点的节点状态均为展开状态，则调整所述当前节点的节点状态为展开状态，若否，则调整所述当前节点的节点状态为收起状态；

根据调整后的树形控件中各节点的节点状态，确定树形控件在当前节点状态下的整体数据；

渲染所述整体数据并截图，生成树形控件缩略图。

在其中一个实施例中，所述响应树形控件缩略图点击操作，定位点击位置之前，还包括：

将所述树形控件缩略图在当前显示界面的预设位置固定显示。

在其中一个实施例中，所述渲染所述整体数据并截图，生成树形控件缩略图包括：

调用网页中canvas工具对渲染后的所述整体数据截图，生成树形控件缩略图。

在其中一个实施例中，所述根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域包括：

获取所述点击位置至树形控件缩略图顶端的顶端高度；

计算所述顶端高度与树形控件缩略图高度的比值；

根据所述比值以及所述空间高度，确定当前选取的树形控件。

一种树形控件定位显示装置，所述装置包括：

响应模块，用于响应树形控件缩略图点击操作，定位点击位置；

高度获取模块，用于获取树形控件的空间高度；

定位模块，用于根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域；

显示模块，用于通过虚拟列表技术显示所述树形控件被选取区域；

其中，所述树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

一种计算机设备，其特征在于，包括至少一个处理器、至少一个存储器、以及总线；其中，所述处理器与所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行上述的方法。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述的方法的步骤。

上述树形控件定位显示方法、装置、计算机设备以及存储介质，响应用户对树形控件缩略图点击操作，定位点击位置，获取树形控件的空间高度，根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域位置。整个过程中，由于树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到，其能够准确表征整个树形控件中各节点的状态，采用缩略图的方式在有限的显示空间内将整个树形控件有选项都表征出来，以支持准确定位，采用虚拟列表技术实现数据局部渲染与处理，避免出现卡顿，可以实现树形控件高效且准确定位。

附图说明

图1为一个实施例中树形控件定位显示方法的应用环境图；

图2为一个实施例中树形控件定位显示方法的流程示意图；

图3为虚拟列表技术原理示意图；

图4为另一个实施例中树形控件定位显示方法的流程示意图；

图5为树形控件缩略图中位置关系示意图；

图6为一个实施例中树形控件定位显示装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的树形控件定位显示方法，可以应用于如图1所示的应用环境中。用户在终端上述进行操作，终端上显示有基于树形控件在当前节点状态下的整体数据进行渲染得到的树形控件缩略图，终端响应树形控件缩略图点击操作，定位点击位置；获取树形控件的空间高度；根据点击位置以及空间高度，定位树形控件被选取区域；通过虚拟列表技术显示树形控件被选取区域。其中，终端可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。

如图2所示，一种树形控件定位显示方法，方法包括：

S200：响应树形控件缩略图点击操作，定位点击位置，其中，树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

终端将通过对树形控件在当前节点状态下的整体数据进行渲染得到的树形控件缩略图显示在当前显示界面上，用户点击该缩略图，终端响应本次缩略图点击操作，并且定位用户点击位置。具体来说，用户可以是操作鼠标光标点击显示缩略图，也可以是用户直接用手指点击缩略图(需终端支持触控显示功能)，定位用户点击的位置，用户点击的位置表征着用户选取的树形控件区域，即本次树形控件定位显示的目标区域。

S400：获取树形控件的空间高度。

若网页中不存在与树形控件对应的滚动条，则树形控件的空间高度是指树形控件在网页中占据的空间的高度；若网页中存在与树形控件对应的滚动条，则空间高度包括树形控件在网页中占据的空间的高度与滚动条滚动距离。

S600：根据点击位置以及空间高度，定位树形控件被选取区域。

由于缩略图是树形控件整体缩小形成的图片，因此，点击位置与用户真实选取树形控件位置区域是对应的，根据在缩略图中的点击位置与整个树形控件的空间高度，可以准确定位用户选取的树形控件区域。

S800：通过虚拟列表技术显示树形控件被选取区域。

虚拟列表是按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。虚拟列表具体可以参见图3所示，虚拟列表在实现其功能过程包括以下步骤：计算当前可见区域起始数据的startIndex；计算当前可见区域结束数据的endIndex；计算当前可见区域的数据，并渲染到页面中；计算startIndex对应的数据在整个列表中的偏移位置startOffset，并设置到列表上；计算endIndex对应的数据相对于可滚动区域最底部的偏移位置endOffset，并设置到列表上。采用虚拟列表技术的方式按需显示，可以显著减少当前所需加载的数据量，避免出现卡顿。

上述树形控件定位显示方法，响应用户对树形控件缩略图点击操作，定位点击位置，获取树形控件的空间高度，根据点击位置以及空间高度，定位树形控件被选取区域位置。整个过程中，由于树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到，其能够准确表征整个树形控件中各节点的状态，采用缩略图的方式在有限的显示空间内将整个树形控件有选项都表征出来，以支持准确定位，采用虚拟列表技术实现数据局部渲染与处理，避免出现卡顿，可以实现树形控件高效且准确定位。

如图4所示，在其中一个实施例中，步骤S800包括：

S820：获取树形控件对应的树结构数据。

S840：对树结构数据平铺，得到平铺数据。

S860：通过虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

将树形控件数据平铺是指将树形控件数据按照树形控件结构平铺开来，得到平铺数据。树形控件数据可以由外部导入至终端中，也可以是终端预先存储，当前加载的数据，例如在某个本地网页中，用户打开本地网页，终端加载预先存储的树形控件数据，树形控件可以加载在网页界面上显示；或在某个互联网网页中，用户打开互联网网页，终端从互联网远端服务器获取网页相关数据，互联网远端服务器将包括树形控件数据在内的数据发送至终端，终端接收这部分数据，并且对其中的树形控件数据平铺，得到平铺数据。基于虚拟列表技术对截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据，显著减少当前所需加载的数据量，避免出现卡顿。

在其中一个实施例中，通过虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据包括：

基于虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据；渲染截取的部分数据；监听网页滚动事件，当发生网页滚动事件时，重新截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

具体来说，在树形控件平铺数据中选取与树形控件被选取区域对应的部分数据进行渲染，得到渲染后的树形控件数据，选取的部分数据是与当前网页滚动操作关联，即与当前用户选取树形控件区域对应的，当发生网页滚动时，重新选取与当前用户选取树形控件区域对应的部分数据进行渲染，得到新的渲染后的树形控件数据。例如，与当前网页显示内容为关联树形控件中的1号部分的平铺数据，则当前选取1号部分的平铺数据进行渲染，得到渲染后的树形控件数据，当发生网页滚动事件时，侦测到与当前网页显示内容关联树形控件中的4号部分的平铺数据，将选取4号部分的平铺数据进行渲染，得到渲染后的树形控件数据。

在其中一个实施例中，响应树形控件缩略图点击操作，定位点击位置之前，还包括：

识别当前节点状态下树形控件中各节点对应的父节点状态为展开状态或为收起状态；若当前节点对应父节点的节点状态均为展开状态，则调整当前节点的节点状态为展开状态，若否，则调整当前节点的节点状态为收起状态；根据调整后的树形控件中各节点的节点状态，确定树形控件在当前节点状态下的整体数据；渲染整体数据并截图，生成树形控件缩略图。

遍历当前节点状态树形控件数据中各节点对应父节点，识别各父节点的节点状态为展开状态或为收起状态；若当前节点对应父节点的节点状态均为展开状态，则调整当前树节点的节点状态为展开状态，若否，则调整当前树节点的节点状态为收起状态。具体来说，在树形控件中每个节点都有对应的父节点，若某个父节点对应的所有父节点的节点状态均为展开(显示)状态，则该节点的节点状态为展开，否则，为隐藏。例如树形控件中X节点有对应1-5号父节点，其中1号父节点展示、2号父节点展示、3号父节点收起、4号父节点展示以及5号父节点展示，则X节点的节点状态优化为收起；若1号父节点展示、2号父节点展示、3号父节点展示、4号父节点展示以及5号父节点展示，则X节点的节点状态优化为展开。

在其中一个实施例中，响应树形控件缩略图点击操作，定位点击位置之前，还包括：将树形控件缩略图在当前显示界面的预设位置固定显示。

可以将缩略图固定在当前显示界面的右上角显示、左上角显示、右下角显示或在左下角显示。将缩略图固定显示可以便于用户点击缩略图，以给用户带来便捷。

在其中一个实施例中，渲染整体数据并截图，生成树形控件缩略图包括：调用网页中canvas工具对渲染后的整体数据截图，生成树形控件缩略图。

对渲染后的整体数据截图，截图具体可以借助截图工具，将截图得到图片进行缩略处理得到树形控件缩略图。简单来说，通过截图工具截取当前树形控件，得到截图，直接对该截图进行缩略处理，得到缩略图，缩略图可以按照预设规则设定为固定大小，例如设定为10厘米*10厘米大小的图片，得到树形控件缩略图。进一步来说，可以调用网页中canvas工具对优化后的树形控件的截图，获取截图的缩略图。非必要的，在生成树形控件缩略图之后，还可以将该缩略图固定显示在当前终端的显示界面上，这样无论网页怎么滚动，该缩略图都保持在这个位置显示，比方便后续用户点击，支持实现高效且准确树形控件定位显示。

如图4所示，在其中一个实施例中，步骤S600：

S620：获取点击位置至树形控件缩略图顶端的顶端高度。

S660：计算顶端高度与树形控件缩略图高度的比值。

S680：根据比值以及空间高度，确定当前选取的树形控件。

具体可以参见图5，如图5所示，点击位置为标注3的位置，树形控件缩略图顶端为标注2的位置，顶端高度是指点击位置3至树形控件缩略图顶端2的距离。树形控件缩略图高度是指缩略图底端1至树形控件缩略图顶端2的距离。由于缩略图是基于树形控件完整截图缩略生成的，因此，其存在以下等比关系：32之间的距离/缩略图截图图标高度＝滚动距离/树形控件的空间高度。这里是一个正比例的关系，已知32之间的距离、缩略图截图图标高度以及树形控件的空间高度，即可求解出当前用户所需波动滚动条的滚动距离，即定位目标树形控件，实现树形空间的准确定位。

应该理解的是，虽然图2与图4的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2与图4中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

如图6所示，本申请还提供一种树形控件定位显示装置，装置包括：

响应模块200，用于响应树形控件缩略图点击操作，定位点击位置；

高度获取模块400，用于获取树形控件的空间高度；

定位模块600，用于根据点击位置以及空间高度，定位树形控件被选取区域；

显示模块800，用于通过虚拟列表技术显示树形控件被选取区域；

其中，树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

上述树形控件定位显示装置，响应用户对树形控件缩略图点击操作，定位点击位置，获取树形控件的空间高度，根据点击位置以及空间高度，定位树形控件被选取区域位置。整个过程中，由于树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到，其能够准确表征整个树形控件中各节点的状态，采用缩略图的方式在有限的显示空间内将整个树形控件有选项都表征出来，以支持准确定位，采用虚拟列表技术实现数据局部渲染与处理，避免出现卡顿，可以实现树形控件高效且准确定位。

在其中一个实施例中，显示模块800还用于获取树形控件对应的树结构数据；对树结构数据平铺，得到平铺数据；通过虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在其中一个实施例中，显示模块800还用于基于虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据；渲染截取的部分数据；监听网页滚动事件，当发生网页滚动事件时，重新截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在其中一个实施例中，上述树形控件定位显示装置还包括缩略图生成模块，用于识别当前节点状态下树形控件中各节点对应的父节点状态为展开状态或为收起状态；若当前节点对应父节点的节点状态均为展开状态，则调整当前节点的节点状态为展开状态，若否，则调整当前节点的节点状态为收起状态；根据调整后的树形控件中各节点的节点状态，确定树形控件在当前节点状态下的整体数据；渲染整体数据并截图，生成树形控件缩略图。

在其中一个实施例中，上述树形控件定位显示装置还包括固定显示模块，用于将树形控件缩略图在当前显示界面的预设位置固定显示。

在其中一个实施例中，缩略图生成模块还用于调用网页中canvas工具对渲染后的整体数据截图，生成树形控件缩略图。

在其中一个实施例中，定位模块600还用于获取点击位置至树形控件缩略图顶端的顶端高度；计算顶端高度与树形控件缩略图高度的比值；根据比值以及空间高度，确定当前选取的树形控件。

关于树形控件定位显示装置的具体限定可以参见上文中对于树形控件定位显示方法的限定，在此不再赘述。上述树形控件定位显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储树形控件缩略图以及预存树形控件等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种树形控件定位显示方法。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

响应树形控件缩略图点击操作，定位点击位置；

获取树形控件的空间高度；

根据点击位置以及空间高度，定位树形控件被选取区域；

通过虚拟列表技术显示树形控件被选取区域；

其中，树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取树形控件对应的树结构数据；对树结构数据平铺，得到平铺数据；

通过虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

基于虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据；渲染截取的部分数据；监听网页滚动事件，当发生网页滚动事件时，重新截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

识别当前节点状态下树形控件中各节点对应的父节点状态为展开状态或为收起状态；若当前节点对应父节点的节点状态均为展开状态，则调整当前节点的节点状态为展开状态，若否，则调整当前节点的节点状态为收起状态；根据调整后的树形控件中各节点的节点状态，确定树形控件在当前节点状态下的整体数据；渲染整体数据并截图，生成树形控件缩略图。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将树形控件缩略图在当前显示界面的预设位置固定显示。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

调用网页中canvas工具对渲染后的整体数据截图，生成树形控件缩略图。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取点击位置至树形控件缩略图顶端的顶端高度；计算顶端高度与树形控件缩略图高度的比值；根据比值以及空间高度，确定当前选取的树形控件。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

响应树形控件缩略图点击操作，定位点击位置；

获取树形控件的空间高度；

根据点击位置以及空间高度，定位树形控件被选取区域；

通过虚拟列表技术显示树形控件被选取区域；

其中，树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取树形控件对应的树结构数据；对树结构数据平铺，得到平铺数据；

通过虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

基于虚拟列表技术截取平铺数据中与树形控件被选取区域对应的部分数据；渲染截取的部分数据；监听网页滚动事件，当发生网页滚动事件时，重新截取平铺数据中与树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

识别当前节点状态下树形控件中各节点对应的父节点状态为展开状态或为收起状态；若当前节点对应父节点的节点状态均为展开状态，则调整当前节点的节点状态为展开状态，若否，则调整当前节点的节点状态为收起状态；根据调整后的树形控件中各节点的节点状态，确定树形控件在当前节点状态下的整体数据；渲染整体数据并截图，生成树形控件缩略图。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将树形控件缩略图在当前显示界面的预设位置固定显示。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

调用网页中canvas工具对渲染后的整体数据截图，生成树形控件缩略图。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取点击位置至树形控件缩略图顶端的顶端高度；计算顶端高度与树形控件缩略图高度的比值；根据比值以及空间高度，确定当前选取的树形控件。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种树形控件定位显示方法，所述方法包括：

响应树形控件缩略图点击操作，定位点击位置；

获取树形控件的空间高度；

根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域；

通过虚拟列表技术显示所述树形控件被选取区域；

其中，所述树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

2.根据权利要求1所述的方法，所述通过虚拟列表技术显示所述树形控件被选取区域包括：

获取树形控件对应的树结构数据；

对所述树结构数据平铺，得到平铺数据；

通过虚拟列表技术截取所述平铺数据中与所述树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

3.根据权利要求2所述的方法，其特征在于，所述通过虚拟列表技术截取所述平铺数据中与所述树形控件被选取区域对应的部分数据并渲染，显示渲染的数据包括：

基于虚拟列表技术截取所述平铺数据中与所述树形控件被选取区域对应的部分数据；

渲染截取的部分数据；

监听网页滚动事件，当发生网页滚动事件时，重新截取所述平铺数据中与所述树形控件被选取区域对应的部分数据并渲染，显示渲染的数据。

4.根据权利要求1所述的方法，其特征在于，所述响应树形控件缩略图点击操作，定位点击位置之前，还包括：

识别当前节点状态下树形控件中各节点对应的父节点状态为展开状态或为收起状态；

若当前节点对应父节点的节点状态均为展开状态，则调整所述当前节点的节点状态为展开状态，若否，则调整所述当前节点的节点状态为收起状态；

根据调整后的树形控件中各节点的节点状态，确定树形控件在当前节点状态下的整体数据；

渲染所述整体数据并截图，生成树形控件缩略图。

5.根据权利要求4所述的方法，其特征在于，所述响应树形控件缩略图点击操作，定位点击位置之前，还包括：

将所述树形控件缩略图在当前显示界面的预设位置固定显示。

6.根据权利要求4所述的方法，其特征在于，所述渲染所述整体数据并截图，生成树形控件缩略图包括：

调用网页中canvas工具对渲染后的所述整体数据截图，生成树形控件缩略图。

7.根据权利要求1所述的方法，其特征在于，所述根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域包括：

获取所述点击位置至树形控件缩略图顶端的顶端高度；

计算所述顶端高度与树形控件缩略图高度的比值；

根据所述比值以及所述空间高度，确定当前选取的树形控件。

8.一种树形控件定位显示装置，其特征在于，所述装置包括：

响应模块，用于响应树形控件缩略图点击操作，定位点击位置；

高度获取模块，用于获取树形控件的空间高度；

定位模块，用于根据所述点击位置以及所述空间高度，定位所述树形控件被选取区域；

显示模块，用于通过虚拟列表技术显示所述树形控件被选取区域；

其中，所述树形控件缩略图通过对树形控件在当前节点状态下的整体数据进行渲染得到。

9.一种计算机设备，其特征在于，包括至少一个处理器、至少一个存储器、以及总线；其中，所述处理器与所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行如权利要求1至7中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images