CN1316782C - 在b/s结构中实现树型结构的方法 - Google Patents

Abstract

本发明公开了一种在B/S结构中实现树型结构的方法，具体通过以下方式实现：1)设置生成数据的接口，通过对配置文件信息的设置完成对树显示的设置，将需要设置的信息写入配置的ini文件；2)用户自由配置静态样式；3)动态数据传入，动态数据由调用方程序传入一个列表，将要显示的数据传入；4)服务器端的信息采集和的树生成结构，通过运用了节点对象和树对象，完成了树生成的函数；5)服务器端动态页面生成jsp；6)客户端网页动态脚本层，客户端选择在用户对页面进行一次请求后将树的信息下载到本地；7)Html静态页面的显示作用，保存树中的数据，将树中的同一个父节点的子节点，以div的形式显示在页面中，并且配合页面的脚本进行数据的显示。

Description

在B/S结构中实现树型结构的方法

技术领域

本发明涉及计算机应用领域，尤其涉及一种在B/S结构中实现树型结构的方法。

背景技术

树的文件有两个类：一个是tree，一个是treeitem。一个tree类提供了一个用树形结构分层显示数据的视图。树中最基本的对象叫做节点，它表示在给定的层次结构中的数据项。树以垂直的方式显示数据，每行显示一个节点。树中只有一个根节点，所有其他节点从这里引出。除根节点外，其他节点分为两类：一类是带子节点的分支节点，另一类是不带子节点的叶子节点。每一个节点关联着一个描述该节点的文本标签和图像图标。文本标签是节点的字符串表示，图标指明该节点是否叶节点。初始状态的树形显示图，在默认情形下只显示根节点和他的直接子节点。用户可以双击分节点的图表或单击图标前的“开关”使该节点扩展或收缩(使他的子节点显示或不显示)。

树形结构在计算机应用领域有已经有了很广泛的应用，树形结构可以很清楚地显示出数据的结构，完成数据的查找定位。但是目前对树形信息显示的应用主要只停留在与运行操作系统有关的本地软件环境上，如桌面环境上的显示。在目前大力推广的B/S结构中没有很好地运行起来。

B/S结构的优势非常明显。本地计算机可以不用安装任何的程序，只使用网页浏览器。就可以对系统进行操作。以往在B/S系统下的树型结构也可以实现。但一般运用的树存在问题如下：

1.大多数都是基于静态页面的，不具备动态更新数据的能力。

2.基于动态的页面的，不能够承载大量数据的显示。

3.运用不够灵活。不能提供良好的接口。不能用于新的系统。

4.需安装软件或插件。实际上应用了本地程序的显示的结构。脱离了B/S的初衷。

发明内容

本发明的目的就是解决B/S系统在使用中最大的难点，即在网络上对信息的显示及组织。在网络上，由于传输速度比较慢，界面只能由浏览器支持，本发明考虑到不在客户端安装插件，解决实时性网络上的信息显示的问题。

发明中主要用到了五个层次的技术，本发明可以转移到各个B/S结构平台上。

设置生成数据的接口：

这一层次通过对配置文件信息的设置完成对树显示的设置。在这一层次的设置方法为将需要设置的信息写入配置的ini文件。每次服务器重新启动会自动读取一次设置初始信息，此后此信息将放在内存中以供显示时候调用。

静态样式用户可以自由配置，主要方面如下：

1)初始化时打开显示节点的等级：-1表示所有节点；0表示显示根节点；1表示显示1级节点......

2)是否保留根节点。可以不显示根节点；

3)按钮上字体的字型；

4)按钮上字体大小；

5)默认名称字体颜色，树中节点文字标签的默认显示字体颜色；

6)当前激活字体颜色。树中节点文字标签被单击后的字体颜色；

7)target属性。树中的资源被点击后显示资源的位置。B/S结构中可以显示在当前页位置，新开的浏览器中的位置，框架中父层的位置，及制定框架中的其他位置等；

