节点处理方法、装置及电子设备与流程

文档序号:15158614发布日期:2018-08-14 08:13阅读:205来源:国知局

本发明涉及计算机技术领域,尤其是涉及一种节点处理方法、装置及电子设备。



背景技术:

目前,页面中常用的树型结构主要有两种,一种是纵向布局树型结构,另一种是横向布局树型结构,两种树型结构具有不同的应用场景,且根据实际需求,可配置“多选”“单选”“全选/全不选”以及父子级状态传递,具体现状如下:

一,纵向树型结构,此树结构中每级节点占据页面一行,依次缩进向下排布展示完整树型节点信息,主要应用在信息层级节点较深,通过错位及纵向布局可很好的区分上下层级关系,缺点是当每级节点信息过多时,导致树型结构占据页面纵向空间过多,需要不断滚动才能浏览相关信息,不方便用户定位查找相应节点信息;

二,横向树型结构,此树型结构中每级节点占据页面一列,依次向右布局展示完整树型节点信息,主要应用在信息层级节点较浅,多应用在“省-市-区”地址信息架构中,每一列展示同一层级的节点信息,占据一定的页面空间,不适用于节点较多的树型结构,容易出现横向滚动条,横向布局的方式不能够很好传递信息的上下层级关系,对信息的展示不够直观;

综上所述,现有的页面树型结构并没有针对树型节点的布局方式进行配置设计,均为纵向错位依次向下布局展示各级节点信息,这种布局方式并不能满足所有业务场景的应用,特别是在数据量大、层级结构深、每级节点信息过多的场景下,横向树型不能够很好的展示上下层级关系,纵向树型在每级节点信息过多的情况下,展开后占据较大纵向空间,需要不断滚动页面查看树型节点信息,特别是同时各层级间具有关联操作的场景,不方便节点信息的浏览及关联操作。



技术实现要素:

有鉴于此,本发明的目的在于提供一种节点处理方法、装置及电子设备,以缓解现有技术中存在的页面树型结构中节点信息的浏览及关联操作不方便的技术问题。

第一方面,本发明实施例提供了一种节点处理方法,包括:

显示网页页面的树型结构,所述树型结构中,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置;

若接收到选中/非选中所述树型结构中节点的选中/非选中操作,对所述树型结构中与被选中/非选中的节点关联的节点执行同样的选中/非选中操作。

结合第一方面,本发明实施例提供了第一方面的第一种可能的实施方式,其中,所述方法还包括:

在数据库中获取网页页面中的多个节点的节点信息,所述节点信息包括属性值及层级关系值;

按照所述节点信息建立包含所述多个节点的所述树型结构。

结合第一方面,本发明实施例提供了第一方面的第二种可能的实施方式,其中,所述将在所述树型结构中与被选中/非选中的节点关联的节点的状态标识设置为选中/非选中状态,包括:

判断所述被选中/非选中的节点是否为父节点;

若所述被选中/非选中的节点为父节点,则将所述被选中/非选中的节点的多个子节点的状态标识设置为选中/非选中状态。

结合第一方面,本发明实施例提供了第一方面的第三种可能的实施方式,其中,所述将在所述树型结构中与被选中/非选中的节点关联的节点的状态标识设置为选中/非选中状态,还包括:

若所述被选中/非选中的节点不为父节点,则判断与所述被选中/非选中的节点属于同一父节点的全部子节点是否均被选中/非选中;

若与所述被选中/非选中的节点属于同一父节点的全部子节点均被选中/非选中,将所述父节点的状态标识设置为选中/非选中状态。

结合第一方面,本发明实施例提供了第一方面的第四种可能的实施方式,其中,所述将在所述树型结构中与被选中/非选中的节点关联的节点的状态标识设置为选中/非选中状态,还包括:

若与所述被选中/非选中的节点属于同一父节点的部分子节点被选中/非选中,将所述父节点的状态标识设置为部分选中/非选中状态。

结合第一方面,本发明实施例提供了第一方面的第五种可能的实施方式,其中,所述方法还包括:

若在搜索框中接收到用于在所述树型结构中搜索节点内容的关键字时,将所述树型结构中包含所述关键字的节点利用预设方式显示。

结合第一方面,本发明实施例提供了第一方面的第六种可能的实施方式,其中,所述预设方式与不包含所述关键字的其余节点的显示方式不同。

第二方面,本发明实施例还提供一种节点处理装置,包括:

显示模块,用于显示网页页面的树型结构,所述树型结构中,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置;

执行模块,用于若接收到选中/非选中所述树型结构中节点的选中/非选中操作,对所述树型结构中与被选中/非选中的节点关联的节点执行同样的选中/非选中操作。

第三方面,本发明实施例还提供一种电子设备,包括存储器、处理器,所述存储器中存储有可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述第一方面所述的方法的步骤。

第三方面,本发明实施例还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质,所述程序代码使所述处理器执行所述第一方面所述方法。

本发明实施例带来了以下有益效果:本发明实施例可以显示网页页面的树型结构,所述树型结构中,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置;若接收到选中/非选中所述树型结构中节点的选中/非选中操作,对所述树型结构中与被选中/非选中的节点关联的节点执行同样的选中/非选中操作。

