CN101587437A - 树型控件设计及生成系统及方法 - Google Patents

Abstract

本发明提供一种树型控件设计及生成方法，包括：根据客户端计算机的浏览器类型创建一个XmlHttp对象；通过客户端计算机的浏览器在树型控件页面选择一个目录；通过上述的XmlHttp对象向应用服务器发送查询该目录信息的请求；根据该请求，从一个数据库中查询对应的具有树型目录结构的数据，以获得该目录的信息以及该目录下的子目录信息；根据上述获得的该目录信息及其子目录信息，生成一个数据结构；根据上述生成的数据结构生成Html代码；及当上述Html代码生成后，根据该Html代码生成树型控件。本发明还提供一种树型控件设计及生成系统。本发明可以生成多样式、美观的树型控件，且使该生成的树型控件具有传输数据速度快、耗费资源小，并可以自订事件的特性。

Description

树型控件设计及生成系统及方法

技术领域

本发明涉及一种控件设计及生成系统及方法，尤其涉及一种树型控件设计及生成系统及方法。

背景技术

在网页的设计与开发过程中，经常要利用到树型控件这种表现形式，比如表示文件目录结构，表现网站结构地图等。对于这些具备一定继承关系的结构化信息，树型控件是最佳的表现形式。

所述树型控件是一种用户界面控件，被广泛地用来显示层次型数据。树型控件具有独特的扩展和折叠分支的能力，能够以较小的空间显示出大量的信息，一目了然地传达出数据之间的层次关系。

然而，对于网页的设计与开发人员来说，传统的树型控件存在以下缺陷：

1)数据传输慢、滞后严重。对于传统的树型控件，其读取数据的方式是从一个数据库或者文件中将一个树型结构的所有目录，包括根目录及各层子目录的数据全部读出，组成一个数据结构。当一个树型结构有上万个子目录时，其生成数据结构时会耗费很多时间，因此，造成传统的树型控件传输数据的速度很慢。此外，传统的树型控件在传输数据时是采用同步的方式，即由客户端浏览器提交请求->服务器对上述请求进行处理->处理完毕后返回结果给客户端浏览器(在服务器对请求进行处理期间客户端浏览器不能干任何事)。当客户端浏览器没有发出请求时，服务器不会做任何处理，这就会造成当数据库或者文件中的数据发生改变时，除非客户端浏览器发出刷新请求，重新生成数据结构，否则在客户端浏览器上表现的数据不会发生任何改变，因此造成信息传输滞后严重。

2)功能单一。传统树型控件只能实现点击、查看的功能，用户几乎不可能自订树型控件的鼠标单击事件、键盘事件等，在提倡交互性的时代，这点是很难接受的。

3)外观单一、固定。传统树型控件千篇一律的风格对于界面要求较高的网站来说是不可接受的。

发明内容

鉴于以上内容，有必要提出一种树型控件设计及生成系统，其可以生成多样式、美观的树型控件，且使该生成的树型控件具有传输数据速度快、耗费资源小，并可以自订事件的特性。

此外，还有必要提出一种树型控件设计及生成方法，其可以生成多样式、美观的树型控件，且使该生成的树型控件具有传输数据速度快、耗费资源小，并可以自订事件的特性。

一种树型控件设计及生成系统，包括一台数据库、一台应用服务器及多台客户端计算机。所述应用服务器与所述数据库和所述客户端计算机通信连接。所述数据库用于存储各种具有树型目录结构的数据。其中，所述的应用服务器包括：查询模块、数据结构生成模块及代码生成模块；及所述的客户端计算机包括：创建模块、发送模块、监听模块及树型控件生成模块。所述的创建模块用于根据客户端计算机的浏览器类型创建一个XmlHttp对象。所述的发送模块用于当用户通过客户端计算机的浏览器在树型控件页面选择一个目录时，通过上述的XmlHttp对象，应用一种查询和读取数据的方法、采用异步方式向应用服务器发送查询该目录信息的请求。所述的查询模块用于根据上述发送模块发送的查询目录信息的请求，从数据库中查询对应的具有树型目录结构的数据，以获得该目录的信息以及该目录下的子目录信息。所述的数据结构生成模块用于根据上述获得的该目录信息及其子目录信息，生成一个数据结构。所述的代码生成模块用于根据上述生成的数据结构生成Html代码。所述监听模块用于监听代码生成模块，以判断该代码生成模块是否已经将Html代码生成完毕。所述的树型控件生成模块用于当上述Html代码生成完毕时，根据生成的Html代码、采用Dom技术生成树型控件，其中，所述Dom技术指的是文档对象模型技术。

