CN113867880A - 树形结构展示方法、装置、系统、电子装置和存储介质 - Google Patents

Abstract

本申请涉及一种树形结构展示方法、装置、系统、电子装置和存储介质，其中，该树形结构展示方法包括：获取服务器设备的虚拟列表；获取预设的可视区域，根据所述可视区域获取所述虚拟列表中的第一可视虚拟节点，对所述第一可视虚拟节点进行渲染；获取用户指令，根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据所述可视区域，对所述第二可视虚拟节点进行渲染。通过本申请，解决了树形结构展示可操作性弱、页面卡顿的问题，实现了终端设备树形展示及渲染效率的提高。

Description

树形结构展示方法、装置、系统、电子装置和存储介质

技术领域

本申请涉及用户界面实现领域，特别是涉及树形结构展示方法、装置、系统、电子装置和存储介质。

背景技术

为了在用户界面中合理展示一定的结构关系，需要利用树形结构，例如区域树形以及多层级下的单位管理树形；在对树形结构进行展示时，需要对树形结构进行渲染。

相关技术中，一般采用遍历DOM(Document Object Model，文件对象模型)层级嵌套树形结构的方式，对树形结构进行渲染展示，例如ZTREE框架和IVIEW中TREE组件。遍历树形结构的展示方式，在大数据的情况下会产生可操作性弱、页面卡顿的问题。

针对相关技术中存在树形结构展示可操作性弱、页面卡顿的问题，目前还没有提出有效的解决方案。

发明内容

在本实施例中提供了一种树形结构展示方法、装置、系统、电子装置和存储介质，以解决相关技术中树形结构展示可操作性弱、页面卡顿的问题。

第一个方面，在本实施例中提供了一种树形结构展示方法，包括：

获取服务器设备的虚拟列表；所述虚拟列表为所述服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据所述平级DOM结构生成的；所述虚拟列表包含与所述平级DOM结构中所有节点相对应的虚拟节点；

获取预设的可视区域，根据所述可视区域获取所述虚拟列表中的第一可视虚拟节点，对所述第一可视虚拟节点进行渲染；

获取用户指令，根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据所述可视区域，对所述第二可视虚拟节点进行渲染。

在其中的一些实施例中，所述根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点，包括：

若所述用户指令为对指定的所述第一可视虚拟节点进行收起，则遍历所述虚拟列表中的所有虚拟节点，查询深度小于或者等于所述第一可视虚拟节点的深度的下一个虚拟节点，并根据所述第一可视虚拟节点和所述下一个虚拟节点，删除所有遍历到的目标虚拟节点以获取所述第二可视虚拟节点，将所述第二可视虚拟节点的展示状态设置为收起状态；

其中，所述目标虚拟节点是指所述所有虚拟节点中，除所述指定的第一可视虚拟节点和所述下一个虚拟节点外，从所述指定的第一可视虚拟节点遍历到所述下一个虚拟节点之间的虚拟节点；

若所述用户指令为对指定的所述第一可视虚拟节点进行展开，则遍历所述虚拟列表中的所有虚拟节点，查询所述下一个虚拟节点，并根据所述第一可视虚拟节点和所述下一个虚拟节点，重新加载所有遍历到的所述目标虚拟节点以获取所述第二可视虚拟节点，将所述第二可视虚拟节点的展示状态设置为展开状态。

在其中的一些实施例中，所述加载所有遍历到的目标虚拟节点，还包括：

获取所有遍历到的所述目标虚拟节点的展示状态，在所述目标虚拟节点中找到所述展示状态处于收起状态的可变虚拟节点，删除所述可变虚拟节点后，将所述可变虚拟节点的所有展示状态修改为展开状态，并重新加载所述可变虚拟节点及其子节点至所述虚拟列表。

在其中的一些实施例中，所述对指定的所述第一可视虚拟节点进行展开，或者，所述对指定的所述第一可视虚拟节点进行收起，还包括：

若查询所述目标虚拟节点失败，删除所述指定的第一可视虚拟节点，将所述指定的第一可视虚拟节点的状态设置为不可改变，并重新加载所述指定的第一可视虚拟节点。