本发明实施例能够根据树型结构中每级节点属性值的不同,使用相应的展示方式,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置,这种方式极大的缩短树型结构展开后所占据的页面高度,同时支持树型节点的关联节点的操作传递,混合布局的树型结构提高了用户查看浏览以及对树型结构进行相关操作的易用性。

本发明的其他特征和优点将在随后的说明书中阐述,并且,部分地从说明书中变得显而易见,或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。

附图说明

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

图1为本发明实施例提供的一种节点处理方法的一种流程图;

图2为本发明实施例提供的一种节点处理方法的另一种流程图;

图3为图1中步骤s104的流程图;

图4为本发明实施例提供的父节点被选中时关联节点状态传递示意图;

图5为本发明实施例提供的部分选中子节点时关联节点状态传递示意图;

图6为本发明实施例提供的节点搜索结果示意图;

图7为本发明实施例提供的一种节点处理装置的结构图。

具体实施方式

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

目前,现有的页面树型结构并没有针对树型节点的布局方式进行配置设计,均为纵向错位依次向下布局展示各级节点信息,这种布局方式并不能满足所有业务场景的应用,特别是在数据量大、层级结构深、每级节点信息过多的场景下,横向树型不能够很好的展示上下层级关系,纵向树型在每级节点信息过多的情况下,展开后占据较大纵向空间,需要不断滚动页面查看树型节点信息,特别是同时各层级间具有关联操作的场景,不方便节点信息的浏览及关联操作,基于此,本发明实施例提供的一种节点处理方法、装置及电子设备,可以根据树型结构中每级节点属性值的不同,使用相应的展示方式,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置,这种方式极大的缩短树型结构展开后所占据的页面高度,同时支持树型节点的关联节点的操作传递,混合布局的树型结构提高了用户查看浏览以及对树型结构进行相关操作的易用性。

为便于对本实施例进行理解,首先对本发明实施例所公开的一种节点处理方法进行详细介绍,如图1所示,所述节点处理方法可以包括以下步骤。

步骤s102,显示网页页面的树型结构。

在本发明实施例中,所述树型结构中,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置。

在实际应用中,纵向属性值可以指“系统-页面“属性,横向属性值可以指“按钮”“属性,层级关系值即parentid,以此确定数据属于哪个层级的节点,每个节点都有id和parentid,比如a节点的parentid为“1”,则a节点是id为1的节点的子节点,横向布局方式可以指在同一层级中的节点从左向右依次布局(在实际应用中,也可以从右向左依次布局),纵向布局方式可以指不同层级中的节点纵向错位布局依次向下展示,纵向错位布局依次向下展示是指二级节点在其所属的一级节点下面,并与一级节点错开一至两个字符对齐展示。

根据不同节点的属性值匹配不同的展示方式,可以很直观地传递节点属性,同时“纵-横向”相结合的方式可以极大的缩短树型结构展开后所占据的页面纵向空间,方便用户浏览、定位与操作,特别适用于节点较深同时每级节点信息较多的树型结构。

在该步骤中,网页前端显示网页页面的树型结构,以便用户根据显示的树型结构输入选中/非选中操作。

步骤s103,若接收到选中/非选中所述树型结构中节点的选中/非选中操作时,对所述树型结构中与被选中/非选中的节点关联的节点执行同样的选中/非选中操作。

在本发明实施例中,用户可以通过鼠标或者手指等操作体点击显示的网页页面的树型结构,在实际应用中,可以在操作体点击树型结构中任一节点一次时,确认为接收到选中操作,在操作体连续点击树型结构中同一节点两次时,确认为接收到非选中操作等等。

选中/非选中可以指选中或者非选中,与被选中/非选中的节点关联的节点可以指被选中/非选中的节点的父节点和/或子节点。

步骤s103可以便于进行树型节点的批量操作,可减少用户对不同节点执行同一操作的次数。

在本发明的又一实施例中,如图2所示,在所述步骤s102之前,所述方法还包括:

步骤s100,在数据库中获取网页页面中的多个节点的节点信息,所述节点信息包括属性值及层级关系值;

在本发明实施例中,可以预先在后端数据库表中建立各数据的唯一标识id、层级关系值parentid及(系统-页面和按钮)属性值。

步骤s101,按照所述节点信息建立包含所述多个节点的所述树型结构。

在实际应用中,步骤s101可以使用以下代码实现:

以上程序内容实现了以下过程:首先,前端页面读取后台数据库中节点的属性值,通过节点的id及parentid决定节点的上下层级结构,即某节点的parentid为1,则其是id为1的子节点;然后通过节点的属性值决定同级节点的布局方式,比如属性值为“系统-页面”的节点,采用纵向依次向下展示同级节点,属性值为“按钮”的节点,采用横向依次向右展示同级节点。

在本发明的又一实施例中,如图3所示,所述步骤s103,包括:

步骤s201,判断所述被选中/非选中的节点是否为父节点。

