CN101799753A

CN101799753A - 一种实现树形结构的方法及装置

Info

Publication number: CN101799753A
Application number: CN 200910242784
Authority: CN
Inventors: 杨宁; 王宇飞; 王能; 方国
Original assignee: State Grid Corp of China SGCC; China Electric Power Research Institute Co Ltd CEPRI
Current assignee: State Grid Corp of China SGCC; China Electric Power Research Institute Co Ltd CEPRI
Priority date: 2009-12-17
Filing date: 2009-12-17
Publication date: 2010-08-11
Anticipated expiration: 2029-12-17
Also published as: CN101799753B

Abstract

本发明公开了一种实现树形结构的方法，该方法包括：确定用户在页面文件中为树形结构指定的元数据，所述元数据为所述树形结构特有的业务逻辑代码；当需要展现页面中的树形结构时，解析所述页面文件中的元数据；将解析获得的元数据信息与树形结构模板代码相结合，获得展现树形结构所需的数据，并返回给浏览器，以便浏览器在页面中展现相应的树形结构；所述树形结构模板代码为预先抽象出的所有树形结构的公用代码。通过本发明，提高了代码的可复用性，提高了实现树形结构的效率。

Description

一种实现树形结构的方法及装置

技术领域

本发明涉及Web应用领域，特别是涉及一种实现树形结构的方法及装置。

背景技术

随着信息化技术的发展，各种信息化的web应用***越来越多。用树形结构展现数据在web应用中有着很广泛的应用，如用于显示带有上下级关系的组织结构和用户关系、用于显示层级的菜单等等。树形结构能最直观地呈现出数据间的父子关系。

树形结构最基本的单元是节点，一个常见的树形结构包括根节点、分支节点和叶子节点。在客户端应用程序中一般通过使用的开发语言提供的树形控件来实现，而在web应用程序中因为没有相应的控件，需要采用其它如JavaScript、CSS等页面技术来实现。

目前最常见的技术方案是采用JavaScript来实现的。在浏览器端页面中加入树形结构的HTML、JavaScript代码，在服务器端编写组织树形结构数据的业务代码，浏览器端通过解析服务端返回的数据，最终展现出树形结构。针对不同的业务场景，程序员需要编写大量不同的树形结构HTML代码、JavaScript代码和服务器端的业务代码来实现所需的显示效果。

但是，树形结构的JavaScript代码及服务器端的业务代码通常很复杂，每实现一个树形结构都需要重新编写代码，使得实现树形结构的效率非常低；而且展现树形结构的代码与服务端的业务代码对应，代码复用性差。

发明内容

有鉴于此，本发明的目的在于提供一种实现树形结构的方法及装置，能够通过提高实现树形结构的效率，提高代码的复用性。

为实现上述目的，本发明提供了如下方案：

一种实现树形结构的方法，包括：

确定用户在页面文件中为树形结构指定的元数据，所述元数据为所述树形结构特有的业务逻辑代码；

当需要展现页面中的树形结构时，解析所述页面文件中的元数据；

将解析获得的元数据信息与树形结构模板代码相结合，获得展现树形结构所需的数据，并返回给浏览器，以便浏览器在页面中展现相应的树形结构；所述树形结构模板代码为预先抽象出的所有树形结构的公用代码。

优选的，所述确定用户在页面文件中为树形结构指定的元数据包括：

通过接收用户在页面文件中为树形结构指定的元数据ID，确定所述元数据；

所述解析所述页面文件中的元数据包括：

通过所述元数据ID加载相应的元数据，并进行解析。

接收用户在页面上为树形结构选择的特有业务逻辑；

根据所述特有业务逻辑生成相应的元数据，并将所述生成的元数据作为用户指定的元数据。

优选的，所述元数据中的配置信息包括：

树的后台数据模型、后台数据模型的过滤条件、树的分层读取信息、树的层次属性、点击节点属性、右键点击节点属性及事件扩展属性。

优选的，所述后台数据模型的属性包括节点ID、父节点ID及节点类型。

优选的，所述后台数据模型的属性还包括树的级别、节点是否为叶子节点及排序。

