CN113642292B

CN113642292B - 一种树形列表的实现方法、系统、设备及存储介质

Info

Publication number: CN113642292B
Application number: CN202110794479.0A
Authority: CN
Inventors: 黄逸朗; 潘健
Original assignee: Guangzhou Xuanwu Wireless Technology Co Ltd
Current assignee: Guangzhou Xuanwu Wireless Technology Co Ltd
Priority date: 2021-07-14
Filing date: 2021-07-14
Publication date: 2022-06-14
Anticipated expiration: 2041-07-14
Also published as: CN113642292A

Abstract

本发明公开了一种树形列表的实现方法、系统、设备及存储介质，涉及计算机树形控件配置技术领域。所述方法包括：利用标签属性建立多层父子结构，得到原始树形结构；将原始树形结构转化为平铺的单层数组结构；将单层数组结构转化成数组标签，得到平铺树形列表；根据平铺树形列表，创建容器节点、滚动盒子和列表盒子，并完成树形列表滚动加载设计，得到滚动列表；在滚动列表的列表标签上注册点击事件，获取节点类型；根据节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表。本发明能够减少大数据量的情况下列表中的标签被大量创建导致的性能变差的问题。

Description

一种树形列表的实现方法、系统、设备及存储介质

技术领域

本发明涉及计算机树形控件配置技术领域，尤其涉及一种树形列表的实现方法、系统、设备及存储介质。

背景技术

web客户端的树形列表在信息管理系统中被广泛的应用，其对数据拥有良好的分类能力，能让用户非常准确的定位到数据的位置，如应用在人员管理中，用户可以先根据职位分类进行查找，再通过该职位下再去搜索相关人员搜索效率会有显著的提高。随着企业业务数据的日益增多，对树形列表使用的依赖，如何优化树形列表的使用及显示性能是十分重要的。而web技术依赖于浏览器渲染的性能，操作卡顿等性能问题，如何高效的展示大数据量的树形列表成为了亟待改善的技术问题。

现代浏览器对树形列表的支持，依赖于html文档使用XML标签的特性，列表节点的子节点采用XML标签的方式包裹在里面，再使用层叠样式表(Cascading Style Sheets，CSS)实现展开收起子节点，但如果节点的父子结构复杂且数量多，难以去优化性能，一些性能优化的方法如节点展开后再创建子节点，但如果子节点数量过多，会导致节点创建过慢导致浏览器的卡顿，而在创建大量的子节点后再使用收起子节点的操作时，需要销毁大量标签，也会造成浏览器的卡顿。此外，如果父子节点的层级过深，会对浏览器解析html文档时也会造成性能损耗，在大数据量的情况下，无法很好解决性能问题。

发明内容

本发明目的在于，提供一种树形列表的实现方法、系统、设备及存储介质，以减少大数据量的情况下列表中的标签被大量创建导致的性能变差的问题。

为实现上述目的，本发明实施例提供一种树形列表的实现方法，包括：

利用标签属性建立多层父子结构，得到原始树形结构；

将所述原始树形结构转化为平铺的单层数组结构；

将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；

根据所述平铺树形列表，创建容器节点、滚动盒子和列表盒子；

根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表；

在所述滚动列表的列表标签上注册点击事件，获取节点类型；

根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表。

优选地，所述将所述单层数组结构转化成数组标签，得到平铺树形列表，包括：

将单层数组结构导入预设数据逻辑，遍历参数后形成递归函数，得到平铺树形列表。

优选地，所述根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表，包括：

为所述容器节点设置滚动条监听事件；其中，所述滚动条监听事件用于在滚动条滚动时获取滚动条的滚动高度；

根据树形列表预设的长度值设置所述滚动盒子和所述列表盒子的高度和宽度；

根据所述滚动盒子和所述列表盒子的高度和宽度，获得待渲染列表的节点索引集合；

根据所述节点索引集合，在所述平铺树形列表中获取节点，创建节点标签，得到滚动列表。