在该步骤中,由于父子节点的“选中/非选中”状态有一定的关联,所以首先判断节点是否是父节点,在实际应用中,也可以判断被选中/非选中的节点是否为子节点,此处可根据实际需要设置,本发明不做限定。

若所述被选中/非选中的节点为父节点,步骤s202,则将所述被选中/非选中的节点的多个子节点的状态标识设置为选中/非选中状态。

也就是说,如图4所示,在该步骤中,当父节点被选中的话,其下所有子节点也为选中状态;或者,当父节点被非选中的话,其下所有子节点也为非选中状态。

若所述被选中/非选中的节点不为父节点,步骤s203,则判断与所述被选中/非选中的节点属于同一父节点的全部子节点是否均被选中/非选中。

在该步骤中,若所述被选中的节点不为父节点,则该节点为子节点,这时需要判断与该节点同属于一个父节点的其余子节点是否全部被选中或者非选中;或者,若所述被非选中的节点不为父节点,则该节点为子节点,这时需要判断与该节点同属于一个父节点的其余子节点是否全部被选中或者非选中。

若与所述被选中/非选中的节点属于同一父节点的全部子节点均被选中/非选中,步骤s204,将所述父节点的状态标识设置为选中/非选中状态。

在该步骤中,如果与该节点同属于一个父节点的其余子节点是否全部被选中,则可以认为是父节点也应当被选中;或者,如果与该节点同属于一个父节点的其余子节点是否全部被非选中,则可以认为是父节点也应当被非选中,方便用户在父节点收起时,可直观获取其下子节点的选中状态。

若与所述被选中/非选中的节点属于同一父节点的部分子节点被选中/非选中,步骤s205,将所述父节点的状态标识设置为部分选中/非选中状态。

在该步骤中,如图5所示,如果与该节点同属于一个父节点的其余子节点中只有部分被选中,将所述父节点的状态标识设置为部分选中状态;如果与该节点同属于一个父节点的其余子节点中只有部分被非选中,将所述父节点的状态标识设置为部分非选中状态。

在本发明的又一实施例中,所述方法还包括:

若在搜索框中接收到用于在所述树型结构中搜索节点内容的关键字时,将所述树型结构中包含所述关键字的节点利用预设方式显示。

在本发明实施例中,所述预设方式与不包含所述关键字的其余节点的显示方式不同。例如,如图6所示,可以在搜索框中输入“供应商”三个字,则前端可以根据此关键字对所有节点进行模糊检索,并将树型结构中节点内容含有“供应商”三个字的节点高亮显示,本发明实施例的树结构中含有搜索控件,树结构可根据关键字进行检索,并突出展示含有关键字的节点信息,方便用户主动快速定位到想要查看的节点信息。

在实际应用中,本发明实施例可以使用以下代码实现:

以上程序内容实现了以下过程:用户在搜索框中输入关键字并点击搜索按钮,系统将输入框中的关键字信息与后台数据库中树结构的每个节点name属性进行比对,并将比对结果返回前台界面即网页中,如果没有匹配结果则显示“无查询结果”,如果匹配成功则高亮显示相应节点。

在本发明的又一实施例中,如图7所示,还提供一种节点处理装置,包括:

显示模块11,用于显示网页页面的树型结构,所述树型结构中,具有纵向属性值的节点按照层级关系值采用纵向布局方式设置,具有横向属性值的节点按照层级关系值采用横向布局方式设置;

执行模块12,用于若接收到选中/非选中所述树型结构中节点的选中/非选中操作,对所述树型结构中与被选中/非选中的节点关联的节点执行同样的选中/非选中操作。

本发明实施例所提供的装置,其实现原理及产生的技术效果和前述方法实施例相同,为简要描述,装置实施例部分未提及之处,可参考前述方法实施例中相应内容。

在本发明的又一实施例中,还提供一种电子设备,包括存储器、处理器,所述存储器中存储有可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述方法实施例所述的方法的步骤。

在本发明的又一实施例中,还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质,所述程序代码使所述处理器执行上述方法实施例所述的方法。

本发明实施例所提供的节点处理方法的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行前面方法实施例中所述的方法,具体实现可参见方法实施例,在此不再赘述。

所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统和装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。

另外,在本发明实施例的描述中,除非另有明确的规定和限定,术语“安装”、“相连”、“连接”应做广义理解,例如,可以是固定连接,也可以是可拆卸连接,或一体地连接;可以是机械连接,也可以是电连接;可以是直接相连,也可以通过中间媒介间接相连,可以是两个元件内部的连通。对于本领域的普通技术人员而言,可以具体情况理解上述术语在本发明中的具体含义。

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

在本发明的描述中,需要说明的是,术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系,仅是为了便于描述本发明和简化描述,而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作,因此不能理解为对本发明的限制。此外,术语“第一”、“第二”、“第三”仅用于描述目的,而不能理解为指示或暗示相对重要性。

最后应说明的是:以上所述实施例,仅为本发明的具体实施方式,用以说明本发明的技术方案,而非对其限制,本发明的保护范围并不局限于此,尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应所述以权利要求的保护范围为准。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1