CN103793135B - 用户界面树形结构显示方法及系统 - Google Patents

用户界面树形结构显示方法及系统 Download PDF

Info

Publication number
CN103793135B
CN103793135B CN201310753753.5A CN201310753753A CN103793135B CN 103793135 B CN103793135 B CN 103793135B CN 201310753753 A CN201310753753 A CN 201310753753A CN 103793135 B CN103793135 B CN 103793135B
Authority
CN
China
Prior art keywords
list
viewing area
node
interface
user
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201310753753.5A
Other languages
English (en)
Other versions
CN103793135A (zh
Inventor
张庆梅
张萌霞
吴可
雷太原
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yuanguang Software Co Ltd
Original Assignee
Yuanguang Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Yuanguang Software Co Ltd filed Critical Yuanguang Software Co Ltd
Priority to CN201310753753.5A priority Critical patent/CN103793135B/zh
Publication of CN103793135A publication Critical patent/CN103793135A/zh
Application granted granted Critical
Publication of CN103793135B publication Critical patent/CN103793135B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供了一种用户界面树形结构显示方法及系统,包括:自动生成并显示根节点列表;根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列。本发明不仅能够充分利用用户的界面纵向和横向空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。

Description

用户界面树形结构显示方法及系统
技术领域
本发明涉及人机交互技术领域,更具体地说,涉及一种用户界面树形结构显示方法及系统。
背景技术
软件设计可分为两个部分:编码设计与UI(User Interface,用户界面)设计。UI设计,是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计的内容包括树形结构的设计。
树形结构是一种可以分级显示项目列表的窗口,其所含项目以相互关联的方式显示在控件中,通过点击位于某一级的项目节点展开下一级中从属于该节点的所有项目。虽然树形结构控件非常适合管理那些层次较多且相互间隶属关系较为清晰的项目元素,但是,现有的树控件无法满足特殊的业务特性。
现有的树形结构都是通过上下结构显示根节点以及子节点的,如图1所示,下一级节点的显示区域均位于上一级节点显示区域的下方。但是,当节点较多或节点的层级较多时,能够显示各层级节点的界面纵向空间有限,而其界面的横向空间并未完全利用,因此,会造成界面局部空间空白,显示效果不佳,用户体验不理想的问题。
发明内容
有鉴于此,本发明提供了一种用户界面显示系统及方法,以解决现有技术中采用上下结构显示树形结构时,造成的界面局部界面空白,显示效果不佳,用户体验不理想的问题。
为实现上述目的,本发明提供如下技术方案:
一种用户界面树形结构显示方法,包括:
自动生成并显示根节点列表;
根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;
其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列。
优选的,所述用户的指令为用户通过鼠标移入操作、键盘方向键操作或触屏触控操作输入的指令。
优选的,接收到用户指令时,生成并显示所述节点的子节点列表,隐藏所述节点同一级的其他节点的子节点列表。
优选的,子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。
优选的,接收到用户指令时,如果生成的子节点列表的显示区域超出当前显示界面时,所述显示界面的滚动条自动移动,以显示所述子节点列表。
优选的,当同一列表中的多个节点的子节点相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在接收到用户指令后,在所述显示区域右侧生成并显示对应所述多个节点的同一子节点列表。
优选的,用于科目选择时,每一个节点对应一个科目,则所述方法还包括:
根据显示的各级子科目列表,选择用户需要的科目。
优选的,当用户选择的科目为单个的科目时,可以通过点击所述科目对应的显示区域来选中所述科目;当用户选择的科目为同一子科目列表中的全部科目时,可以通过选中所述子科目列表对应的上一级科目,来选中所述子科目列表中的全部科目。
一种用户界面树形结构显示系统,包括:
树形结构控制模块,用于自动生成根节点列表,并根据接收到的用户指令生成相应的根节点的各级子节点列表;
显示控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列,以及控制所述各级子节点列表的显示区域沿界面横向依次排列。
优选的,所述显示控制模块包括:
第一显示区域控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列;
第二显示区域控制模块,用于控制各级子节点列表的显示区域沿界面横向依次排列;
第三显示区域控制模块,用于控制子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。
优选的,所述显示控制模块还包括:
界面显示控制模块,用于当生成的子节点列表的显示区域超出用户的当前显示界面时,移动显示界面的滚动条来显示所述子节点列表。
优选的,所述显示控制模块还包括:
合并显示模块,用于当同一列表中的多个节点的子节点相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在所述显示区域右侧显示对应所述多个节点的同一子节点列表。
与现有技术相比,本发明所提供的技术方案具有以下优点:
本发明所提供的用户界面树形结构显示方法及系统,由于根节点列表和各级子节点列表中节点的显示区域沿界面纵向依次排列,即从上往下依次排列,因此,充分利用了用户界面的纵向空间,又由于各级子节点列表沿界面横向依次排列,即从左往右依次排列,充分利用了用户界面的横向空间,因此,本发明不仅能够充分利用用户的界面空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明提供的现有的树形结构示意图;
图2为本发明实施例一提供的用户界面树形结构显示方法流程图;
图3为本发明实施例一提供的树形结构示意图;
图4为本发明实施例一提供的节点显示区域合并后的树形结构图;
图5为本发明实施例二提供的用于科目选择的用户界面树形结构显示方法流程图。
具体实施方式
正如背景技术所述,现有的树形结构都是通过上下结构显示根节点以及子节点的,如图1所示,下一级节点的显示区域均位于上一级节点显示区域的下方。但是,当节点较多或节点的层级较多时,能够显示各层级节点的界面纵向空间有限,而其界面的横向空间并未完全利用,因此,会造成界面横向局部空间空白,显示效果不佳,用户体验不理想的问题。
基于此,本发明提供了一种用户界面树形结构显示方法,以克服现有技术存在的上述问题,包括:
自动生成并显示根节点列表;
根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;
其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列。
本发明还提供了一种用户界面树形结构显示系统,包括:
树形结构控制模块,用于自动生成根节点列表,并根据接收到的用户指令生成相应的根节点的各级子节点列表;
显示控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列,以及控制所述各级子节点列表的显示区域沿界面横向依次排列。
本发明所提供的用户界面树形结构显示方法及系统,由于根节点列表和各级子节点列表中节点的显示区域沿界面纵向依次排列,即从上往下依次排列,因此,充分利用了用户界面的纵向空间,又由于各级子节点列表沿界面横向依次排列,即从左往右依次排列,充分利用了用户界面的横向空间,因此,本发明不仅能够充分利用用户的界面空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。
以上是本发明的核心思想,为使本发明的上述目的、特征和优点能够更加明显易懂,下面结合附图对本发明的具体实施方式做详细的说明。
在下面的描述中阐述了很多具体细节以便于充分理解本发明,但是本发明还可以采用其他不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本发明内涵的情况下做类似推广,因此本发明不受下面公开的具体实施例的限制。
其次,本发明结合示意图进行详细描述,在详述本发明实施例时,为便于说明,表示器件结构的剖面图会不依一般比例作局部放大,而且所述示意图只是示例,其在此不应限制本发明保护的范围。此外,在实际制作中应包含长度、宽度及深度的三维空间尺寸。
下面通过几个实施例详细描述。
实施例一
本实施例提供了一种用户界面树形结构显示方法,其流程图如图2所示,包括:
S201:自动生成并显示根节点列表;
在生成根节点列表之前,利用AJAX(Asynchronous JavaScript and Xml,异步的JavaScript和Xml技术)技术或基于TCP/IP(Transmission ControlProtocol/Internet Protocol,传输控制协议/因特网互联协议)的技术从服务器端或本地文件中读取数据。所述数据包括JSON格式数据、XML格式或其他格式的数据,对所述数据进行解析后,获得表示节点之间层级关系的数据项,所述数据项通常包括id和parented这两个字段,支持无限层级的节点。
其中,AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的网页应用程序的技术,JSON是一种轻量级的数据交换格式,它是基于JavaScript的一个子集。JSON虽然采用完全独立于语言的文本格式,但是,也具有类似于C语言家族的习惯特性(包括C,C++,JavaScript等),这些特性使得JSON成为理想的数据交换语言,易于用户阅读和编写,同时也易于机器的解析和生成。虽然XML的说明结构更接近人类的语言,在编码的可读性上具有明显的优势,但是,JSON更适合机器阅读,索引效率更高。
对数据进行解析后,得到表示数据之间层次关系的节点数据,并根据节点数据自动生成并显示根节点列表,所述根节点列表包括一个或多个根节点,且所述根节点的显示区域沿界面的纵向排列,即从上往下依次排列。
S202:根据接收到的用户指令,生成并显示相应根节点的各级子节点列表。
本实施例中,用户指令为用户通过鼠标移入操作输入的指令,当然,在其他实施例中也可以为用户通过键盘方向键操作或点击触摸屏的触控操作等输入的指令。当用户按压键盘方向键时,通过识别方向键对应的位置区域确定对应的节点,并执行相应的命令,显示子节点列表等;当用户点击触摸屏时,通过识别点击的位置区域确定对应的节点,并执行相应的命令,显示子节点列表等。
本实施例中,根据接收到的用户指令生成并显示相应根节点的各级子节点列表的过程具体为:接收到用户鼠标移入操作输入的指令时,通过识别鼠标的位置确定对应的根节点,生成并显示所述根节点的各级子节点列表。
接收到用户指令时,即当用户将鼠标移入任一根节点的显示区域时,通过识别鼠标的位置确定对应的根节点,生成并显示所述根节点的各级子节点列表的过程包括:当用户将鼠标移入任一根节点的显示区域时,系统自动生成并显示所述根节点的第一级子节点列表,当用户将鼠标移入第一级子节点列表中任一节点的显示区域时,系统自动生成并显示所述节点的第二级子节点列表,依次类推,当用户将鼠标移入第N-1级子节点列表中任一节点的显示区域时,系统自动生成并显示所述节点的第N级子节点列表,其中,所述第N级子节点列表为所述根节点的最后一级子节点列表。
所述各级子节点列表的显示区域沿界面的横向,即从左往右依次排列,且任一节点的子节点列表中纵向排列在第一个的第一节点的显示区域与所述节点的显示区域在同一条直线上,所述子节点列表显示区域的左侧位置紧邻其对应的上一级节点显示区域的右侧位置,且所述子节点列表与所述上一级节点之间通过树形符号连接,本实施例中的树形结构的示意图如图3所示。
在显示各级子节点列表的过程中,接收到用户指令时,即当用户将鼠标移动到任一节点的显示区域时,系统自动生成并显示所述节点的子节点列表,并自动隐藏所述节点同一级的其他节点的子节点列表,以便于用户查看。此外,当用户鼠标移入任一节点的显示区域时,如果生成的子节点列表的显示区域超出当前显示界面时,所述显示界面的滚动条自动移动,以显示所述子节点列表。
通过识别鼠标的位置来确定用户需要查看的节点,并据此来自动展开相应节点的子节点列表,自动隐藏所述节点同一级的其他节点的子节点列表,即便于用户查看,又提高了操作效率,从而避免了节点层级较多时,需要多次点击鼠标来完成层级的展开、收缩,操作繁琐的问题。
本实施例中,当同一列表中的多个(两个及两个以上)节点的子节点列表相同时,例如,节点A、节点B、节点C具有相同的子节点列表,则将节点A~C沿界面纵向依次排列在同一个块内,即同一显示区域内,所述节点的显示区域合并后的树形结构如图4所示。所述显示区域内的各节点之间相互独立,对各节点的操作互不影响。所述多个节点与其他节点没有太大的区别,仅仅只是没有自己的显示区域,共同处于同一个显示区域的外部边框内部而已。
其中,在接收到用户指令后,在所述显示区域右侧生成并显示对应所述多个节点的同一子节点列表,即在接收到对应所述显示区域的任一节点的用户指令后,在所述显示区域右侧生成并显示同一子节点列表。
本实施例提供的用户界面树形结构显示方法,由于根节点列表和各级子节点列表中节点的显示区域沿界面纵向依次排列,即从上往下依次排列,因此,充分利用了用户界面的纵向空间,又由于各级子节点列表沿界面横向依次排列,即从左往右依次排列,充分利用了用户界面的横向空间,因此,本发明不仅能够充分利用用户的界面空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。
实施例二
本实施例提供了一种用于科目选择的用户界面树形结构显示方法,所述树形结构中的每一个节点都对应一个科目,所述方法的流程图如图5所示,包括:
S501:自动生成并显示根科目列表;
在生成根节点列表之前,利用AJAX技术或基于TCP/IP协议的技术从服务器端或本地文件中读取数据,所述数据包括JSON格式数据、XML格式或其他格式的数据。对所述数据进行解析后,获得表示各科目间层级关系的数据项,所述数据项通常包括id和parented这两个字段,其支持无限层级。
获得表示各科目之间层级关系的数据后,根据所述数据自动生成并显示根科目列表,所述根科目列表包括一个或多个根科目,且所述根科目的显示区域沿界面的纵向排列,即从上往下依次排列。
S502:根据接收到的用户指令,生成并显示相应根科目的各级子科目列表;
本实施例中,用户指令为用户通过将鼠标移入操作输入的显示指令,当然,在其他实施例中也可以为用户通过键盘方向键操作或点击触摸屏的触控操作等输入的指令。即当用户按压键盘方向键时,通过识别方向键对应的位置区域确定对应的节点,并执行相应的命令,显示子节点列表等;当用户点击触摸屏时,通过识别点击的位置区域确定对应的节点,并执行相应的命令,显示子节点列表等。
本实施例中,根据接收到的用户指令生成并显示相应根科目的各级子科目列表的过程具体为:接收到用户鼠标移入操作输入的指令时,即当用户将鼠标移入任一根科目的显示区域时,通过识别鼠标的位置确定对应的根科目,系统自动获取数据生成并显示所述根科目的各级子科目列表。
接收到用户指令时,即当用户将鼠标移入任一根科目的显示区域时,通过识别鼠标的位置确定对应的根科目,生成并显示所述根科目的各级子科目列表的过程包括:当用户将鼠标移入任一根科目的显示区域时,系统自动生成并显示所述根科目的第一级子科目列表,当用户将鼠标移入第一级子科目列表中任一科目的显示区域时,系统自动生成并显示所述科目的第二级子科目列表,依次类推,当用户将鼠标移入第N-1级子科目列表中任一科目的显示区域时,系统自动生成并显示所述科目的第N级子科目列表,其中,所述第N级子科目列表为所述根科目的最后一级子科目列表。
所述各级子科目列表的显示区域沿界面的横向,即从左往右依次排列,且任一科目的子科目列表中纵向排列在第一个的第一科目的显示区域与所述科目的显示区域在同一条直线上,所述子科目列表显示区域的左侧位置紧邻其对应的上一级科目显示区域的右侧位置,且所述子科目列表与所述上一级科目之间通过树形符号连接,其树形结构图与图3中的结构相同。
在显示各级子科目列表的过程中,接收到用户指令时,即当用户将鼠标移动到任一科目的显示区域时,系统自动生成并显示所述科目的子节点列表,并自动隐藏所述科目同一级的其他科目的子节点列表,以便于用户查看。此外,当用户鼠标移入任一科目的显示区域时,如果生成的子科目列表的显示区域超出当前显示界面时,所述显示界面的滚动条自动移动,以显示所述子科目列表。
通过识别鼠标的位置来确定用户需要查看的科目,并据此来自动展开相应科目的子科目列表,自动隐藏所述科目同一级的其他科目的子科目列表,即便于用户查看,又提高了操作效率,从而避免了科目层级较多时,需要多次点击鼠标来完成层级的展开、收缩,操作繁琐的问题。
S503:根据显示的各级子科目列表,选择用户需要的科目。
生成并显示根科目的各级子科目列表后,用户可以根据需要选择科目。当用户选择的科目为单个的科目时,可以通过点击所述科目对应的显示区域来选中所述科目;当用户选择的科目为同一子科目列表中的全部科目时,可以通过选中所述子科目列表对应的上一级科目,来选中所述子科目列表中的全部科目。
本实施例中,当同一列表中的多个(两个及两个以上)科目的子科目列表相同时,则与图4中的结构相同,将科目A~C沿界面纵向依次排列在同一个块内,即同一显示区域内。所述显示区域内的各科目之间相互独立,对各科目的操作互不影响。所述多个科目与其他科目没有太大的区别,仅仅只是没有自己的显示区域,共同处于同一个显示区域的外部边框内部而已。
其中,在接收到用户指令后,在所述显示区域右侧生成并显示对应所述多个科目的同一子科目列表,即在接收到对应所述显示区域的任一科目的用户指令后,在所述显示区域右侧生成并显示同一子科目列表。
本实施例中,由于根科目列表和各级子科目列表中科目的显示区域沿界面纵向依次排列,即从上往下依次排列,因此,充分利用了用户界面的纵向空间,又由于各级子科目列表沿界面横向依次排列,即从左往右依次排列,充分利用了用户界面的横向空间,因此,本实施例不仅能够充分利用用户的界面空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到并选择需要的科目,提高了用户的使用效率以及体验效果。
实施例三
本实施例提供了一种用户界面树形结构显示系统,包括:树形结构控制模块和显示控制模块,树形结构控制模块,用于自动生成根节点列表,并根据接收到的用户指令生成相应的根节点的各级子节点列表;显示控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列,以及控制所述各级子节点列表的显示区域沿界面横向依次排列。
本实施例中,所述系统还包括:数据获取模块,用于利用AJAX技术或基于TCP/IP协议的技术从服务器端或本地文件中获取JSON格式、XML格式或其他格式的数据,并对所述数据进行解析,获得表示各节点层级关系的数据项,所述数据项通常包括id和parented这两个字段。
数据获取模块获得数据后,树形结构控制模块根据所述数据自动生成根节点列表,并将所述根节点列表显示在用户界面,根据用户的指令,即当用户的鼠标移入任一根节点的显示区域时,树形结构控制模块根据数据生成所述根节点对应的子节点列表,当用户的鼠标移入所述子节点列表中的任一子节点的显示区域时,树形结构控制模块根据数据生成所述子节点对应的子节点列表,依次类推,直至生成所述根节点的最后一级子节点列表。本实施例中的树形结构控制模块支持无限层级的子节点列表的生成。
在树形结构控制模块生成根节点的各级子节点列表的过程中,显示控制模块控制根节点列表和子节点列表中的节点的显示区域沿界面纵向排列,即从上往下依次排列,以及控制生成的各级子节点列表的显示区域沿界面横向排列,即从左往右依次排列。
本实施例中,所述显示控制模块包括:第一显示区域控制模块、第二显示区域控制模块、第三显示区域控制模块和界面显示控制模块,第一显示区域控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列;第二显示区域控制模块,用于控制各级子节点列表的显示区域沿界面横向依次排列;第三显示区域控制模块,用于控制子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上;界面显示控制模块,用于当生成的子节点列表的显示区域超出用户的当前显示界面时,移动显示界面的滚动条来显示所述子节点列表。
本实施例中,用户指令为用户通过将鼠标移入到相应节点的显示区域的操作来输入的显示指令,当然,在其他实施例中也可以为用户通过键盘方向键操作或点击触摸屏的触控操作等输入的指令。即当用户按压键盘方向键时,通过识别方向键对应的位置区域确定对应的节点,并执行相应的命令,显示子节点列表等;当用户点击触摸屏时,通过识别点击的位置区域确定对应的节点,并执行相应的命令,显示子节点列表等。
此外,本实施例中,所述显示控制模块还包括:合并显示控制模块,用于当同一列表中的多个节点的子节点列表相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在所述显示区域右侧显示对应所述多个节点的同一子节点列表。
如图4所示,当节点A、节点B、节点C具有相同的子节点列表时,合并显示控制模块将节点A~C沿界面纵向依次排列在同一个块内,即同一显示区域内。所述显示区域内的各节点之间相互独立,对各节点的操作互不影响。所述多个节点与其他节点没有太大的区别,仅仅只是没有自己的显示区域,共同处于同一个显示区域的外部边框内部而已。其中,树形结构控制模块在接收到用户指令后,生成对应所述多个节点的同一子节点列表,合并显示控制模块控制同一子节点列表在所述显示区域的右侧显示。
本实施例提供的用户界面树形结构显示系统,通过树形结构控制模块自动生成根节点列表,以及根据用户的指令生成相应的根节点的各级子节点列表,通过显示控制模块控制根节点列表和子节点列表中的节点的显示区域沿界面纵向依次排列,即从上往下依次排列,以及所述各级子节点列表的显示区域沿界面横向依次排列,即从左往右依次排列,从而实现了用户界面纵向空间和横向空间的充分利用,避免了局部界面空白、显示效果不佳的问题,且能够使节点的层次更加分明,从而能够迅速地找到需要的节点,提高了用户的使用效率以及体验效果。
本说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言,由于其与实施例公开的方法相对应,所以描述的比较简单,相关之处参见方法部分说明即可。
对所公开的实施例的上述说明,使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下,在其它实施例中实现。因此,本发明将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种用户界面树形结构显示方法,其特征在于,包括:
自动生成并显示根节点列表;
根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;
其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列;
当同一列表中的多个节点的子节点列表相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在接收到用户指令后,在所述显示区域右侧生成并显示对应所述多个节点的同一子节点列表。
2.根据权利要求1所述的方法,其特征在于,所述用户指令为用户通过鼠标移入操作、键盘方向键操作或触屏触控操作输入的指令。
3.根据权利要求2所述的方法,其特征在于,接收到用户指令时,生成并显示所述节点的子节点列表,隐藏所述节点同一级的其他节点的子节点列表。
4.根据权利要求3所述的方法,其特征在于,子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。
5.根据权利要求4所述的方法,其特征在于,接收到用户指令时,如果生成的子节点列表的显示区域超出当前显示界面时,所述显示界面的滚动条自动移动,以显示所述子节点列表。
6.根据权利要求5所述的方法,其特征在于,用于科目选择时,每一个节点对应一个科目,则所述方法还包括:
根据显示的各级子科目列表,选择用户需要的科目。
7.根据权利要求6所述的方法,其特征在于,当用户选择的科目为单个的科目时,可以通过点击所述科目对应的显示区域来选中所述科目;当用户选择的科目为同一子科目列表中的全部科目时,可以通过选中所述子科目列表对应的上一级科目,来选中所述子科目列表中的全部科目。
8.一种用户界面树形结构显示系统,其特征在于,包括:
树形结构控制模块,用于自动生成根节点列表,并根据接收到的用户指令生成相应的根节点的各级子节点列表;
显示控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列,以及控制所述各级子节点列表的显示区域沿界面横向依次排列;
其中,所述显示控制模块还包括:
合并显示控制模块,用于当同一列表中的多个节点的子节点列表相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在所述显示区域右侧显示对应所述多个节点的同一子节点列表。
9.根据权利要求8所述的系统,其特征在于,所述显示控制模块包括:
第一显示区域控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列;
第二显示区域控制模块,用于控制各级子节点列表的显示区域沿界面横向依次排列;
第三显示区域控制模块,用于控制子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。
10.根据权利要求9所述的系统,其特征在于,所述显示控制模块还包括:
界面显示控制模块,用于当生成的子节点列表的显示区域超出用户的当前显示界面时,移动显示界面的滚动条来显示所述子节点列表。
CN201310753753.5A 2013-12-31 2013-12-31 用户界面树形结构显示方法及系统 Active CN103793135B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201310753753.5A CN103793135B (zh) 2013-12-31 2013-12-31 用户界面树形结构显示方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310753753.5A CN103793135B (zh) 2013-12-31 2013-12-31 用户界面树形结构显示方法及系统

Publications (2)

Publication Number Publication Date
CN103793135A CN103793135A (zh) 2014-05-14
CN103793135B true CN103793135B (zh) 2017-01-11

Family

ID=50668875

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310753753.5A Active CN103793135B (zh) 2013-12-31 2013-12-31 用户界面树形结构显示方法及系统

Country Status (1)

Country Link
CN (1) CN103793135B (zh)

Families Citing this family (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104657069A (zh) * 2014-08-25 2015-05-27 北京齐尔布莱特科技有限公司 基于移动设备的树形控件及其展现方式和选取方式
EP3035179A1 (en) * 2014-12-19 2016-06-22 Thomson Licensing Data processing apparatus and method for rendering a tree structure
CN105550021A (zh) * 2015-11-30 2016-05-04 用友网络科技股份有限公司 跨浏览器动态展示方法和装置
CN106095251B (zh) * 2016-06-06 2019-05-31 北京中科江南信息技术股份有限公司 多表头树形列表控件的创建方法和装置
CN107844354A (zh) * 2017-10-25 2018-03-27 王宇 一种采集用户或使用者反馈信息的页面及其构建方法
CN108037974A (zh) * 2017-12-22 2018-05-15 武汉楚鼎信息技术有限公司 一种在移动端展示长表格的交互方法及系统装置
CN108399093B (zh) * 2018-02-28 2021-10-29 南京天溯自动化控制系统有限公司 节点处理方法、装置及电子设备
CN111597275B (zh) * 2019-02-21 2023-06-20 阿里巴巴集团控股有限公司 同构子图或拓扑图的处理方法及装置
CN110851039B (zh) * 2019-10-08 2021-07-02 维沃移动通信有限公司 一种菜单显示方法及电子设备
CN111324258B (zh) * 2020-02-04 2021-07-06 北京字节跳动网络技术有限公司 多级下拉菜单配置项内容生成方法、装置、设备和介质
CN111580912A (zh) * 2020-05-09 2020-08-25 北京飞讯数码科技有限公司 一种多层次结构资源组的展示方法及存储介质
CN113885766B (zh) * 2021-09-24 2024-02-09 远光软件股份有限公司 组织架构图的展示方法、装置、存储介质及终端设备
CN118331566A (zh) * 2021-11-05 2024-07-12 芯华章科技股份有限公司 显示逻辑系统设计的目标模块的方法及相关设备
CN118710768B (zh) * 2024-08-28 2024-11-01 之江实验室 一种基于树形结构图的图像生成方法、装置以及电子设备

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101142556A (zh) * 2005-03-22 2008-03-12 微软公司 操作系统运行菜单程序清单
CN102841891A (zh) * 2011-06-21 2012-12-26 金蝶软件(中国)有限公司 一种树状结构节点的排序方法、装置及查询系统

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7536410B2 (en) * 2005-04-22 2009-05-19 Microsoft Corporation Dynamic multi-dimensional scrolling

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101142556A (zh) * 2005-03-22 2008-03-12 微软公司 操作系统运行菜单程序清单
CN102841891A (zh) * 2011-06-21 2012-12-26 金蝶软件(中国)有限公司 一种树状结构节点的排序方法、装置及查询系统

Also Published As

Publication number Publication date
CN103793135A (zh) 2014-05-14

Similar Documents

Publication Publication Date Title
CN103793135B (zh) 用户界面树形结构显示方法及系统
US9437023B2 (en) Data binding graph for interactive chart
US10108313B2 (en) Navigation in a hierarchical node structure
CN103107895B (zh) 一种基于配置解析应用规则的计费业务规则引擎组合系统及其方法
US8933937B2 (en) Visualizing a layered graph using edge bundling
CN105190547B (zh) 用于数据更新的图表的分阶段的动画化
Steiner et al. Computing all efficient solutions of the biobjective minimum spanning tree problem
EP3028188A1 (en) Three dimensional conditional formatting
Hop et al. Using Hierarchical Edge Bundles to visualize complex ontologies in GLOW
CN105005442B (zh) 一种基于网络终端的学习显示装置
CN107423270B (zh) 一种在线流程图和代码实时互转的实现方法
CN113010612A (zh) 一种图数据可视化构建方法、查询方法及装置
JP5025833B1 (ja) シーケンスプログラム作成装置
CN107608676A (zh) 一种基于gojs技术的交互式图表的实现方法
CN103513977B (zh) 一种群成员列表的展示方法和装置
CN107958029A (zh) 联动展示方法、介质、装置和计算设备
CN107562763A (zh) 数据变化的显示方法及装置
CN103235719A (zh) 建立wap网站的方法和装置
US8707196B2 (en) Dynamic, set driven, ribbon, supporting deep merge
KR102092979B1 (ko) 링크의 곡률의 대화형 제어 기법
Spritzer et al. Towards a smooth design process for static communicative node‐link diagrams
JP5926755B2 (ja) 関係性グラフ用オブジェクト表示システム
CN103970846B (zh) 一种数据显示方法及装置
Sbarski et al. Visualizing argument structure
CN103593532B (zh) 用于制图的数据处理方法和装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C53 Correction of patent for invention or patent application
CB03 Change of inventor or designer information

Inventor after: Zhang Qingmei

Inventor after: Zhang Mengxia

Inventor after: Wu Ke

Inventor after: Lei Taiyuan

Inventor before: Zhang Qingmei

Inventor before: Zhang Mengxia

Inventor before: Lei Taiyuan

COR Change of bibliographic data

Free format text: CORRECT: INVENTOR; FROM: ZHANG QINGMEI ZHANG MENGXIA LEI TAIYUAN TO: ZHANG QINGMEI ZHANG MENGXIA WU KE LEI TAIYUAN

GR01 Patent grant
GR01 Patent grant