CN111382192B

CN111382192B - 一种数据列表展示方法、装置和电子设备

Info

Publication number: CN111382192B
Application number: CN201811625072.XA
Authority: CN
Inventors: 冯中强
Original assignee: Ultrapower Software Co ltd
Current assignee: Ultrapower Software Co ltd
Priority date: 2018-12-28
Filing date: 2018-12-28
Publication date: 2023-11-03
Anticipated expiration: 2038-12-28
Also published as: CN111382192A

Abstract

本发明公开了一种数据列表展示方法、装置和电子设备，数据列表展示方法包括，获取待展示数据，其中，待展示数据为具有层级关系的数据，根据待展示数据的层级关系为各级待展示数据添加包括对应的节点标志在内的多个标志，并将标志以及待展示数据按照预设的数据结构进行组织，得到数据集，将数据集中的待展示数据根据节点标志分级展示在数据列表中。本发明实施例的数据列表展示方法、装置和电子设备，使数据与数据之间的关系一目了然，层次明确，结构清晰，满足了多样展示需求，方便阅读和维护。

Description

一种数据列表展示方法、装置和电子设备

技术领域

本发明涉及计算机技术领域，具体涉及一种数据列表展示方法、装置和电子设备。

背景技术

随着计算机技术的高速发展，大数据时代的来临，数据关系越来越复杂，简单的列表展示数据已经无法满足日益增加的多样需求。现有数据列表展示的缺点很明显，即，HTML(超级文本标记语言，Hyper Text Markup Language)元素与JS(JavaScript，一种脚本语言)代码纠缠在一起，给阅读和维护都带来极大不便，而且复杂的数据结构往往通过钻取，弹出框来展示，钻取较深，弹出框过多，导致页面混乱。

发明内容

本发明提供了一种数据列表展示方法、装置和电子设备，能够清晰的展示数据与数据之间的关系，增强了可读性，层次明确，结构清晰，满足了实际需求，提高了展示效果。

根据本申请的一个方面，提供了一种数据列表展示方法，包括

获取待展示数据，其中，待展示数据为具有层级关系的数据；

根据层级关系确定待展示数据对应的标志，并将待展示数据以及标志按照预设的数据结构进行组织，得到数据集；

将数据集中的待展示数据根据标志，分级展示在数据列表中。

根据本申请的另一个方面，提供了一种数据列表展示装置，包括：

获取模块，用于获取待展示数据，其中，待展示数据为具有层级关系的数据；

处理模块，用于根据层级关系确定待展示数据对应的标志，并将待展示数据以及标志按照预设的数据结构进行组织，得到数据集；

展示模块，用于将数据集中的待展示数据根据标志，分级展示在数据列表中。

根据本申请的又一个方面，提供了一种电子设备，电子设备包括：存储器和处理器，所述存储器和所述处理器之间通过内部总线通讯连接，所述存储器存储有能够被所述处理器执行的程序指令，所述程序指令被所述处理器执行时能够实现本申请一个方面所述的方法。

应用本发明实施例的数据列表展示方法、装置和电子设备，获取具有层级关系的待展示数据，根据层级关系为待展示数据添加标志，并将标志以及待展示数据按照预设的数据结构进行组织，将待展示数据根据标志分级展示在数据列表中，从而在数据列表中加入树结构，解决了现有技术中列表展示导致的页面混乱的技术问题。层次明确，结构清晰，数据与数据之间的关系一目了然，增强了数据的可读性并方便维护，满足了需求。

附图说明

图1是本发明一个实施例的数据列表展示方法的流程图；

图2是本发明一个实施例的数据列表展示的示意图；

图3是本发明一个实施例添加折叠/打开功能键的示意图；

图4是本发明一个实施例的数据列表展示装置的框图；

图5是本发明一个实施例的电子设备的结构示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的设计在于：针对现有技术的列表展示，页面混乱结构不清，不能满足需求的问题，通过在数据列表中加入树结构，更加方便阅读和维护，满足了实际需求，提高了整体显示效果。

图1是本发明一个实施例的数据列表展示方法的流程图，参见图1，本实施例的数据列表展示方法包括下列步骤：

步骤S101，获取待展示数据，其中，待展示数据为具有层级关系的数据；

步骤S102，根据层级关系确定待展示数据对应的标志，并将待展示数据以及标志按照预设的数据结构进行组织，得到数据集；