在其中的一些实施例中，所述根据所述可视区域，在对指定的所述第一可视虚拟节点进行展开或收起后获取第二可视虚拟节点，对所述第二可视虚拟节点进行渲染，包括：

在对指定的所述第一可视虚拟节点进行展开或收起后，获取所有展示状态为展开状态和不可改变状态的虚拟节点，根据所述可视区域的初始位置以及终点位置，在所述所有展示状态为展开状态和不可改变状态的虚拟节点中获取可视区域内的虚拟节点，得到所述第二可视虚拟节点；对所述第二可视虚拟节点进行渲染。

在其中的一些实施例中，所述对所述第二可视虚拟节点进行渲染，包括：

监听滚动条，当所述滚动条滚动结束后的时间与上一次滚动条滚动结束后的时间差大于预设的执行周期，则执行对所述第二可视虚拟节点的渲染；

所述对所述第二可视虚拟节点的渲染是指在硬件加速的模式下对所述第二可视虚拟节点进行渲染。

第二个方面，在本实施例中提供了一种树形结构展示装置，包括：接收模块、渲染模块和执行模块；

所述接收模块，用于获取服务器设备的虚拟列表；所述虚拟列表为所述服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据所述平级DOM结构生成的；所述虚拟列表包含与所述平级DOM结构中所有节点相对应的虚拟节点；

所述渲染模块，用于获取预设的可视区域，在虚拟列表中根据所述可视区域获取第一可视虚拟节点，对所述第一可视虚拟节点进行渲染；所述渲染模块，还用于根据所述可视区域，对第二可视虚拟节点进行渲染；

所述执行模块，用于获取用户指令，根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点。

第三个方面，在本实施例中提供了一种树形结构展示系统，包括：终端设备、传输设备以及服务器设备；其中，所述终端设备通过传输设备连接服务器设备；

所述服务器设备用于获取扁平化数据，根据所述扁平化数据获取平级DOM结构；所述服务器设备还用于构建虚拟DOM，加载所述平级DOM结构，得到所述虚拟列表；其中，所述平级DOM结构包含有所述扁平化数据中的所有节点；

所述传输设备用于传输所述扁平化数据；所述传输设备还用于传输虚拟列表及所有虚拟节点；

所述终端设备用于执行上述第一个方面所述的树形结构展示方法。

第四个方面，在本实施例中提供了一种电子装置，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一个方面所述的一种树形结构展示方法。

第五个方面，在本实施例中提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一个方面所述的一种树形结构展示方法。

与相关技术相比，在本实施例中提供的树形结构展示方法、装置、系统、电子装置和存储介质，通过获取服务器设备的虚拟列表；获取预设的可视区域，根据所述可视区域获取所述虚拟列表中的第一可视虚拟节点，对所述第一可视虚拟节点进行渲染；获取用户指令，根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据所述可视区域，对所述第二可视虚拟节点进行渲染，解决了树形结构展示可操作性弱、页面卡顿的问题，实现了大数据下终端设备树形展示及渲染效率的提高。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为一个实施例中树形结构展示方法的应用场景图；

图2为一个实施例中树形结构展示方法的流程示意图；

图3为优选实施例中树形结构展示方法的流程示意图；

图4为一个实施例中树形结构展示装置的结构框图；

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

具体实施方式

为更清楚地理解本申请的目的、技术方案和优点，下面结合附图和实施例，对本申请进行了描述和说明。

除另作定义外，本申请所涉及的技术术语或者科学术语应具有本申请所属技术领域具备一般技能的人所理解的一般含义。在本申请中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制，它们可以是单数或者复数。在本申请中所涉及的术语“包括”、“包含”、“具有”及其任何变体，其目的是涵盖不排他的包含；例如，包含一系列步骤或模块(单元)的过程、方法和系统、产品或设备并未限定于列出的步骤或模块(单元)，而可包括未列出的步骤或模块(单元)，或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本申请中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接，而可以包括电气连接，无论是直接连接还是间接连接。在本申请中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。通常情况下，字符“/”表示前后关联的对象是一种“或”的关系。在本申请中所涉及的术语“第一”、“第二”、“第三”等，只是对相似对象进行区分，并不代表针对对象的特定排序。