优选地，所述根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表，包括：

当所述子节点为收起状态时，取出当前节点中的所有子节点，依次向父节点的索引位置插入、修改并更新子节点显示状态并重新渲染树形列表，达到子节点展开效果；

当所述子节点为展开状态时，取出当前节点中子节点的长度，依次向父节点的索引位置后删除子节点长度数量的，若子节点内还有子节点，则根据其子节点的数量递归删除，修改并更新子节点显示状态并重新渲染树形列表，达到子节点收起效果。

本发明实施例还提供一种树形列表的实现系统，包括：

原始结构构造模块，用于通过标签属性建立多层父子结构，得到原始树形结构；

平铺模块，用于将所述原始树形结构转化为平铺的单层数组结构；

打标模块，用于将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；

节点构建模块，用于根据所述平铺树形列表，创建容器节点、滚动盒子和列表盒子；

滚动设计模块，用于根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表；

节点分析模块，用于在所述滚动列表的列表标签上注册点击事件，获取节点类型；

渲染模块，用于根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表。

优选地，所述打标模块还用于将单层数组结构导入预设数据逻辑，遍历参数后形成递归函数，得到平铺树形列表。

优选地，所述滚动设计模块包括：

监听单元，用于为所述容器节点设置滚动条监听事件；其中，所述滚动条监听事件用于在滚动条滚动时获取滚动条的滚动高度；

数据限定单元，用于根据树形列表预设的长度值设置所述滚动盒子和所述列表盒子的高度和宽度；

节点索引单元，用于根据所述滚动盒子和所述列表盒子的高度和宽度，获得待渲染列表的节点索引集合；

节点获取单元，用于根据所述节点索引集合，在所述平铺树形列表中获取节点，创建节点标签，得到滚动列表。

优选地，所述渲染模块包括：

展开渲染单元，用于在所述子节点为收起状态时，取出当前节点中的所有子节点，依次向父节点的索引位置插入、修改并更新子节点显示状态并重新渲染树形列表，达到子节点展开效果；

收起渲染单元，用于在所述子节点为展开状态时，取出当前节点中子节点的长度，依次向父节点的索引位置后删除子节点长度数量的，若子节点内还有子节点，则根据其子节点的数量递归删除，修改并更新子节点显示状态并重新渲染树形列表，达到子节点收起效果。

本发明实施例还提供一种计算机终端设备，包括一个或多个处理器和存储器。存储器与所述处理器耦接，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述任一实施例所述的树形列表的实现方法。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一实施例所述的树形列表的实现方法。

与现有技术相比，本发明具有以下有益效果：

本发明公开的树形列表的实现方法，包括：利用标签属性建立多层父子结构，得到原始树形结构；将所述原始树形结构转化为平铺的单层数组结构；将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；根据所述平铺树形列表，创建容器节点、滚动盒子和列表盒子；根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表；在所述滚动列表的列表标签上注册点击事件，获取节点类型；根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表。本发明能够减少大数据量的情况下列表中的标签被大量创建导致的性能变差的问题。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明某一实施例提供的树形列表的实现方法的流程示意图；

图2是本发明另一实施例提供的树形列表的实现方法的流程示意图；

图3是本发明又一实施例提供的树形列表的实现方法的流程示意图；

图4是本发明某一实施例提供的树形列表的实现系统的结构示意图；

图5是本发明某一实施例提供的计算机终端设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应当理解，文中所使用的步骤编号仅是为了方便描述，不作为对步骤执行先后顺序的限定。

应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

请参阅图1，图1为本发明某一实施例提供的树形列表的实现方法的流程示意图。在本实施例中，树形列表的实现方法，包括以下步骤：

S110，利用标签属性建立多层父子结构，得到原始树形结构；

S120，将所述原始树形结构转化为平铺的单层数组结构；

S130，将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；