步骤S103，将数据集中的待展示数据根据标志，分级展示在数据列表中。

由图1所示可知，本发明实施例的数据列表展示方法，获取待展示的数据后，根据待展示数据的层级关系为各级待展示数据添加节点标志以及其它标志，后续利用标志将待展示数据分级展示在数据列表中。如此，使数据与数据之间的关系一目了然，层次明确，结构清晰，满足多样展示需求，方便阅读和维护。

下面结合图2和图3，以一个具体的应用场景对本发明实施例的数据列表展示方法的实现步骤进行说明。总体上，本发明实施例的数据列表展示方法包括(一)数据组织和(二)数据处理两个部分。

(一)数据组织

首先，获取待展示数据。

本领域普通技术人员可以理解，获取待展示数据的方式有多种，比如数据库直接读取、数据采集等。

本发明实施例不限定待展示数据的具体获取方式，只对获取的数据内容有要求，即，要求获取具有层级关系的待展示数据，例如，树状结构的数据，在树结构中，有根节点、父节点和子节点(或称叶子节点)，根节点为第一层级，父节点为第二层级，以此类推，其分支越深，对应的层级也就越多。

优选地，本发明实施例适用于复杂数据结构的列表展示，现有技术中对于结构复杂的数据，钻取的深度更深，用于展示的弹出框较多，从而页面更混乱。使用本发明实施例的列表展示方法，在列表中加入树结构，数据之间的层级关系展示更清晰。因此，获取的待展示数据的层级结构例如为三级以上。

在获取待展示的数据之后，根据数据的层级关系组织数据。需要说明的是，数据的层级关系由业务需求而定，业务需求不同，层级关系也不同，这里不做限定。

具体的，根据层级关系确定待展示数据的标志。比如，本实施例中确定的待展示数据的标志包括：节点标志、行号标志、父行号标志以及子节点指示标志。

实际应用中，为待展示数据中的根节点和父节点分别添加不同的节点标志，为相同层级的父节点添加同一节点标志，节点标志的大小指示节点的层级；按照自上而下的层级顺序，为根节点、父节点和子节点添加对应的行号标志、折叠/打开行指示标志以及父行号标志，其中，行号标志指示当前节点在数据列表中对应展示时所在行的行号，折叠/打开行指示标志指示当前节点在数据列表中对应展示时是否设置折叠功能键和打开折叠键，父行号标志用于指示当前节点的父节点所在行的行号；以及，根据各节点间的父子关系为根节点、父节点和子节点添加指示是否有子节点的子节点指示标志。

举例而言，利用Tag表示节点关系，并作为树结构的主要依据。第一级数据的节点标志Tag设置为0，表示根节点。同级数据的节点标志Tag值相等。参见图3，示意了一个数据列表，该列表包括两列数据，分别为方法列和参数列，在方法列的左侧示意了三个节点标志Tag，三个节点标志分别是0，1，2。本实施例中不同的节点标志是指节点标志的取值不同，节点标志的值不同指示不同的层级关系，值越大代表节点的层级越低。比如，当一个节点的节点标志是Tag 0时表示该节点为根节点，同理，当一个节点的节点标志是Tag 1时表示该节点不是根节点而是根节点下一级的节点，该下一级节点可能有子节点或者没有子节点。

本实施例中，为了方便对于数据的操作，使用id表示行号标志，每一行都有对应的id，使用id_tag表示折叠/打开行指示标志，id_tag用来指示折叠或打开哪些行的数据。使用ParentId表示父id即父行号标志。HasChild表示子节点指示标志，用于判断是否有子节点，如果有子节点值为true，否则为false。

接着，将待展示数据以及标志按照预设的数据结构进行组织，得到数据集。一个实施例中，将待展示数据以及节点标志、行号标志、折叠/打开行指示标志、父行号标志以及子节点指示标志按照JSON数据结构进行组织，得到数据集。

JSON结构能够清晰明确的表示数据之间的关系，但是如果数据深度太深会给组织和解析数据带来复杂的逻辑和性能上的消耗，所以优化的，明确的JSON不可少。本实施例中采取添加标志(即，属性)比如，Tag、Parentid、HasChild等等标志来取代结构化，降低数据深度，避免了复杂的JSON。本实施例中按照JSON数据结构组织后的数据集示意如下：