8)图片路径、图片位置。树中由于显示的节点都是有按钮图片显示的，用户可以自己设置显示的图片，以达到自己的要求；

9)数据显示距离顶部的象素值；

10)菜单距离左侧的象素值；

11)菜单高度；

12)背景色；

13)图标间的距离；

14)图标宽度；

15)图标高度。

动态数据传入：

动态数据主要由调用方程序传入一个列表，将要显示的数据传入本发明。传入主要信息如下：

节点1：父节点id、显示在节点中的字符标签、该节点的树中代码、树节点的层次、数据类型、状态、节点id、链接id；

节点2：......这些信息可以是从数据库或其他的方式得到的。

服务器端的信息采集和树的生成结构：

在这一层中，完成了树生成的函数，本发明在此层次主要运用了两个部分：一个是节点对象，一个是树对象，节点对象由树对象引用，外界只操作树对象就可以。在这部分主要完成树生成的内部逻辑操作。为页面生成部分提供函数接口。节点对象主要完成对传入的各个节点信息的组织以及记录各自图片、链接等问题。

树对象完成整棵树的生成操作。生成的时间是在调用者在其他网页生成时调用的本页面。

在页面显示的脚本语言及脚本中用到的html对象都在这个层中保存，最后调用显示树的函数生成代码。

服务器端动态页面生成jsp：

在这一层中主要是对生成的页面布局进行设置，并可以根据布局的不同在当前页面中对树的显示属性再次进行设置。设置的方法在前面的树对象中已经提供。

客户端网页动态脚本层：

客户端充分考虑到在大信息量下的网络压力和大信息量下的页面显示速度。需要服务器端传递给客户端的信息尽量少。并且为了解决客户端的浏览器响应比较慢，网络延迟比较大的问题，选择在用户对页面进行一次请求后将树的信息下载到本地。再由JavaScript脚本来管理执行。这样既保证了信息的准确与及时，又保证了用户操作的方便与舒适。按照这样的思路需要将客户端的数据信息尽量地减小，在客户端运行的时候尽量地提高效率。

本发明通过一个树节点的id就可以完全的控制和切换树地图片和信息。这里通过传入的id值对在静态页面中存储的数据以div的方式控制其显示。本层的工作主要体现在：

在树的信息中需要将页面信息的显示方式与JavaScript的函数相结合使用才能将页面中和网络上传输的数据减至最少。

Html静态页面的显示作用。

这一层主要是保存树中的数据，及配合页面的脚本进行数据的显示，在这一层主要用的方法是将树中的同一个父节点的子节点以div的形式显示在页面中。并且在对显示的图标图片进行命名时尽量考虑到可以切换的方便。将相同的节点的相关数据命名时以相同的id标志。

本发明的树对于树型式的大数据量动态显示基本达到显示界面的要求，并且易于移植易于推广，可以和本地程序的树型结构相媲美，从而在B/S结构的发展过程中起到了推进的作用。

附图说明

下面结合附图对本发明进一步详细地说明：

图1是在B/S结构中实现树型结构的系统总体结构示意图；

图2是典型的树结构示意图。

具体实施方式

下面参照本发明的附图，更详细地描述出本发明的最佳实施例。

图1所示为在B/S结构中实现树型结构的系统总体结构示意图，本发明中主要用到了五个层次的技术，本发明可以转移到各个B/S结构平台上。在这里先以应用最广的java做例子来说明。

1.与生成数据的其他部分的接口。(接口配置文件、调用参数设置)。

2.服务器端树数据的采集生成代码的逻辑处理部件。(java)

3.服务器端动态页面生成程序。(jsp)

4.客户端页面动态的脚本语言。(JavaScript)

5.客户端的静态页面语法。(Html)

典型的树结构如图2所示，根据本发明的在B/S结构中实现树型结构的方法涉及到以下几个层面的操作：

设置生成数据的接口：

这一层次通过对配置文件信息的设置完成对树显示的设置。在这一层次的设置方法为将需要设置的信息写入配置的ini文件。每次服务器重新启动会自动读取一次设置初始信息，此后此信息将放在内存中以供显示时候调用。