S140，根据所述平铺树形列表，创建容器节点、滚动盒子和列表盒子；

S150，根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表；

S160，在所述滚动列表的列表标签上注册点击事件，获取节点类型；

S170，根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表。

由于现有的树形列表依赖于HTML XML文档父子标签的结构，在大数据量节点的父子结构复杂且数量多，性能较差且难以优化，大量的节点创建导致浏览器持续占用大量内存，导致渲染性能下降，页面卡顿，在性能较差的设备中还会引发web页面崩溃的问题。为了提升树形列表在大数据量的情况下使用时的页面性能，包括展示、展开节点、收起节点等性能。本某一实施例，首先，使用html和css技术，设计一个可以不依赖XML父子标志特性的树形列表；然后，使用javascript技术，设计一种让树形列表滚动时只渲染当前滚动位置显示区域内的标签，减少大数据量时html标签被大量创建导致的性能问题；最后，使用javascript技术，实现这种树形列表展开和收起子节点的方法。

在本发明实施例中，步骤S130，还包括：将单层数组结构导入预设数据逻辑，遍历参数后形成递归函数，得到平铺树形列表。

请参阅图2，图2为本发明另一实施例提供的树形列表的实现方法的流程示意图。在本发明实施例中，步骤S150，具体包括以下步骤：

S151，为所述容器节点设置滚动条监听事件；其中，所述滚动条监听事件用于在滚动条滚动时获取滚动条的滚动高度；

S152，根据树形列表预设的长度值设置所述滚动盒子和所述列表盒子的高度和宽度；

S153，根据所述滚动盒子和所述列表盒子的高度和宽度，获得待渲染列表的节点索引集合；

S154，根据所述节点索引集合，在所述平铺树形列表中获取节点，创建节点标签，得到滚动列表。

请参阅图3，图3为本发明又一实施例提供的树形列表的实现方法的流程示意图。在本发明实施例中，步骤S170，具体包括以下步骤：

S171，当所述子节点为收起状态时，取出当前节点中的所有子节点，依次向父节点的索引位置插入、修改并更新子节点显示状态并重新渲染树形列表，达到子节点展开效果；

S172，当所述子节点为展开状态时，取出当前节点中子节点的长度，依次向父节点的索引位置后删除子节点长度数量的，若子节点内还有子节点，则根据其子节点的数量递归删除，修改并更新子节点显示状态并重新渲染树形列表，达到子节点收起效果。

在某一具体实施例中，为了实现利用标签属性区分而不再依靠XML标签嵌套，将所有节点不管树形列表层级在哪一个层的节点都放在同一层。例如，标签类属性class(类名)定义值’deep-1’代表第一层、’deep-2’代表第二层...，所有节点都在同一层，这样可以解决多层父子结构导致html占用过多内存导致页面渲染性能的下降。

在某一具体实施例中，将所述原始树形结构转化为平铺的单层数组结构，设原始数据为json数据：

首先，定义一个数组arr，然后定义一个遍历函数fn(data)，把原始数据代入fn的参数data执行，最后定义fn逻辑，遍历原始数据，把每次遍历目标插入数组arr，果遍历目标有子节点，则把子节点代入fn的参数data执行，形成一个递归。

上述步骤执行完成后，获得平铺后的数据arr：

arr＝[

{

‘名称’:’1’,

‘深度’:’1’

},

{

‘名称’:’1-1’,

‘深度’:’2’

},

{

‘名称’:’1-2’,

‘深度’:’2’

},

{

‘名称’:’2’,

‘深度’:’1’

},

{

‘名称’:’2-1’,

‘深度’:’2’

},

{

‘名称’:’2-2’,

‘深度’:’2’

}

]

再遍历数组arr转化成标签得到：

该标签可以通过其深度属性区分显示样式，增加以下样式

给类有deep-2的标签增加左边距20px

deep-2{

Padding-left(左边距):20px

}

最后得到平铺树形列表实现的树形列表。