一种树型控件设计及生成方法，该方法包括如下步骤：根据客户端计算机的浏览器类型创建一个XmlHttp对象；用户通过客户端计算机的浏览器在树型控件页面选择一个目录；通过上述的XmlHttp对象，应用一种查询和读取数据的方法、采用异步方式向应用服务器发送查询该目录信息的请求；根据上述发送的查询目录信息的请求，从一个数据库中查询对应的具有树型目录结构的数据，以获得该目录的信息以及该目录下的子目录信息；根据上述获得的该目录信息及其子目录信息，生成一个数据结构；根据上述生成的数据结构生成Html代码；监听Html代码的生成进度，以判断该Html代码是否生成完毕；及当上述Html代码生成完毕时，根据生成的Html代码、采用Dom技术生成树型控件，其中，所述Dom技术指的是文档对象模型技术。

相较于现有技术，本发明所提供的树型控件设计及生成系统及方法在生成树型控件时，只生成两层目录的数据结构，其他层目录的数据结构在交互过程中实时产生，因此增加了树型控件传输数据的速度，而且能动态更新反映数据的变化。

附图说明

图1是本发明树型控件设计及生成系统较佳实施例的硬件架构图。

图2是图1所示应用服务器与客户端计算机的功能模块图。

图3是本发明树型控件设计及生成系统较佳实施例的实施流程图。

具体实施方式

如图1所示，是本发明树型控件设计及生成系统较佳实施例的硬件架构图。该系统主要包括数据库1、应用服务器2及多台客户端计算机4。所述数据库1连接于应用服务器2，主要用于存储各种具有树型目录结构的数据。所述的应用服务器2主要用于实现树型控件的设计及生成操作。所述多台客户端计算机4通过网络3连接于应用服务器2，主要用于提供一个交互式的用户界面，用户通过该用户界面可以实现与应用服务器2的数据交互等操作。所述的网络3可以是国际互联网络、局域网络、或者其他适用的网络类型。

如图2所示，是图1中应用服务器2及客户端计算机4的功能模块图。所述的应用服务器2主要包括：查询模块20、数据结构生成模块21、代码生成模块22及数据库更新模块23。所述的客户端计算机4主要包括：创建模块40、发送模块41、更新模块42、监听模块43、树型控件生成模块44、事件增加模块45及Css样式修改模块46。

以下根据设计及生成树型控件的数据流向来说明上述各模块的功能用途。

所述的创建模块40主要用于根据客户端计算机4的浏览器类型创建一个XmlHttp对象。所述Xmlhttp是一种浏览器对象，可用于模拟Http的Get和Post请求(所述Get是用来从应用服务器2获取数据的请求，所述Post是用来向应用服务器2传递数据的请求)，在JavaScript语言环境中实现客户端计算机4中的页面数据在无刷新下的定时数据更新。其中，若客户端计算机4的浏览器类型为IE浏览器，则该创建模块20通常使用IE浏览器内置的控件直接新创建一个XmlHttp对象；否则，若客户端计算机4的浏览器为其他类型的浏览器，如Firefox、Opera等，则该创建模块20直接引用该浏览器中自带的Xmlhttp对象。

所述发送模块41主要用于当用户通过客户端计算机4的浏览器在树型控件页面选择一个目录时，通过上述的XmlHttp对象，应用一种查询和读取数据的方法、采用异步方式向应用服务器2发送查询该目录信息的请求。所述查询和读取数据的方法是Get方法。所述异步方式是与同步方式相对，即通过事件触发一个请求后，应用服务器2处理该请求时客户端计算机4上的浏览器仍然可以响应其他事情的处理，在处理完毕后返回结果给客户端计算机4上的浏览器。

所述更新模块42主要用于将客户端计算机4的浏览器上的树型控件页面更新为查询状态。将树型控件页面更新为查询状态可以告知客户端计算机4的用户，应用服务器2已经接收到查询目录信息的请求并正在执行该请求，以提高互动性，改善用户体验。

所述的查询模块20主要用于根据上述发送模块41发送的查询目录信息的请求，从数据库1中查询对应的具有树型目录结构的数据，以获得该目录的名称、标识等，以及该目录下的子目录信息，该子目录信息包括各子目录的名称、标识等。

所述的数据结构生成模块21主要用于根据上述获得的该目录信息及其子目录信息，生成一个数据结构。

所述的代码生成模块22主要用于根据上述生成的数据结构生成Html代码。

所述的监听模块43主要用于通过XmlHttp对象监听上述Html代码的生成进度，判断其是否生成完毕。其中，XmlHttp对象中的一个ReadyState属性能够反映出应用服务器2在生成Html代码时的进度状况，并可以返回一个属性值，客户端计算机4可以根据该属性值判断Html代码的生成进度。