本申请提供的树形结构展示方法，可以应用于如图1所示的应用环境中。其中，终端设备102通过网络与服务器设备104进行通信。终端设备102获取服务器设备104的虚拟列表；该虚拟列表为该服务器设备104基于接收到的扁平化数据获取平级DOM结构，并根据该平级DOM结构生成的；该虚拟列表包含与该平级DOM结构中所有节点相对应的虚拟节点；终端设备102获取预设的可视区域，根据该可视区域获取该虚拟列表中的第一可视虚拟节点，对该第一可视虚拟节点进行渲染；终端设备102获取用户指令，根据该用户指令对指定的该第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据该可视区域，对该第二可视虚拟节点进行渲染。其中，终端设备102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器设备104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在本实施例中提供了一种树形结构展示方法，图2是本实施例的树形结构展示方法的流程图，如图2所示，该流程包括如下步骤：

步骤S202，获取服务器设备的虚拟列表；该虚拟列表为该服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据该平级DOM结构生成的；该虚拟列表包含与该平级DOM结构中所有节点相对应的虚拟节点。

需要说明的是，服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据该平级DOM结构生成虚拟列表是指：服务器设备基于vue框架搭建DOM结构；服务器设备获取多层嵌套的树形结构原始数据，缩减该原始数据的key值，将该原始数据扁平化，把多层嵌套的树形结构按照原始数据id字段顺序改为一维数组的形式，得到扁平化数据；服务器设备构建层级DOM结构，根据该扁平化数据，将该层级DOM结构通过递归或者遍历按照原始数据id字段顺序改为平级DOM结构，该平级DOM结构包含有原始数据中的所有节点；服务器设备基于该平级DOM结构，另外构建一个与该平级DOM结构相对应的虚拟平级DOM结构，称为虚拟列表；该虚拟列表是指基于平级DOM结构的所有数据，仅对视觉可见的可视区域的数据进行渲染的，脱离原有DOM结构的列表。其中，缩减该原始数据的key值是指，利用key值缩减工具对该原始数据的key值进行缩减，或者，直接获取经过缩减的原始数据，并且缩减后的key值为2位字符；由于在虚拟列表构建的过程中采用缩减key值的方式，可以极大减少大数据的数据体积。

其中，原始数据为由节点组成的多层嵌套结构，其节点包含的字段有：id(按照节点的父子关系由0开始编号，一个节点的子节点编号后再顺序编号同级其他节点)、index(索引，初始值为0)、name(包括“父级节点”和“子节点”)、depth(节点深度，表示节点所在的层级，父级节点深度为0，子节点的深度为自身父节点深度加1)、haveChildren(子节点属性，该节点有子节点时取值为true，否则为false)。

其中，vue框架为vue.js，是一套用于构建用户界面的渐进式框架；DOM是W3C(World Wide Web Consortium，万维网联盟)推荐的处理可扩展置标语言的标准编程接口，能够通过JavaScript代码对页面进行重构从而增强页面的交互性，是一种节点的层次结构(或树)。

步骤S204，获取预设的可视区域，根据该可视区域获取该虚拟列表中的第一可视虚拟节点，对该第一可视虚拟节点进行渲染。

具体地，在虚拟列表中获取与该可视区域的初始位置对应的第一初始虚拟节点，并获取与该可视区域的终点位置对应的第一终点虚拟节点，根据该第一初始虚拟节点和该第一终点虚拟节点得到第一可视虚拟节点，对该第一可视虚拟节点进行渲染；其中，该第一可视虚拟节点包括该第一初始虚拟节点和该第一终点虚拟节点，以及在该第一初始虚拟节点和该第一终点虚拟节点之间按照顺序遍历到的虚拟节点。

需要说明的是，用户可以根据不同的应用场景，预先设置好上述可视区域的尺寸。

步骤S206，获取用户指令，根据该用户指令对指定的该第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据该可视区域，对该第二可视虚拟节点进行渲染。