在某一具体实施例中，使用javascript技术，设计一种让树形列表滚动时只渲染当前滚动位置显示区域内的标签，平铺树形列表能够解决现有技术树形列表标签嵌套过多的问题，但大数据量的列表渲染会创建大量的节点，会消耗大量的内存导致浏览器卡顿或崩溃。这里再为平铺的数组列表使用虚拟滚动技术，只渲染浏览器可视区域内的树形列表节点，当列表滚动时触发事件修改可视区域内部的节点，其实现步骤如下：设由1创建长度为1000的平铺树形列表的数据结构：

arr＝[

{

‘名称’:’1’,

‘深度’:’1’

},

{

‘名称’:’1-1’,

‘深度’:’2’

},

{

‘名称’:’1-2’,

‘深度’:’2’

},

{

‘名称’:’2’,

‘深度’:’1’

},

{

‘名称’:’2-1’,

‘深度’:’2’

},

{

‘名称’:’2-2’,

‘深度’:’2’

}

...(省略)

]

基于此，创建容器节点，滚动盒子(scroll-content)及列表盒子(list-content):

<div>

设列表每行行高为50，滚动盒子高度为300；设列表盒子的高度为1000(树形列表节点总数)*50(列表每行行高)；为容器节点设置滚动条监听事件，当滚动条滚动时获取当前滚动条的滚动高度；初始化及列表滚动时，计算出当前列表要渲染的第一个节点的索引值：index(索引值)＝(滚动高度-滚动盒子高度)/行高，其值为负数则取0；根据列表可视区域的数量：len(可视区域的数量)＝盒子高度/每行行高；得到要渲染列表的节点索引集合：

[index,index+1,index+2,...,index+len]；通过节点索引在arr(平铺树形列表)中获取节点，创建标签；清空列表盒子(list-content)原有的子标签，把新创建的标签插入其中；完成树形列表滚动加载设计。通过此设计，每次滚动只需要渲染10个左右的节点，可以大大节约大数据渲染下的内存。

在某一具体实施例中，使用javascript技术，为了实现不需要依赖HTML XML父子标签的特性，也能实现树形列表展开和收起子节点的方法，其步骤如下：往树形列表标签上注册点击事件；点击事件获取该节点的节点类型，如果其有子节点再继续执行逻辑；如果子节点是收起状态，取出该节点的所有子节点，依次往父节点的索引位置插入，修改并更新子节点显示状态并重新渲染树形列表，达到子节点展开效果；如果子节点是展开状态，取出该节点的子节点长度，依次往父节点的索引位置后删除子节点长度数量的，若子节点内还有子节点，则根据其子节点的数量递归删除，修改并更新子节点显示状态并重新渲染树形列表，达到子节点收起效果。

请参阅图4，图4为本发明某一实施例提供的树形列表的实现系统的结构示意图。本实施例提供的树形列表的实现系统，包括：

原始结构构造模块210，用于通过标签属性建立多层父子结构，得到原始树形结构；

平铺模块220，用于将所述原始树形结构转化为平铺的单层数组结构；

打标模块230，用于将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；

节点构建模块240，用于根据所述平铺树形列表，创建容器节点、滚动盒子和列表盒子；

滚动设计模块250，用于根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表；

节点分析模块260，用于在所述滚动列表的列表标签上注册点击事件，获取节点类型；

渲染模块270，用于根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表。

在本发明实施例中，所述打标模块230还用于将单层数组结构导入预设数据逻辑，遍历参数后形成递归函数，得到平铺树形列表。

在本发明实施例中，所述滚动设计模块250包括：

在本发明实施例中，所述渲染模块270包括：

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

请参阅图5，本发明实施例提供一种计算机终端设备，包括一个或多个处理器和存储器。存储器与所述处理器耦接，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述任意一个实施例中的树形列表的实现方法。