[Tag,id,id_tag,Parentid,HasChild,"A","B","C","D"...],

[0,1,0,0,true,"xx","xx","xx","xx"...],

[1,2,1,112,false,"xx","xx","xx","xx"...],

[1,3,1,112,false,"xx","xx","xx","xx"...],

[2,4,3,612,false,"xx","xx","xx","xx"...],

[2,5,3,612,false,"xx","xx","xx","xx"...],

[2,6,3,612,false,"xx","xx","xx","xx"...],

[3,7,6,612,false,"xx","xx","xx","xx"...],

[3,8,6,612,false,"xx","xx","xx","xx"...],

[3,9,6,612,false,"xx","xx","xx","xx"...]。

其中，从上到下，第一个数组在JSON中并不存在，只是为了说明以及便于理解而添加的，相当于注释。第二个数组表示的是根节点的待展示数据。具体的，节点标志Tag的值为0，表示这一数组中的内容是树结构的根节点的内容，1表示行号，指示在数据列表中显示在第一行，Parentid的取值为空表示没有父id即，没有父行号。HasChild的值true(真)表示根节点有子节点，HasChild的值false(假)表示根节点无子节点，"Tomcat ServletProcess","V2","1","0",分别对应的是数据节点A，B，C，D，表示数据内容，可以理解为参数值。数据内容是需要在数据列表中显示，供用户查看的具体内容，实际应用中具体数据内容可能不同，应根据需求确定。

此外，待展示数据以及标志的组织方式不限于JSON格式，还可以采用链表(list)、图(map)等，不再逐一列举说明。

(二)数据处理

接下来，对数据集中的数据进行处理，本实施例中，是利用插件将数据集中的待展示数据根据标志分级展示在数据列表中，例如，利用JavaScript脚本编写的SlickGrid插件生成数据列表，SlickGrid插件对JSON数据结构进行处理，通过节点标志来标记各节点，通过子节点指示标志判断当前节点是否有子节点，如果存在子节点则为当前节点设置折叠功能键和打开功能键，否则不设置。

SlickGrid是一个Javascript编写的插件，其架构设计优秀，UI交互功能非常丰富，可扩展功能开发插件化的，功能包括：首列复选框、编辑器、列排序、分页、各种列样式指定、行样式设定。

为了避免JS语言与HTML代码纠缠在一起，优选地，本实施例采用AngularJS和JavaScript来做数据处理。AngularJS是一个JavaScript框架，它是一个以JavaScript编写的库，通过AngularJs自定义指令来实现简单的HTML，例如：HTML文件为：

<head>

</head>

</body>

</html>

JS文件如下：

JS返还的内容会自动加载到HTML对应的自定义指令中，避免了代码的纠缠。

本实施例中利用JavaScript的插件SlickGrid实现数据列表，SlickGrid能够在不修改HTML的情况下实现列表项的增删改，辅以jQuery查询，可以有效解决传统方式导致的阅读与维护不便的技术问题。

参见图2和图3，具体的，JS循环处理(即，一行一行的处理)JSON数据，通过Tag来标记每一个节点，通过HasChild判断当前节点是否有子节点，有子节点则将子节点顺序添加到父节点的下一行。以及根据行号标志、折叠/打开行指示标志为相应节点设置折叠功能键和打开功能键并展示在数据列表中。参见图3，对于展示列表中的第一行数据(id等于1)即，根节点判断是否有子节点，当有子节点时，统计子节点并将所有子节点的折叠/打开行指示标志id_tag的值设为根节点的行号，根据这一id_tag确定应该为根节点添加折叠/打开功能键，折叠/打开功能键如图2中204和205所示。

同理，根据子节点指示标志对行号为2的节点进行判断，发现没有子节点，对行号为3的节点进行判断，有3个子节点，则设置这三个子节点的id_tag的值均为3，从而为行号为3的节点添加折叠/打开功能键。同样的，对行号(id值为6)为6的节点进行判断，发现也有3个子节点，将这三个子节点的id_tag的值均设为6，并为行号为6的节点添加折叠/打开功能键，这里的符号“/”表示或者。