静态样式用户可以自由配置，主要方面如下：

1)初始化时打开显示节点的等级：-1表示所有节点；0表示显示根节点；

1表示显示1级节点......

2)是否保留根节点。可以不显示根节点；

3)按钮上字体的字型；

4)按钮上字体大小；

5)默认名称字体颜色，树中节点文字标签的默认显示字体颜色；

6)当前激活字体颜色。树中节点文字标签被单击后的字体颜色；

7)target属性。树中的资源被点击后显示资源的位置。B/S结构中可以显示在当前页位置，新开的浏览器中的位置，框架中父层的位置，及制定框架中的其他位置等；

8)图片路径、图片位置。树中由于显示的节点都是有按钮图片显示的，用户可以自己设置显示的图片，以达到自己的要求；

9)数据显示距离顶部的象素值；

10)菜单距离左侧的象素值；

11)菜单高度；

12)背景色；

13)图标间的距离；

14)图标宽度；

15)图标高度。

动态数据传入：

动态数据主要由调用方程序传入一个列表，将要显示的数据传入本发明。传入主要信息如下：

节点1：父节点id、显示的在节点中的字符标签、该节点的树中代码、树节点的层次、数据类型、状态、节点id、链接id

节点2：......这些信息可以是从数据库或其他的方式得到的。

服务器端的信息采集和树的生成结构：

在这一层中，完成了树生成的函数，本发明在此层次主要运用了两个部分：一个是节点对象，一个是树对象，节点对象由树对象引用。外界只操作树对象就可以。在这部分主要完成树生成的内部逻辑操作，为页面生成部分提供函数接口。节点对象主要完成对传入的各个节点信息的组织及以记录各自图片、链接等问题。在此对象中有：

1)对节点信息的添加和管理的方法；

2)判断是否是根节点；

3)判断是否打开节点；

4)判断是否是第一个节点；

5)判断是否是最后一个节点；

6)判断是否相等。

树对象完成整棵树的生成操作，生成的时间是调用者在其他网页生成时调用的本页面。具体的调用过程在服务器页面生成层说明。

本层本对象实现过程主要如下：

1)设置和管理属性；

2)添加树的根节点；

3)添加子节点；

4)获取节点信息；

5)显示脚本；

6)显示树；

7)显示节点。

在页面显示的脚本语言及脚本中用到的html对象都在这个层中保存，最后调用显示树的函数生成代码。

服务器端动态页面生成jsp：

在这一层中主要是对生成的页面布局进行设置，并可以根据布局的不同在当前页面中对树的显示属性再次进行设置。设置的方法在前面的树对象中已经提供。此层的操作流程大致如下：

1)设置页面的布局；

2)在页面引入树对象。并调用树的方法进行树的设置；

3)将得到的需要显示的信息放入树中；

4)调用树的显示方法将树显示在页面上。

本层的作用是整合服务器端的功能，将服务器端的工作变为服务器端生成的结果，即客户端脚本，和html对象放入客户端。

客户端网页动态脚本层：

客户端充分考虑到在大信息量下的网络压力和大信息量下的页面显示速度。需要服务器端传递给客户端的信息尽量少。并且为了解决客户端的浏览器响应比较慢、网络延迟比较大的问题，选择在用户对页面进行一次请求后将树的信息下载到本地。再由JavaScript脚本来管理执行。这样既保证了信息的准确与及时，又保证了用户操作的方便与舒适。按照这样的思路需要将客户端的树据信息尽量地减小，在客户端运行的时候尽量地提高效率。

本发明通过一个树节点的id就可以完全的控制和切换树的图片和信息。这里通过传入的id值对在静态页面中存储的数据以div的方式控制其显示。本层的工作主要体现在如下的方面：

1)完整地显示一棵树。

2)控制树中各个节点的图片。

3)控制各个节点的文字颜色。

4)控制各个节点的位置与显示。

5)执行各个节点的打开与关闭的操作。

6)执行各个节点的子节点的控制与操作。