处理器用于控制该计算机终端设备的整体操作，以完成上述的树形列表的实现方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该计算机终端设备的操作，这些数据例如可以包括用于在该计算机终端设备上操作的任何应用程序或方法的指令，以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-OnlyMemory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-OnlyMemory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

在一示例性实施例中，计算机终端设备可以被一个或多个应用专用集成电路(Application Specific 1ntegrated Circuit，简称AS1C)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device,简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的树形列表的实现方法，并达到如上述方法一致的技术效果。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述任意一个实施例中的树形列表的实现方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器，上述程序指令可由计算机终端设备的处理器执行以完成上述的树形列表的实现方法，并达到如上述方法一致的技术效果。

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。

Claims

1.一种树形列表的实现方法，其特征在于，包括：

利用标签属性建立多层父子结构，得到原始树形结构；

将所述原始树形结构转化为平铺的单层数组结构；

将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；具体为：将单层数组结构导入预设数据逻辑，遍历参数后形成递归函数，得到平铺树形列表；

根据所述容器节点、所述滚动盒子和所述列表盒子，完成树形列表滚动加载设计，得到滚动列表；具体为：为所述容器节点设置滚动条监听事件；其中，所述滚动条监听事件用于在滚动条滚动时获取滚动条的滚动高度；

根据所述滚动盒子和所述列表盒子的高度和宽度，获得待渲染列表的节点索引集合；其中，索引值＝(滚动高度-滚动盒子高度)/行高，可视区域的数量＝滚动盒子高度/行高，所述节点索引集合为[索引值，索引值+1，…，索引值+可视区域的数量]；

根据所述节点索引集合，在所述平铺树形列表中获取节点，创建节点标签，得到滚动列表；

根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表；具体包括：当所述子节点为收起状态时，取出当前节点中的所有子节点，依次向父节点的索引位置插入、修改并更新子节点显示状态并重新渲染树形列表，达到子节点展开效果；当所述子节点为展开状态时，取出当前节点中子节点的长度，依次向父节点的索引位置后删除子节点长度数量，若子节点内还有子节点，则根据其子节点的数量递归删除，修改并更新子节点显示状态并重新渲染树形列表，达到子节点收起效果。

2.一种树形列表的实现系统，其特征在于，包括：

打标模块，用于将所述单层数组结构转化成数组标签，得到平铺树形列表；其中，所述数组标签能够通过深度属性区分显示样式；所述打标模块还用于将单层数组结构导入预设数据逻辑，遍历参数后形成递归函数，得到平铺树形列表；

所述滚动设计模块包括：监听单元，用于为所述容器节点设置滚动条监听事件；其中，所述滚动条监听事件用于在滚动条滚动时获取滚动条的滚动高度；数据限定单元，用于根据树形列表预设的长度值设置所述滚动盒子和所述列表盒子的高度和宽度；节点索引单元，用于根据所述滚动盒子和所述列表盒子的高度和宽度，获得待渲染列表的节点索引集合；其中，索引值＝(滚动高度-滚动盒子高度)/行高，可视区域的数量＝滚动盒子高度/行高，所述节点索引集合为[索引值，索引值+1，…，索引值+可视区域的数量]；节点获取单元，用于根据所述节点索引集合，在所述平铺树形列表中获取节点，创建节点标签，得到滚动列表；

渲染模块，用于根据所述节点类型分析子节点的状态，修改并更新子节点显示状态并渲染树形列表；所述渲染模块包括：

收起渲染单元，用于在所述子节点为展开状态时，取出当前节点中子节点的长度，依次向父节点的索引位置后删除子节点长度数量，若子节点内还有子节点，则根据其子节点的数量递归删除，修改并更新子节点显示状态并重新渲染树形列表，达到子节点收起效果。

3.一种计算机终端设备，其特征在于，包括：

一个或多个处理器；

存储器，与所述处理器耦接，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1所述的树形列表的实现方法。

4.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1所述的树形列表的实现方法。