一种实现树形结构的装置，包括：

接口单元，用于确定用户在页面文件中为树形结构指定的元数据，所述元数据为所述树形结构中特有的业务逻辑代码；

解析单元，用于当需要展现页面中的树形结构时，解析所述页面文件中的元数据；

组装单元，用于将解析获得的元数据信息与树形结构模板代码相结合，获得展现树形结构所需的数据，并返回给浏览器，以便浏览器在页面中展现相应的树形结构；所述树形结构模板代码为预先抽象出的所有树形结构的公用代码。

优选的，所述接口单元包括：

第一接收子单元，用于接收用户在页面文件中为树形结构指定的元数据ID：

确定子单元，用于根据所述元数据ID确定所述元数据；

所述解析单元包括：

加载子单元，用于通过所述元数据ID加载相应的元数据；

解析子单元，用于解析所述查找到的元数据。

优选的，所述接口单元包括：

第二接收子单元，用于接收用户在页面上为树形结构选择的特有业务逻辑；

元数据生成子单元，用于根据所述特有业务逻辑生成相应的元数据，并将所述生成的元数据作为用户指定的元数据。

优选的，所述元数据中的配置信息包括：

根据本发明提供的具体实施例，本发明公开了以下技术效果：

本发明通过引入元数据及树形结构模板代码，将树形结构所需的数据信息配置在元数据中，浏览器端代码只是树形结构模板代码和在页面文件中定义的元数据，当浏览器端展现树形结构时，服务器端先加载相应的元数据，再通过解析元数据里面的信息，将解析获得的元数据信息与树形结构模板代码相结合，获得展现树形结构所需的数据，并返回给浏览器，以便浏览器在页面中展现相应的树形结构。因此，树形结构模板代码对于用户而言是透明的，用户无须重新编写这部分代码，也不用关系这部分代码的具体实现，因此提高了代码的复用性；同时，只需要在页面文件中配置元数据，因此，提高了实现树形结构的效率。

附图说明

图1是本发明实施例提供的方法的流程图；

图2是本发明实施例提供的装置的示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

参见图1，本发明实施例提供的实现树形结构的方法包括以下步骤：

S101：确定用户在页面文件中为树形结构指定的元数据，所述元数据为所述树形结构中特有的业务逻辑代码；

为了达到提高实现树形结构的效率、提高代码的复用性的目的，本发明实施例首先抽象出树形结构的JavaScript代码作为基础代码，每个树形结构均使用该基础代码作为树形结构模板代码。这些树形结构模板代码是各树形结构公用的部分，只要实现树形结构，就必须包含有这些代码。也就是说，本发明实施例首先将各树形结构中公用的代码抽取出来，形成树形结构模板代码。用户在实现树形结构时，不需要在重新编写这部分代码，也不需要关心这部分代码是如何实现的。

同时，还需要在后台定义树形结构的后台数据模型，一个树形结构对应的数据模型至少需要包括三个属性：节点ID、父节点ID、节点类型，通过这些属性可以实现树形结构的展现。当然，为了加快展现树形结构的速度，该数据模型中还可以包括其他可选属性，如树的级别、是否为叶子节点及排序等。通过可选属性可以优化后台查询树形结构数据的算法，减少遍历数据的次数，提高***的性能。

当然，每个树形结构也都具有各自特有的业务逻辑代码，这部分特有的业务逻辑代码用来获取树形结构所需的数据信息，包括是否一次性展开、通过哪个对象取数据、节点类型是文本还是链接、是否包含点击事件等等，当然还包括所述后台数据模型的配置信息等。

本发明实施例在提取出树形结构模板代码的同时，还需要将树形结构特有的业务逻辑代码配置在元数据中。树形结构所需的元数据将会形成XML配置文件，通过该配置文件可以定位到具体的元数据。通过元数据可以将要展示的树形结构模板代码与后台数据模型关联起来。