具体地，在第一可视虚拟节点展开或收起后的列表中，获取与该可视区域的初始位置对应的第二初始虚拟节点，并获取与该可视区域的终点位置对应的第二终点虚拟节点，根据该第二初始虚拟节点和该第二终点虚拟节点得到第二可视虚拟节点，对该第二可视虚拟节点进行渲染；其中，该第二可视虚拟节点包括该第二初始虚拟节点和该第二终点虚拟节点，以及该第二初始虚拟节点和该第二终点虚拟节点之间的虚拟节点。优选地，在第一可视虚拟节点中有20个虚拟节点，用户指定对第20个虚拟节点进行展开，该第20个虚拟节点的子节点有2万个，而该可视区域的允许展示节点数量为25个，因此只能对第20个虚拟节点的5个子节点进行渲染，该5个子节点即为第二可视虚拟节点。

需要说明的是，该展开或收起的操作过程，可以利用DIFF算法实现；该DIFF算法基于vue框架，是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，时间复杂度只有O(n)，通过直接比较同级节点之间的各项属性，从而减少因为频繁改动层级DOM结构而频繁移除和加载滚动条的监听事件，简化了运行流程。

通过上述步骤，在服务器设备上，采用虚拟化的方式将DOM结构构建为虚拟列表，并根据预设的可视区域，对虚拟列表中的第一可视虚拟节点进行渲染，而将数据扁平化的操作，能够减少DOM层级的嵌套，在数据处理时不必进行过多的递归操作，只需要遍历一个一维数组，优化了数据处理过程的运算速率，提高了大数据下终端设备树形展示及渲染的流畅度和可操作性，提高了运行效率；而且上述DOM结构与可视区域可定制化执行，为不同的数据结构、用户需求和终端设备定制执行上述树形结构展示方法。

在其中的一些实施例中，根据该用户指令对指定的该第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点，包括：

若该用户指令为对指定的该第一可视虚拟节点进行收起，则遍历该虚拟列表中的所有虚拟节点，查询深度小于或者等于该第一可视虚拟节点的深度的下一个虚拟节点，并根据该第一可视虚拟节点和该下一个虚拟节点，删除所有遍历到的目标虚拟节点以获取该第二可视虚拟节点，将该第二可视虚拟节点的展示状态设置为收起状态；

其中，该目标虚拟节点是指该所有虚拟节点中，除该指定的第一可视虚拟节点和该下一个虚拟节点外，从该指定的第一可视虚拟节点遍历到该下一个虚拟节点之间的虚拟节点；

若该用户指令为对指定的该第一可视虚拟节点进行展开，则遍历该虚拟列表中的所有虚拟节点，查询该下一个虚拟节点，并根据该第一可视虚拟节点和该下一个虚拟节点，重新加载所有遍历到的该目标虚拟节点以获取该第二可视虚拟节点，将该第二可视虚拟节点的展示状态设置为展开状态。

具体地，在上述用户指令指示对指定的第一可视虚拟节点进行收起的情况下，根据该第一可视虚拟节点和该下一个虚拟节点，删除所有遍历到的目标虚拟节点以获取该第二可视虚拟节点是指，从该第一可视虚拟节点开始，按照节点顺序遍历一维属组，在查询到深度小于或者等于该第一可视虚拟节点的深度时，得到该下一个虚拟节点，在该第一可视虚拟节点和该下一个虚拟节点之间的节点为目标虚拟节点；将该目标虚拟节点删除后，得到删除后的虚拟列表，在删除后的虚拟列表中，获取与该可视区域的初始位置对应的第二初始虚拟节点，并获取与该可视区域的终点位置对应的第二终点虚拟节点，根据该第二初始虚拟节点和该第二终点虚拟节点得到第二可视虚拟节点，对该第二可视虚拟节点进行渲染；其中，该第二可视虚拟节点包括该第二初始虚拟节点和该第二终点虚拟节点，以及该第二初始虚拟节点和该第二终点虚拟节点之间的虚拟节点。