经总结，分为以下几种情况：第一种，当前节点为叶子节点，即，该节点下并无子节点，则不为当前节点设置‘+’，‘-’功能键。第二种，当前节点有子节点，则根据节点标志Tag号标记向上查找和对比，根据id_tag来标记打开或折叠行。第三种，当前节点下有子节点，且子节点下还包含子节点，则根据递归程序，循序处理。第四种，当前节点的节点标志Tag与根节点的节点标志取值相同，则表示当前节点是一棵新的列表树结构的根节点，重新处理。

参见图2，图2中示意了包含四列数据的数据列表，先看第一列，第一列中包含多行数据，数据之间具有明晰的层级关系，即树结构。比如，根节点201下包含多个父节点202，父节点下还设有叶子节点203，根节点前添加有打开功能键205，表示打开根节点这一层级显示数据，父节点前添加有打开功能键205或折叠功能键204，折叠功能键表示将该节点的数据折叠起来，未显示，当需要查看时，点击父节点前的折叠功能键204即可查看打开后的数据。

图2的第二列至第四列是用于显示具体的数据内容，即，左侧的各节点对应的数据，实际应用中可以需求定义数据列表的列数以及数据列表中第2至第4列中的内容，对此不做限制。

需要说明的是，图2中是以一颗树，即只有一个根节点进行的说明，实际应用中也可以在一个数据列表中添加和显示多棵树，多棵树的实现方式与一棵树的实现方式相同，这里不再一一赘述。

综合上述可知，这种方式实现的列表，能够清晰的表示出数据与数据之间的关系，层次明确，结构清晰，能够大大的满足客户的各种需求，而且每一行，每一列皆可以添加超链接，方便跳转到需要的页面。

与前述数据列表展示方法同属一个技术构思，本发明实施例还提供了数据列表展示装置，参见图4，数据列表展示装置400包括：

获取模块401，用于获取待展示数据，其中，待展示数据为具有层级关系的数据；

处理模块402，用于根据层级关系确定待展示数据对应的标志，并将待展示数据以及标志按照预设的数据结构进行组织，得到数据集；

展示模块403，用于将数据集中的待展示数据根据标志，分级展示在数据列表中。

在本发明的一个实施例中，处理模块402具体用于为待展示数据中的根节点和父节点分别添加不同的节点标志，为相同层级的父节点添加同一节点标志，节点标志的大小指示节点的层级；按照自上而下的层级顺序，为根节点、父节点和子节点添加对应的行号标志、折叠/打开行指示标志以及父行号标志，其中，行号标志指示当前节点在数据列表中对应展示时所在行的行号，折叠/打开行指示标志指示当前节点在数据列表中对应展示时是否设置折叠功能键和打开折叠键，父行号标志用于指示当前节点的父节点所在行的行号；以及，根据各节点间的父子关系为根节点、父节点和子节点添加指示是否有子节点的子节点指示标志。

在本发明的一个实施例中，处理模块402具体用于将待展示数据以及节点标志、行号标志、折叠/打开行指示标志、父行号标志以及子节点指示标志按照JSON数据结构进行组织，得到数据集。

在本发明的一个实施例中，展示模块403，利用JavaScript脚本编写的SlickGrid插件生成数据列表，SlickGrid插件对JSON数据结构进行处理，通过节点标志将对应的待展示数据作为节点的值展示在数据列表中，通过子节点指示标志判断当前节点是否有子节点，以及根据行号标志、折叠/打开行指示标志为相应节点设置折叠功能键和打开功能键并展示在数据列表中。

在本发明的一个实施例中，该装置还包括：跳转模块，用于在数据列表中展示的每一行和/或每一列上添加超链接，以跳转到预设页面。SlickGrid插件提供API，调用API可以直接在每一行和/或每一列上添加超链接。

需要说明的是，关于图4所示的数据列表展示装置中的各模块所执行的各功能的举例解释说明，与前述方法实施例中的举例解释说明一致，这里不再赘述。

图5是本发明一个实施例的电子设备的结构示意图。如图5所示，该电子设备包括存储器501和处理器502，存储器501和处理器502之间通过内部总线503通讯连接，存储器501存储有能够被处理器502执行的程序指令，程序指令被处理器502执行时能够实现上述的数据列表展示方法。

此外，上述的存储器501中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明的另一个实施例提供一种计算机可读存储介质，计算机可读存储介质存储计算机指令，计算机指令使所述计算机执行上述的方法。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图的一个流程或多个流程和/或方框图的一个方框或多个方框中指定的功能的装置。