这样，用户在编写树形结构代码时，就只需要在编写的页面文件中指定所需的元数据。其中，用户可以手动地编写元数据中需要的代码并指定代码的ID；例如，用户需要将节点类型设置为文本型，则可以手动地编写实现这一设置的代码，并保存为XML文件，同时可以就文件名等标识指定为该元数据的ID，以便于服务端进行解析时能够准确地定位到该元数据。

当然，也可以为用户提供生成元数据代码的入口，自动生成用户所需的元数据。例如，用户同样需要将节点类型设置为文本型，则可以在页面上为用户提供“节点类型设置”的入口，还可以通过下拉框等方式提示用户选择节点的类型，这样，用户点击选择文本型之后，就可以点击“生成元数据”的按钮，然后可以自动生成相应的元数据。仍然可以将该元数据保存为XML文件，并将需要的元数据ID写入页面文件中即可。

S102：当需要展现页面中的树形结构时，解析所述页面文件中的元数据；

解析所述页面文件中的元数据时，将元数据文件读入到内存，并通过解析xml文件的方式将元数据中定义的信息转换为服务器端的程序对象。

步骤S101中的浏览器端的代码只是树形结构模板代码以及在页面文件中指定的元数据。其中，通过元数据ID来进行元数据的定位时，用户只需要在页面文件中指定元数据ID。

当需要展现页面中的树形结构时，服务端会解析页面文件中的元数据，如果页面文件中保存的是元数据的ID，则可以首先通过元数据的ID加载元数据，然后进行解析。

解析元数据的目的是从数据库中获取到树形结构所需的数据信息，只有获取到具体的数据信息，浏览器端才能展现出树形结构。

S103：将解析获得的元数据信息与树形结构模板代码相结合，服务器端首先加载树形结构模板代码，然后根据解析后的元数据中描述的内容在模板代码中加入业务个性化的代码，最终获得展现树形结构所需的完整代码，并返回给浏览器，以便浏览器在页面中展现相应的树形结构；所述树形结构模板代码为预先抽象出的所有树形结构的公用代码。

解析元数据之后，就可以将解析获得的元数据信息与树形结构模板代码相结合，获得展现树形结构所需的数据。此时获得的展现树形结构所需的数据，相当于是传统方式下用户手动编写的树形结构的全部代码所获得的数据，然后将这些数据返回到浏览器端，这样，浏览器端就可以根据返回的展现树形结构所需的数据展现出相应的树形结构。

也就是说，现有技术中，用户需要编写在服务端编写业务代码，使得服务端可以根据这些业务代码获取树形结构中的数据信息，这些业务代码全部是由用户编写的；但是在本发明实施例中，用户不需要编写树形结构模板代码，只需要指定需要的元数据；在需要展现树形结构时，服务端可以自动解析用户指定的元数据，获取到展现树形结构所需的数据信息，然后浏览器端就可以展现相应的树形结构了。

可见，在本发明实施例中，树形结构模板代码是可以复用的，用户可以不用每次实现树形结构时都编写该部分代码，因此，提高了代码的复用性，而且当需要进行全局性的样式修改时，也容易维护；同时，用户可以采用配置式的方式来实现属性结构的特有业务逻辑代码，将传统方式下需要用户编写的服务端获取树形结构数据的业务代码，转换到元数据中，实现方式统一，这样，当运行期需要修改某个树形结构时，可以直接通过修改配置文件来实现，因此，提高了实现树形结构的效率。

其中，元数据中配置的信息可以包括：

树的后台数据模型：配置元数据展示的后台数据模型；

后台数据模型的过滤条件：配置数据过滤信息；

树的分层读取：一次性读取所有数据还是异步读取数据；第一次展现时展现的层数；异步读取时，每次读取的层数；

节点的层次属性：用于实现树形结构中不同层次具有不同的展现效果，包括节点展现和收起时使用的图片；节点的类型是单选框、多选框、文本还是链接；

点击节点属性：当点击树中节点时执行的函数名称；

右键节点属性：配置当右键节点时显示的菜单内容和点击相应菜单时执行的函数名称；

事件扩展属性：配置树形结构初始化时执行的函数；配置树中节点进行删除操作时执行的函数等，该功能方便用户监控数据变化提供方便。