具体地，在上述用户指令指示对指定的第一可视虚拟节点进行展开的情况下，根据该第一可视虚拟节点和该下一个虚拟节点，重新加载所有遍历到的该目标虚拟节点以获取该第二可视虚拟节点是指，从该第一可视虚拟节点开始，按照节点顺序遍历一维属组，在查询到深度小于或者等于该第一可视虚拟节点的深度时，得到该下一个虚拟节点，在该第一可视虚拟节点和该下一个虚拟节点之间的节点为目标虚拟节点；重新加载上述在收起状态下已被删除的目标虚拟节点至虚拟列表，得到加载后的虚拟列表，在加载后的虚拟列表中，获取与该可视区域的初始位置对应的第二初始虚拟节点，并获取与该可视区域的终点位置对应的第二终点虚拟节点，根据该第二初始虚拟节点和该第二终点虚拟节点得到第二可视虚拟节点，对该第二可视虚拟节点进行渲染；其中，该第二可视虚拟节点包括该第二初始虚拟节点和该第二终点虚拟节点，以及该第二初始虚拟节点和该第二终点虚拟节点之间的虚拟节点。

需要说明的是，上述展开或收起的操作过程，利用DIFF算法实现；该DIFF算法基于vue框架，是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，时间复杂度只有O(n)。

通过上述步骤，在虚拟列表的基础上，采用DIFF算法，对遍历到的目标虚拟节点进行删除或者加载，能够减少因为频繁改动层级DOM结构而频繁移除和加载滚动条的监听事件，简化了运行流程，提高了大数据下终端设备树形展示及渲染的流畅度和可操作性。

在其中的一些实施例中，该加载所有遍历到的目标虚拟节点，还包括：

获取所有遍历到的该目标虚拟节点的展示状态，在该目标虚拟节点中找到该展示状态处于收起状态的可变虚拟节点，删除该可变虚拟节点后，将该可变虚拟节点的所有展示状态修改为展开状态，并重新加载该可变虚拟节点及其子节点至该虚拟列表。

通过上述步骤，在节点展开过程中，在指定的第一可视虚拟节点的子节点中，针对已经是展开状态和不可改变状态的子节点进行筛选，该上述展开状态和不可改变状态的子节点不作变动；针对是收起状态的子节点，获取展示状态处于收起状态的可变虚拟节点，该可变虚拟节点的子节点已在虚拟列表中删除，为了显示该可变虚拟节点的所有子节点，需要将该可变虚拟节点删除，同时将该可变虚拟节点的展示状态设置为展开状态，再重新加载该可变虚拟节点以及其子节点至该虚拟列表；上述过程只对收起状态的子节点进行操作，避免了对展开状态和不可改变状态节点的重复操作，实现了大数据下终端设备树形展示及渲染的流畅度和可操作性的提高。

在其中的一些实施例中，对指定的该第一可视虚拟节点进行展开，或者，该对指定的该第一可视虚拟节点进行收起，还包括：

若查询该目标虚拟节点失败，删除该指定的第一可视虚拟节点，将该指定的第一可视虚拟节点的状态设置为不可改变，并重新加载该指定的第一可视虚拟节点。

通过上述步骤，对没有子节点的叶子节点的展示状态标注为不可改变，在终端设备的展示上检测到不可改变状态后，该叶子节点就不会做进一步的展开或者收起的展示，避免了对展开状态和不可改变状态节点的重复操作，实现了大数据下终端设备树形展示及渲染的流畅度和可操作性的提高。

在其中的一些实施例中，根据该可视区域，在对指定的该第一可视虚拟节点进行展开或收起后获取第二可视虚拟节点，对该第二可视虚拟节点进行渲染，包括：

在对指定的该第一可视虚拟节点进行展开或收起后，获取所有展示状态为展开状态和不可改变状态的虚拟节点，根据该可视区域的初始位置以及终点位置，在该所有展示状态为展开状态和不可改变状态的虚拟节点中获取可视区域内的虚拟节点，得到该第二可视虚拟节点；对该第二可视虚拟节点进行渲染。

具体地，在第一可视虚拟节点展开或收起后的列表中，获取与该可视区域的初始位置对应的第二初始虚拟节点，并获取与该可视区域的终点位置对应的第二终点虚拟节点，根据该第二初始虚拟节点和该第二终点虚拟节点得到第二可视虚拟节点，对该第二可视虚拟节点进行渲染；其中，该第二可视虚拟节点包括该第二初始虚拟节点和该第二终点虚拟节点，以及该第二初始虚拟节点和该第二终点虚拟节点之间的虚拟节点。

需要说明的是，该展开或收起的操作过程，利用DIFF算法实现；该DIFF算法基于vue框架，是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历，时间复杂度只有O(n)。