需要说明的是术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本发明的说明书中，说明了大量具体细节。然而能够理解的是，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本发明公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，正如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

以上所述，仅为本发明的具体实施方式，在本发明的上述教导下，本领域技术人员可以在上述实施例的基础上进行其他的改进或变形。本领域技术人员应该明白，上述的具体描述只是更好的解释本发明的目的，本发明的保护范围以权利要求的保护范围为准。

Claims

1.一种数据列表展示方法，其特征在于，包括

将数据集中的待展示数据根据所述标志，分级展示在数据列表中；

所述根据层级关系确定待展示数据对应的标志包括：

为待展示数据中的根节点和父节点分别添加不同的节点标志，为相同层级的父节点添加同一节点标志，节点标志的大小指示节点的层级；按照自上而下的层级顺序，为根节点、父节点和子节点添加对应的行号标志、折叠/打开行指示标志以及父行号标志，其中，行号标志指示当前节点在数据列表中对应展示时所在行的行号，折叠/打开行指示标志指示当前节点在数据列表中对应展示时是否设置折叠功能键和打开折叠键，父行号标志用于指示当前节点的父节点所在行的行号；以及，根据各节点间的父子关系为根节点、父节点和子节点添加指示是否有子节点的子节点指示标志；

所述将待展示数据以及标志按照预设的数据结构进行组织，得到数据集包括：

将待展示数据以及节点标志、行号标志、折叠/打开行指示标志、父行号标志以及子节点指示标志按照JSON数据结构进行组织，得到数据集；

所述将数据集中的待展示数据根据标志，分级展示在数据列表中包括：

具体是利用JavaScript的插件SlickGrid实现数据列表，JS循环处理JSON数据，通过Tag来标记每一个节点，通过HasChild判断当前节点是否有子节点，有子节点则将子节点顺序添加到父节点的下一行，以及根据行号标志、折叠/打开行指示标志为相应节点设置折叠功能键和打开功能键并展示在数据列表中，其中JS返还的内容自动加载到HTML对应的自定义指令中，避免代码的纠缠。

2.根据权利要求1所述的数据列表展示方法，其特征在于，该方法还包括：

在数据列表中展示的每一行和/或每一列上添加超链接，以跳转到预设页面。

3.一种数据列表展示装置，用于实现权利要求1或2所述的数据列表展示方法，其特征在于，包括：

展示模块，用于将数据集中的待展示数据根据所述标志，分级展示在数据列表中；

所述处理模块，具体用于为待展示数据中的根节点和父节点分别添加不同的节点标志，为相同层级的父节点添加同一节点标志，节点标志的大小指示节点的层级；按照自上而下的层级顺序，为根节点、父节点和子节点添加对应的行号标志、折叠/打开行指示标志以及父行号标志，其中，行号标志指示当前节点在数据列表中对应展示时所在行的行号，折叠/打开行指示标志指示当前节点在数据列表中对应展示时是否设置折叠功能键和打开折叠键，父行号标志用于指示当前节点的父节点所在行的行号；以及，根据各节点间的父子关系为根节点、父节点和子节点添加指示是否有子节点的子节点指示标志；

所述处理模块，具体用于将待展示数据以及节点标志、行号标志、折叠/打开行指示标志、父行号标志以及子节点指示标志按照JSON数据结构进行组织，得到数据集；

所述展示模块，是利用JavaScript的插件SlickGrid实现数据列表，JS循环处理JSON数据，通过Tag来标记每一个节点，通过HasChild判断当前节点是否有子节点，有子节点则将子节点顺序添加到父节点的下一行，以及根据行号标志、折叠/打开行指示标志为相应节点设置折叠功能键和打开功能键并展示在数据列表中，其中JS返还的内容自动加载到HTML对应的自定义指令中，避免代码的纠缠。

4.根据权利要求3所述的数据列表展示装置，其特征在于，该装置还包括：跳转模块，用于在数据列表中展示的每一行和/或每一列上添加超链接，以跳转到预设页面。

5.一种电子设备，其特征在于，所述电子设备包括：存储器和处理器，所述存储器和所述处理器之间通过内部总线通讯连接，所述存储器存储有能够被所述处理器执行的程序指令，所述程序指令被所述处理器执行时能够实现权利要求1或2所述的数据列表展示方法。