所述的树型控件生成模块44主要用于当上述Html代码生成完毕时，根据该Html代码、采用Dom技术生成树型控件。所述Dom是文档对象模型Document Objeet Model的缩写，其提供了一个API(Application Programming Interface，应用编程接口)，允许用户添加、编辑、移动或删除树型控件中的任意目录。

所述的事件增加模块45主要用于增加用户设定的自订事件，如鼠标单击事件等。所述的鼠标单击事件可以包括，用鼠标左键点击一个目录时，则选定该目录并使该选中的目录变颜色；用鼠标右键点击一个目录时，则产生一个编辑菜单，该编辑菜单中可以包括多个操作事件：新增同级目录、修改目录名称、新增子目录及删除目录等。

所述的数据库更新模块23主要用于当用户通过设定的自订事件进行事件操作时，例如，通过在点击鼠标右键产生的编辑菜单中新增子目录，则对数据库1中对应的数据进行更新操作。

所述的Css样式修改模块48主要用于利用Css技术，根据用户的设定修改Css样式从而改变树型控件的外观。所述Css技术是一种样式表(stylesheet)的技术，也可称之为层叠样式表(Cascading Stylesheet)，通过Css技术，可以有效地对树型控件的布局、字体、颜色、背景和其它效果进行修改。

参阅图3所示，是本发明树型控件设计及生成系统较佳实施例的实施流程图。

步骤S100，创建模块20根据客户端计算机4的浏览器类型创建一个XmlHttp对象。若客户端计算机4的浏览器类型为IE浏览器，则该创建模块20通常使用IE浏览器内置控件的方式直接新创建一个XmlHttp对象；否则，若客户端计算机4的浏览器为其他类型的浏览器，如Firefox、Opera等，则该创建模块20直接引用该浏览器中自带的Xmlhttp对象。

步骤S101，用户通过客户端计算机4的浏览器在树型控件页面选择一个目录。

步骤S102，发送模块41通过上述的XmlHttp对象，应用一种查询和读取数据的方法方法、采用异步方式向应用服务器2发送查询该目录信息的请求。所述查询和读取数据的方法可以是Get方法。

步骤S103，更新模块42将客户端计算机4的用户浏览器的树型控件页面更新为查询状态。

步骤S104，查询模块20根据上述发送模块41发送的查询目录信息的请求，从数据库1中查询对应的具有树型目录结构的数据，获得该目录的名称、标识等，以及该目录下的子目录信息，该子目录信息包括各子目录的名称、标识等，并由数据结构生成模块21根据上述查询的该目录信息及其子目录信息，生成一个数据结构。

步骤S105，代码生成模块22根据上述生成的数据结构生成Html代码。

步骤S106，监听模块43通过XmlHttp对象监听上述的代码生成模块22，判断其Html代码是否生成完毕。若没有完毕，则返回步骤S105。

否则，若Html代码生成完毕时，在步骤S107中，树型控件生成模块44根据该Html代码、采用Dom技术生成树型控件。

步骤S108，用户根据需要判断是否需要增加自订事件。若不需要，则直接进入步骤S110。

否则，若需要增加自订事件，则进入步骤S109，事件增加模块45根据用户的设定增加自订事件，如鼠标单击事件等。所述的鼠标单击事件包括，用鼠标左键点击一个目录，则选定该目录并使该选中的目录变颜色；用鼠标右键点击一个目录，则产生一个编辑菜单。所述的编辑菜单中可以包括多个操作事件：新增同级目录、修改目录名称、新增子目录及删除目录等。

步骤S110，用户根据需要判断是否需要改变树型控件的外观。若不需要，则直接进入步骤S112。

否则，若需要改变树型控件的外观，则进入步骤S111，Css样式修改模块48利用Css技术，根据用户的设定修改Css样式从而改变树型控件的外观。

步骤S112，用户根据需要判断是否需要增加操作事件。若不需要，则直接进入步骤S116。

否则，若需要增加操作事件，则进入步骤S113，事件增加模块45根据设定的自订事件，接收用户对该目录设定的操作事件。

步骤S114，发送模块41通过上述的XmlHttp对象，采用Get方法发送该目录的标识及该设定的操作事件给应用服务器2。

步骤S115，数据库更新模块23对数据库1中对应的数据进行更新操作。

步骤S116，更新模块42对该目录进行局部更新。

步骤S117，发送模块41判断用户是否选择了其他的目录。若用户选择了其他的目录，则返回步骤S102。