通过上述步骤，在实现节点展开或者收起的逻辑中，将数据扁平化为一维数组的形式，在逻辑上可以认为是将所有子节点顺序排布在父节点上，同时采用DIFF算法，从而减少因为频繁改动层级DOM结构而频繁移除和加载滚动条的监听事件，简化了运行流程，提高了大数据下终端设备树形展示及渲染的流畅度和可操作性；而且上述DOM结构与可视区域可定制化执行，为不同的数据结构、用户需求和终端设备定制执行上述树形结构展示方法。

在其中的一些实施例中，对该第二可视虚拟节点进行渲染，包括：

监听滚动条，当该滚动条滚动结束后的时间与上一次滚动条滚动结束后的时间差大于预设的执行周期，则执行对该第二可视虚拟节点的渲染；

该对该第二可视虚拟节点的渲染是指在硬件加速的模式下对该第二可视虚拟节点进行渲染。

其中，对滚动条的监听可以采用前端开发js框架的内置函数执行，如debounce(防抖)和throttle(截流)；该硬件加速的模式是指采用GPU或APU进行加速运行，可以通过transform-translate3D函数来执行硬件调用。

通过上述步骤，可以实现对可视区域内的节点进行渲染，不在可视区域内的节点不进行渲染的目的，解决了树形结构展示可操作性弱、页面卡顿的问题，实现了大数据下终端设备树形展示及渲染效率的提高。

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

图3是优选实施例中树形结构展示方法的流程图。首先，引用vue.js搭建树形结构展示环境；将原始数据进行扁平化，把多层嵌套的结构改为一维数组的形式，并将原始数据的key值进行缩减，以减小数据体积；优化构建的DOM结构，将父子关系的层级DOM结构改为平级结构，从而构建虚拟列表，同时通过depth深度字段来表示该节点所处的层级，以减少DOM层级的嵌套，优化性能；其次，设置可视区域的大小，将可视区域内特定数量的节点渲染到页面中；然后，遍历Nodes节点，通过depth深度，找到深度小于或者等于节点的下一个节点；如果是收起该节点，则将其从虚拟列表中删除；如果是展开该节点，则需要判断该节点的所有子节点是否存在收起状态的子节点，将收起状态的子节点先剔除之后再将剩余的子节点重新加回虚拟列表；如果遍历结束还没有找到深度小于或者等于节点的下一个节点，说明没有同级或者父级的同级节点，将该节点剔除后，修改展开收起的状态，再加载回虚拟列表；最后，通过监听滚动条，获取初始位置以及终点位置，从而获取可视区域在虚拟列表中的位置并进行渲染展示。其中，上述对节点的操作，包括但不限于对节点的展开或收起、对节点的遍历操作，都属于节点事件，上述节点事件都委托绑定在父元素上，从而减少因为频繁改动层级DOM结构而频繁移除和加载监听事件。

上述通过将父子关系的层级DOM结构改为平级结构，从而构建虚拟列表，同时通过depth深度字段来表示该节点所处的层级的方法，可以将所有节点从嵌套委托结构改为将所有节点元素顺序绑定在父元素上，组成一维数组的形式，从而减少DOM层级的嵌套，减少因为频繁改动层级DOM结构而频繁移除和加载滚动条的监听事件，优化性能，提高了大数据下终端设备树形展示及渲染的流畅度和可操作性，提高了运行效率。