在树的信息中需要将页面信息的显示方式与JavaScript的函数相结合使用才能将页面中和网络上传输的数据减至最少。

Html静态页面的显示作用：

这一层主要是保存树中的数据，及配合页面的脚本进行数据的显示，在这一层主要用的方法是将树中的同一个父节点的子节点以div的形式显示在页面中。并且在对显示的图标图片进行命名时尽量考虑到可以切换的方便。将相同的节点的相关数据命名时以相同的id标志。结构如下：

<div层id，是否显示>

<显示一个节点的表格>

<前置的图片>

<可切换样式的图片标明id、节点的相关信息、存储的已打开和已关闭状态图片的信息、当前显示的图片的信息>

<节点点击后链接的资源信息，及点击后树显示变换的函数><节点文字的id，节点文字的显示样式>节点需显示的文字

<显示一个节点的表格完>

<另一个节点的表格>

<另一个节点的表格完>

<div层结束>

本发明的树对于树型式的大数据量动态显示基本达到显示界面的要求，并且易于移植易于推广，可以和本地程序的树型结构相媲美。从而在B/S结构的发展过程中起到了推进的作用。

尽管为说明目的公开了本发明的最佳实施例和附图，但是本领域的技术人员可以理解：在不脱离本发明及所附的权利要求的精神和范围内，各种替换、变化和修改都是可能的。因此，本发明不应局限于最佳实施例和附图所公开的内容。

Claims (6)

1.一种在B/S结构中实现树型结构的方法，具体通过以下方式实现：

1)设置生成数据的接口：

通过对配置文件信息的设置完成对树显示的设置，将需要设置的信息写入配置的ini文件；

2)用户自由配置静态样式；

3)动态数据传入：

动态数据由调用方程序传入一个列表，将要显示的数据传入；

4)服务器端的信息采集和树的生成结构：

通过运用了两个部分，一个是节点对象，一个是树对象，节点对象由树对象引用，完成了树生成的函数；

5)服务器端动态页面生成jsp：

对生成的页面布局进行设置，并可以根据布局的不同在当前页面中对树的显示属性再次进行设置；

6)客户端网页动态脚本层：

客户端选择在用户对页面进行一次请求后将树的信息下载到本地，通过一个树节点的id完全的控制和切换树的图片和信息，通过传入的id值对在静态页面中存储的数据以div的方式控制其显示；

7)Html静态页面的显示作用：

保存树中的数据，将树中的同一个父节点的子节点，以div的形式显示在页面中，并且配合页面的脚本进行数据的显示。

2.根据权利要求1所述的在B/S结构中实现树型结构的方法，其特征在于，服务器端动态页面生成jsp的操作流程主要有：

1)设置页面的布局；

2)在页面引入树对象，并调用树的方法进行树的设置；

3)将得到的需要显示的信息放入树中；

4)调用树的显示方法将树显示在页面上。

3.根据权利要求1所述的在B/S结构中实现树型结构的方法，其特征在于：客户端网页动态脚本层，将页面信息的显示方式与JavaScript的函数相结合使用，来将页面中和网络上传输的数据减至最少。

4.根据权利要求1所述的在B/S结构中实现树型结构的方法，其特征在于：树对象完成整棵树的生成操作，所述树对象的实现过程如下：

1)设置和管理属性；

2)添加树的根节点；

3)添加子节点；

4)获取节点信息；

5)显示脚本；

6)显示树；

7)显示节点。

5.根据权利要求1所述的在B/S结构中实现树型结构的方法，其特征在于，静态样式用户可以配置以下方面：

1)初始化时打开显示节点的等级；

2)是否保留根节点；

3)按钮上字体的属性；

4)目标属性；

5)菜单属性；

6)图标属性。

6.根据权利要求1所述的在B/S结构中实现树型结构的方法，其特征在于：动态数据传入的主要信息有节点的父节点id、显示的在节点中的字符标签、该节点的树中代码、树节点的层次、数据类型、状态、节点id、链接id。