否则，若用户没有选择其他目录，则结束流程。

Claims (10)

1.一种树型控件设计及生成系统，包括数据库、应用服务器及客户端计算机，所述应用服务器与所述数据库和所述客户端计算机通信连接，所述数据库用于存储各种具有树型目录结构的数据，其特征在于，所述的应用服务器包括查询模块、数据结构生成模块及代码生成模块，所述的客户端计算机包括创建模块、发送模块、监听模块及树型控件生成模块，其中：

所述的创建模块用于根据客户端计算机的浏览器类型创建一个XmlHttp对象；

所述的发送模块用于当用户通过客户端计算机的浏览器在树型控件页面选择一个目录时，通过上述的XmlHttp对象，应用一种查询和读取数据的方法、采用异步方式向应用服务器发送查询该目录信息的请求；

所述的查询模块用于根据上述发送模块发送的查询目录信息的请求，从数据库中查询对应的具有树型目录结构的数据，以获得该目录的信息以及该目录下的子目录信息；

所述的数据结构生成模块用于根据上述获得的该目录信息及其子目录信息，生成一个数据结构；

所述的代码生成模块用于根据上述生成的数据结构生成Html代码；

所述监听模块用于监听代码生成模块，以判断该代码生成模块是否已经将Html代码生成完毕；及

所述的树型控件生成模块用于当上述Html代码生成完毕时，根据生成的Html代码、采用Dom技术生成树型控件，其中，所述Dom技术指的是文档对象模型技术。

2.如权利要求1所述的树型控件设计及生成系统，其特征在于，所述的客户端计算机还包括：

更新模块，用于当发送模块发送查询目录信息的请求时，将客户端计算机的浏览器上的树型控件页面更新为查询状态。

3.如权利要求1所述的树型控件设计及生成系统，其特征在于，所述的客户端计算机还包括：

事件增加模块，用于增加用户自订的事件，该自订事件包括：用鼠标左键点击一个目录时选定该目录并使该选中的目录变颜色；用鼠标右键点击一个目录时产生一个编辑菜单，所述编辑菜单中包括多个操作事件：新增同级目录、修改目录名称、新增子目录及删除目录。

4.如权利要求3所述的树型控件设计及生成系统，其特征在于，所述的应用服务器还包括：

数据库更新模块，用于当用户通过设定的自订事件增加了操作事件时，对数据库中对应的具有树型目录结构的数据进行更新操作。

5.如权利要求1所述的树型控件设计及生成系统，其特征在于，所述的客户端计算机还包括：

Css样式修改模块，用于利用Css技术，根据用户的设定修改Css样式从而改变树型控件的外观，所述Css技术指的是一种样式表技术。

6.一种树型控件设计及生成方法，其特征在于，该方法包括如下步骤：

根据客户端计算机的浏览器类型创建一个XmlHttp对象；

用户通过客户端计算机的浏览器在树型控件页面选择一个目录；

通过上述的XmlHttp对象，应用一种查询和读取数据的方法、采用异步方式向应用服务器发送查询该目录信息的请求；

根据上述发送的查询目录信息的请求，从一个数据库中查询对应的具有树型目录结构的数据，以获得该目录的信息以及该目录下的子目录信息；

根据上述获得的该目录信息及其子目录信息，生成一个数据结构；

根据上述生成的数据结构生成Html代码；

监听Html代码的生成进度，以判断该Html代码是否生成完毕；及

当上述Html代码生成完毕时，根据生成的Html代码、采用Dom技术生成树型控件，其中，所述Dom技术指的是文档对象模型技术。

7.如权利要求6所述的树型控件设计及生成方法，其特征在于，于步骤发送查询目录信息的请求之后，该方法还包括：

将客户端计算机的浏览器上的树型控件页面更新为查询状态。

8.如权利要求6所述的树型控件设计及生成方法，其特征在于，该方法还包括：

根据用户的需要增加自订事件，该自订事件包括：用鼠标左键点击一个目录时选定该目录并使该选中的目录变颜色；用鼠标右键点击一个目录时产生一个编辑菜单，所述编辑菜单中包括多个操作事件：新增同级目录、修改目录名称、新增子目录及删除目录。

9.如权利要求8所述的树型控件设计及生成方法，其特征在于，该方法还包括：

当用户通过设定的自订事件增加了操作事件时，对所述数据库中对应的具有树型目录结构的数据进行更新操作。

10.如权利要求6所述的树型控件设计及生成方法，其特征在于，该方法还包括：

根据用户的需要利用Css技术，修改Css样式从而改变树型控件的外观，所述Css技术指的是一种样式表技术。