需要补充说明的是，可以将本申请的树形结构展示方法的实现结果，与ZTREE框架和IVIEW中TREE组件的在同一个页面中进行展示的计时结果进行比较，比较结果如下：在引入IVIEW中TREE组件的情况下，加载3000条示例数据，页面展示的TREE组件总耗时为10852ms，其中，加载数据(loading)耗时57ms，脚本构建(scripting)耗时9273ms，渲染树构造(rendering)耗时546ms，绘制(painting)耗时8ms，系统延时(system)381ms，集成开发环境延时(Idle)577ms；在引入ZTREE框架的情况下，加载6万条示例数据，页面展示的总耗时为17869ms，其中，加载数据(loading)耗时2038ms，脚本构建(scripting)耗时3824ms，渲染树构造(rendering)耗时9353ms，绘制(painting)耗时213ms，系统延时(system)1494ms，集成开发环境延时(Idle)947ms；而本申请的树形结构展示方法，加载与ZTREE框架同样的6万条示例数据，页面展示的总耗时为2267ms，其中，加载数据(loading)耗时50ms，脚本构建(scripting)耗时1736ms，渲染树构造(rendering)耗时12ms，绘制(painting)耗时2ms，系统延时(system)326ms，集成开发环境延时(Idle)142ms；与采用ZTREE框架和IVIEW中TREE组件进行终端页面展示的耗时结果相比，本申请树形结构展示方法在不改变展示效果的基础上，在大数据树形结构展示上耗时更少，解决了树形结构展示可操作性弱、页面卡顿的问题，实现了大数据下终端设备树形展示及渲染效率的提高。

需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。例如，收起节点和展开节点两个操作步骤，可以是先对节点收起，再对收起的节点进行展开；或者可以先对节点展开，保证树形结构中没有隐藏掉某一节点，得到完整的树结构后再对需要收起的节点进行收起。

在本实施例中还提供了一种树形结构展示装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。以下所使用的术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管在以下实施例中所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图4是本实施例的树形结构展示装置的结构框图，如图4所示，该装置包括：接收模块20、渲染模块30和执行模块40；

该接收模块20，用于获取服务器设备的虚拟列表；该虚拟列表为该服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据该平级DOM结构生成的；该虚拟列表包含与该平级DOM结构中所有节点相对应的虚拟节点；

该渲染模块30，用于获取预设的可视区域，在虚拟列表中根据该可视区域获取第一可视虚拟节点，对该第一可视虚拟节点进行渲染；该渲染模块，还用于根据该可视区域，对第二可视虚拟节点进行渲染；

该执行模块40，用于获取用户指令，根据该用户指令对指定的该第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点。

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

在本实施例中还提供了一种树形结构展示系统，该系统包括终端设备、传输设备以及服务器设备；其中，该终端设备通过传输设备连接服务器设备；

该服务器设备用于获取扁平化数据，根据该扁平化数据获取平级DOM结构；该服务器设备还用于构建虚拟DOM，加载该平级DOM结构，得到该虚拟列表；其中，该平级DOM结构包含有该扁平化数据中的所有节点；

该传输设备用于传输该扁平化数据；该传输设备还用于传输虚拟列表及所有虚拟节点；

该终端设备用于执行上述任一项树形结构展示方法。

在本实施例中还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，获取服务器设备的虚拟列表；该虚拟列表为该服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据该平级DOM结构生成的；该虚拟列表包含与该平级DOM结构中所有节点相对应的虚拟节点；

S2，获取预设的可视区域，根据该可视区域获取该虚拟列表中的第一可视虚拟节点，对该第一可视虚拟节点进行渲染；

S3，获取用户指令，根据该用户指令对指定的该第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据该可视区域，对该第二可视虚拟节点进行渲染。

需要说明的是，在本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，在本实施例中不再赘述。