需要说明的是，本发明同样适用于其它页面展现内容的实现，如列表、tab、级联下拉框等，将这些页面展示场景进行提炼，抽象出可复用的JavaScript代码，然后通过元数据将业务逻辑与相应的JavaScript代码进行关联，展现出不同样式不同功能的内容。

与本发明实施例提供的实现树形结构的方法相对应，本发明实施例还提供了一种实现树形结构的装置，参见图2，该装置包括：

接口单元U201，用于确定用户在页面文件中为树形结构指定的元数据，所述元数据为所述树形结构中特有的业务逻辑代码；

解析单元U202，用于当需要展现页面中的树形结构时，解析所述页面文件中的元数据；

组装单元U203，用于将解析获得的元数据信息与树形结构模板代码相结合，获得展现树形结构所需的数据，并返回给浏览器，以便浏览器在页面中展现相应的树形结构；所述树形结构模板代码为预先抽象出的所有树形结构的公用代码。

通过本发明实施例提供的装置，树形结构模板代码是可以复用的，用户可以不用每次实现树形结构时都编写该部分代码，因此，提高了代码的复用性，而且当需要进行全局性的样式修改时，也容易维护；同时，用户可以采用配置式的方式来实现属性结构的特有业务逻辑代码，将传统方式下需要用户编写的服务端获取树形结构数据的业务代码，转换到元数据中，实现方式统一，这样，当运行期需要修改某个树形结构时，可以直接通过修改配置文件来实现，因此，提高了实现树形结构的效率。

其中，用户可以在页面文件中指定元数据的ID，则可以通过元数据的ID来确定用户需要的元数据，此时，接口单元U201可以包括：

第一接收子单元，用于接收用户在页面文件中为树形结构指定的元数据ID；

确定子单元，用于根据所述元数据ID确定所述元数据；

相应的，解析单元U202可以包括：

加载子单元，用于通过所述元数据ID加载相应的元数据；

解析子单元，用于解析所述查找到的元数据。

在指定元数据时，可以手动编写元数据代码，也可以由工具自动生成，自动生成时，接口单元U201包括：

其中，所述元数据中的配置信息可以包括：树的后台数据模型、后台数据模型的过滤条件、树的分层读取信息、树的层次属性、点击节点属性、右键点击节点属性及事件扩展属性。

其中的后台数据模型至少包含以下属性：节点ID、父节点ID及节点类型。在实际应用中，为了加快树形结构的展现速度，后台数据模型中还可以包括树的级别、节点是否为叶子节点及排序等。

以上对本发明所提供的一种实现树形结构的方法及装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种实现树形结构的方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述确定用户在页面文件中为树形结构指定的元数据包括：

所述解析所述页面文件中的元数据包括：

通过所述元数据ID加载相应的元数据，并进行解析。

3.根据权利要求1所述的方法，其特征在于，所述确定用户在页面文件中为树形结构指定的元数据包括：

接收用户在页面上为树形结构选择的特有业务逻辑；

4.根据权利要求1所述的方法，其特征在于，所述元数据中的配置信息包括：

5.根据权利要求4所述的方法，其特征在于，所述后台数据模型的属性包括节点ID、父节点ID及节点类型。

6.根据权利要求5所述的方法，其特征在于，所述后台数据模型的属性还包括树的级别、节点是否为叶子节点及排序。

7.一种实现树形结构的装置，其特征在于，包括：

8.根据权利要求7所述的装置，其特征在于，所述接口单元包括：

确定子单元，用于根据所述元数据ID确定所述元数据；

所述解析单元包括：

加载子单元，用于通过所述元数据ID加载相应的元数据；

解析子单元，用于解析所述查找到的元数据。

9.根据权利要求8所述的装置，其特征在于，所述接口单元包括：

10.根据权利要求7所述的装置，其特征在于，所述元数据中的配置信息包括：

11.根据权利要求10所述的装置，其特征在于，所述后台数据模型的属性包括节点ID、父节点ID及节点类型。

12.根据权利要求11所述的装置，其特征在于，所述后台数据模型的属性还包括树的级别、节点是否为叶子节点及排序。