此外，结合上述实施例中提供的树形结构展示方法，在本实施例中还可以提供一种存储介质来实现。该存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种树形结构展示方法。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种树形结构展示方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

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

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(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.一种树形结构展示方法，其特征在于，包括：

获取服务器设备的虚拟列表；所述虚拟列表为所述服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据所述平级DOM结构生成的；所述虚拟列表包含与所述平级DOM结构中所有节点相对应的虚拟节点；

获取预设的可视区域，根据所述可视区域获取所述虚拟列表中的第一可视虚拟节点，对所述第一可视虚拟节点进行渲染；

获取用户指令，根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点；根据所述可视区域，对所述第二可视虚拟节点进行渲染。

2.根据权利要求1所述的树形结构展示方法，其特征在于，所述根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点，包括：

若所述用户指令为对指定的所述第一可视虚拟节点进行收起，则遍历所述虚拟列表中的所有虚拟节点，查询深度小于或者等于所述第一可视虚拟节点的深度的下一个虚拟节点，并根据所述第一可视虚拟节点和所述下一个虚拟节点，删除所有遍历到的目标虚拟节点以获取所述第二可视虚拟节点，将所述第二可视虚拟节点的展示状态设置为收起状态；

其中，所述目标虚拟节点是指所述所有虚拟节点中，除所述指定的第一可视虚拟节点和所述下一个虚拟节点外，从所述指定的第一可视虚拟节点遍历到所述下一个虚拟节点之间的虚拟节点；

若所述用户指令为对指定的所述第一可视虚拟节点进行展开，则遍历所述虚拟列表中的所有虚拟节点，查询所述下一个虚拟节点，并根据所述第一可视虚拟节点和所述下一个虚拟节点，重新加载所有遍历到的所述目标虚拟节点以获取所述第二可视虚拟节点，将所述第二可视虚拟节点的展示状态设置为展开状态。

3.根据权利要求2所述的树形结构展示方法，其特征在于，所述加载所有遍历到的目标虚拟节点，还包括：

获取所有遍历到的所述目标虚拟节点的展示状态，在所述目标虚拟节点中找到所述展示状态处于收起状态的可变虚拟节点，删除所述可变虚拟节点后，将所述可变虚拟节点的所有展示状态修改为展开状态，并重新加载所述可变虚拟节点及其子节点至所述虚拟列表。

4.根据权利要求2所述的树形结构展示方法，其特征在于，所述对指定的所述第一可视虚拟节点进行展开，或者，所述对指定的所述第一可视虚拟节点进行收起，还包括：

若查询所述目标虚拟节点失败，删除所述指定的第一可视虚拟节点，将所述指定的第一可视虚拟节点的状态设置为不可改变，并重新加载所述指定的第一可视虚拟节点。

5.根据权利要求4任一项所述的树形结构展示方法，其特征在于，所述根据所述可视区域，在对指定的所述第一可视虚拟节点进行展开或收起后获取第二可视虚拟节点，对所述第二可视虚拟节点进行渲染，包括：

在对指定的所述第一可视虚拟节点进行展开或收起后，获取所有展示状态为展开状态和不可改变状态的虚拟节点，根据所述可视区域的初始位置以及终点位置，在所述所有展示状态为展开状态和不可改变状态的虚拟节点中获取可视区域内的虚拟节点，得到所述第二可视虚拟节点；对所述第二可视虚拟节点进行渲染。

6.根据权利要求1至5任一项所述的树形结构展示方法，其特征在于，所述对所述第二可视虚拟节点进行渲染，包括：

监听滚动条，当所述滚动条滚动结束后的时间与上一次滚动条滚动结束后的时间差大于预设的执行周期，则执行对所述第二可视虚拟节点的渲染；

所述对所述第二可视虚拟节点的渲染是指在硬件加速的模式下对所述第二可视虚拟节点进行渲染。

7.一种树形结构展示装置，其特征在于，包括：接收模块、渲染模块和执行模块；

所述接收模块，用于获取服务器设备的虚拟列表；所述虚拟列表为所述服务器设备基于接收到的扁平化数据获取平级DOM结构，并根据所述平级DOM结构生成的；所述虚拟列表包含与所述平级DOM结构中所有节点相对应的虚拟节点；

所述渲染模块，用于获取预设的可视区域，在虚拟列表中根据所述可视区域获取第一可视虚拟节点，对所述第一可视虚拟节点进行渲染；所述渲染模块，还用于根据所述可视区域，对第二可视虚拟节点进行渲染；

所述执行模块，用于获取用户指令，根据所述用户指令对指定的所述第一可视虚拟节点进行展开或收起以获取第二可视虚拟节点。

8.一种树形结构展示系统，其特征在于，包括：终端设备、传输设备以及服务器设备；其中，所述终端设备通过传输设备连接服务器设备；

所述服务器设备用于获取扁平化数据，根据所述扁平化数据获取平级DOM结构；所述服务器设备还用于构建虚拟DOM，加载所述平级DOM结构，得到所述虚拟列表；其中，所述平级DOM结构包含有所述扁平化数据中的所有节点；

所述传输设备用于传输所述扁平化数据；所述传输设备还用于传输虚拟列表及所有虚拟节点；

所述终端设备用于执行权利要求1至6中任一项所述的树形结构展示方法。

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至6中任一项所述的树形结构展示方法。

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

Images