CN103970846A - 一种数据显示方法及装置 - Google Patents

Abstract

本发明提出了一种数据显示方法及装置，该方法包括：将HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序前后颠倒，得到HTML模板中以右开树形式存储的数据文件，进行展示。该装置包括：右开树展示模块和关系建立模块。本发明弥补了传统的自左向右树形展示的不足，能够展示自右向左展开的树形结构的数据文件。当在一个界面上展示两个树形结构的数据文件时，两个树相对打开，还能建立两个树上同一数据元素之间的关联关系并显示出来，使用户能够获得更全面的信息。

Description

一种数据显示方法及装置

技术领域

本发明涉及数据显示技术领域，尤其涉及一种数据显示方法及装置。

背景技术

目前在HTML(Hypertext Markup Language，超文本标记语言)模板中可以以树形结构的形式来展示数据文件。树形结构指的是数据元素之间，存在着的“一对多”的树形关系的数据结构。在树形结构中，树根节点没有前驱节点，其余每个节点有且只有一个前驱节点。叶子节点没有后续节点，其余每个节点的后续节点数可以是一个也可以是多个。

通常的树形结构展示是左开树，自左向右的展开，用来表示数据的从属和并列关系。不同的树若均包含同一个数据元素，则能够从不同的角度反映该数据元素的相关信息，但是现有的树形结构展示方式只能在一个界面上展示一个左开树，不能展示自右向左展开的右开树，更不能同时展示两个树以及它们之间的关联关系。

发明内容

本发明要解决的技术问题是，提供一种数据显示方法及装置，能够展示自右向左展开的树形结构的数据文件。

本发明采用的技术方案是，所述数据显示方法，包括：

对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，进行展示。

进一步的，所述将HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，具体包括：

从数据元素节点中的根节点开始，把各数据元素节点的图标置于相应数据元素节点文字的右侧，数据元素节点的展开层级都是右边固定向左展开。

进一步的，所述方法还包括：

在同一界面上分别以左开树形式和右开树形式展示两个数据文件时，基于用户操作建立两个数据文件之间的关联关系并显示出来。

进一步的，所述在同一界面上分别以左开树形式和右开树形式展示两个数据文件，具体包括：

同一界面分为左右两部分，在左半部分以左开树形式展示一个数据文件，在右半部以右开树形式展示另一个数据文件。

进一步的，任一个数据文件的展示过程包括：

在客户端本地进行数据文件的初始化，从服务器端首先获取所述数据文件中数据元素根节点信息及设定级数的子节点信息，并根据用户需要显示出来；

后续再根据用户针对显示的任一个最低一级子节点的展开节点操作，从服务器获取相应的下一级子节点信息并显示出来。

进一步的，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，具体包括：

监听用户的操作，当用户选择查看任一个数据文件中的数据元素节点时，在另一个数据文件中查找是否具有所述数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述数据元素节点，同时建立两个数据文件中同一所述数据元素节点的连线并显示出来；否则不动作。

进一步的，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，还包括：

在两个数据文件均具备滚动条的情况下，若另一个数据文件中的所述数据元素节点在显示时将超出所述界面显示范围，则将所述连线的末端指向所述元素节点所在的方向进行显示；

当通过拖动滚动条使所述数据元素节点出现在所述界面显示范围内时，将所述连线完整的显示出来，并随着所述数据元素节点的位移对所述连线的绘制位置进行调整。

进一步的，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，还包括：

当用户选择查看任一个数据文件中的新数据元素节点时，隐藏上一次选择查看的数据元素节点对应的所述连线，在另一个数据文件中查找是否具有所述新数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述新数据元素节点，同时建立两个数据文件中同一所述新数据元素节点的连线并显示出来。

进一步的，所述方法还包括：

当基于用户的收起操作致使用户选择查看的所述数据元素节点隐藏时，隐藏所述数据元素节点对应的所述连线。

本发明还提供一种数据显示装置，包括：

右开树展示模块，用于对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，进行展示；

关系建立模块，用于在同一界面上分别以左开树形式和右开树形式展示两个数据文件时，基于用户操作建立两个数据文件之间的关联关系并显示出来。

采用上述技术方案，本发明至少具有下列优点：

本发明所述数据显示方法及装置，弥补了传统的自左向右树形展示的不足，能够展示自右向左展开的树形结构的数据文件。当在一个界面上展示两个树形结构的数据文件时，两个树相对打开，还能建立两个树上同一数据元素之间的关联关系并显示出来，使用户能够获得更全面的信息。

附图说明

图1为本发明第二实施例的数据显示方法流程图；

图2为本发明第三实施例数据显示装置组成结构示意图；

图3为本发明第四实施例的右开树的显示效果示意图；

图4为本发明第四实施例的连线的展示效果示意图。

具体实施方式

为更进一步阐述本发明为达成预定目的所采取的技术手段及功效，以下结合附图及较佳实施例，对本发明进行详细说明如后。

本发明第一实施例，一种数据显示方法，包括以下过程：

对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，在界面上自右向左的进行展示。

具体的，所述对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，包括以下处理过程：

在HTML模板中，从数据元素节点中的根节点开始，把各数据元素节点的图标置于相应数据元素节点文字的右侧，数据元素节点的展开层级都是右边固定向左展开，这样显示的方式就同左开树相反了。

本发明第二实施例，一种数据显示方法，本实施例是在第一实施例的基础上将左开树和右开树形式的数据文件显示在同一个界面上，本实施例的所述数据显示方法，如图1所示，包括：

步骤S101，对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件。由于左开树形式的数据文件是本领域的公知技术，故此处不赘述。

步骤S102，在同一界面上分别以左开树形式和右开树形式展示两个数据文件。

具体的，同一界面分为左右两部分，在左半部分以左开树形式展示一个数据文件，在右半部以右开树形式展示另一个数据文件。任一个数据文件的展示过程包括：

在客户端本地进行数据文件的初始化，从服务器端首先获取所述数据文件中数据元素根节点信息及设定级数的子节点信息，并根据用户需要显示出来；

后续再根据用户针对显示的任一个最低一级子节点的展开节点操作，从服务器获取相应的下一级子节点信息并显示出来。本领域技术人员应当知道，若能响应展开节点操作，则该子节点就非叶子节点。

步骤S103，基于用户操作建立两个数据文件之间的关联关系并显示出来。

具体的，在步骤S103中，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，具体包括：

监听用户的操作，当用户选择查看任一个数据文件中的数据元素节点时，在另一个数据文件中查找是否具有所述数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述数据元素节点，同时建立两个数据文件中同一所述数据元素节点的连线并显示出来；否则不动作。

优选的，在两个数据文件均具备滚动条的情况下，若另一个数据文件中的所述数据元素节点在显示时将超出所述界面显示范围，则将所述连线的末端指向所述元素节点所在的方向进行显示；

当通过拖动滚动条使所述数据元素节点出现在所述界面显示范围内时，将所述连线完整的显示出来，并随着所述数据元素节点的位移对所述连线的绘制位置进行调整。

优选的，在步骤S103中，在显示所述连接的同时，还包括可以根据用户的操作隐藏所述连线的过程，具体如下：

当用户选择查看任一个数据文件中的新数据元素节点时，隐藏上一次选择查看的数据元素节点对应的所述连线，在另一个数据文件中查找是否具有所述新数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述新数据元素节点，同时建立两个数据文件中同一所述新数据元素节点的连线并显示出来。

当基于用户的收起操作致使用户选择查看的所述数据元素节点隐藏时，隐藏所述数据元素节点对应的所述连线。

本发明第三实施例，本实施例提供一个与第二实施例的所述数据显示方法对应的一种数据显示装置，如图2所示，包括以下组成部分：

1)右开树展示模块100，用于对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，进行展示。

具体的，在HTML模板中，右开树展示模块100从数据元素节点中的根节点开始，把各数据元素节点的图标置于相应数据元素节点文字的右侧，每个数据元素节点的展开层级都是右边固定向左展开，这样显示的方式就同左开树相反了。

由于左开树形式的数据文件的生成和展示是本领域的公知技术，故此处不赘述。

2)关系建立模块200，用于在同一界面上分别以左开树形式和右开树形式展示两个数据文件时，基于用户操作建立两个数据文件之间的关联关系并显示出来。

具体的，关系建立模块200将同一界面分为左右两部分，在左半部分以左开树形式展示一个数据文件，在右半部以右开树形式展示另一个数据文件。

关系建立模块200具体用于：

监听用户的操作，当用户选择查看任一个数据文件中的数据元素节点时，在另一个数据文件中查找是否具有所述数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述数据元素节点，同时建立两个数据文件中同一所述数据元素节点的连线并显示出来；否则不动作。

优选的，在两个数据文件均具备滚动条的情况下，若另一个数据文件中的所述数据元素节点在显示时将超出所述界面显示范围，则将所述连线的末端指向所述元素节点所在的方向进行显示；

当通过拖动滚动条使所述数据元素节点出现在所述界面显示范围内时，将所述连线完整的显示出来，并随着所述数据元素节点的位移对所述连线的绘制位置进行调整。

优选的，关系建立模块200在显示所述连接的同时，还可以根据用户的操作隐藏所述连线，具体如下：

当用户选择查看任一个数据文件中的新数据元素节点时，隐藏上一次选择查看的数据元素节点对应的所述连线，在另一个数据文件中查找是否具有所述新数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述新数据元素节点，同时建立两个数据文件中同一所述新数据元素节点的连线并显示出来。

当基于用户的收起操作致使用户选择查看的所述数据元素节点隐藏时，隐藏所述数据元素节点对应的所述连线。

本发明第四实施例，在上述实施例的基础上提供一个基于javascript编程环境在HTML模板上实现右开树展示，以及与左开树同屏展示并建立关联关系的应用实例。

本实施例的数据显示方法，包括下列步骤：

步骤1，自右向左的树形结构展示。

具体的，右侧展开树的实现原理和常规的左侧展开树相同，不同处在于每个节点使用的html模版，即将常规左开树的节点的html模版中dom节点的顺序前后颠倒。

ux.tree.RightExpandTreePanel为javascript的一个扩展组件，可以看成是右开树的主面板，用于承载树的所有节点，同时负责控制该右开树的所有节点的展示，数据的加载时机，节点的展开和收起。该扩展组件中主要扩展了TreeLoader对象和TreeNodeUI对象并将其应用到ux.tree.RightExpandTreePanel组件中。TreeLoader对象负责树的初始化和加载，TreeNodeUI对象负责树节点的样式展示。

TreeLoader对象中包含一个ux.tree.RightExpandNodeUI方法：用于渲染组件节点的元素，控制树节点缩进规则和节点图标的切换工作。对于右开树来说，节点图标的切换工作包括：动态切换节点右端的图标，使节点在展开和收起状态时展示不同的图标。

TreeNodeUI对象中包含一个ux.tree.RightExpandTreeLoader方法：用于向服务器端发送Ajax请求，并将基于该Ajax请求获得的数据结合ux.tree.RightExpandNodeUI方法渲染到界面上。ux.tree.RightExpandTreeLoader方法中包含以下核心方法：renderElements()方法，用于读取数据元素节点值，将当前树节点对应的数据元素节点添加到界面上，同时每个节点会带有样式。右开树具体的展示效果如图3所示。

步骤2，建立两个树的关系连线。

程序监听树节点的“click”即点击节点事件、“expandnode”即展开节点事件、“collapsenode”即收回节点事件，并作出对应的响应。

当任一个树的节点被选中时，另一个树上会通过节点ID自动查找相对应的相同节点，找到后会尝试展开该节点，然后连接被单击的节点和找到的节点，同时尝试查找直属子节点中是否有相同的节点，有则进行连接。该扩展组件的TreeNodeUI对象的ux.tree.TreeNodeLink方法，用于实现两个树的节点之间的连线，可以自定义线条的颜色和样式。连线的展示效果如图4所示。

当被选中的节点发生改变时，连接线会自动隐藏并重新建立。

当出现滚动条时，程序会监听滚动条的滚动事件，并经过相应的坐标转换后，重新绘制链接线。

与现有的自左向右树形展示法相比，本发明弥补了传统的自左向右树形展示的不足，在需要两个树来展示数据的时候，更能直观的表现两个树形结构之间的关系。

通过具体实施方式的说明，应当可对本发明为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图示仅是提供参考与说明之用，并非用来对本发明加以限制。

Claims (10)

1.一种数据显示方法，其特征在于，包括：对超文本标记语言HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，进行展示。

2.根据权利要求1所述的数据显示方法，其特征在于，所述将HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序前后颠倒，得到HTML模板中以右开树形式存储的数据文件，具体包括：

从数据元素节点中的根节点开始，把各数据元素节点的图标置于相应数据元素节点文字的右侧，数据元素节点的展开层级都是右边固定向左展开。

3.根据权利要求1或2所述的数据显示方法，其特征在于，所述方法还包括：

在同一界面上分别以左开树形式和右开树形式展示两个数据文件时，基于用户操作建立两个数据文件之间的关联关系并显示出来。

4.根据权利要求3所述的数据显示方法，其特征在于，所述在同一界面上分别以左开树形式和右开树形式展示两个数据文件，具体包括：

同一界面分为左右两部分，在左半部分以左开树形式展示一个数据文件，在右半部以右开树形式展示另一个数据文件。

5.根据权利要求4所述的数据显示方法，其特征在于，任一个数据文件的展示过程包括：

在客户端本地进行数据文件的初始化，从服务器端首先获取所述数据文件中数据元素根节点信息及设定级数的子节点信息，并根据用户需要显示出来；

后续再根据用户针对显示的任一个最低一级子节点的展开节点操作，从服务器获取相应的下一级子节点信息并显示出来。

6.根据权利要求3所述的数据显示方法，其特征在于，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，具体包括：

监听用户的操作，当用户选择查看任一个数据文件中的数据元素节点时，在另一个数据文件中查找是否具有所述数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述数据元素节点，同时建立两个数据文件中同一所述数据元素节点的连线并显示出来；否则不动作。

7.根据权利要求6所述的数据显示方法，其特征在于，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，还包括：

在两个数据文件均具备滚动条的情况下，若另一个数据文件中的所述数据元素节点在显示时将超出所述界面显示范围，则将所述连线的末端指向所述元素节点所在的方向进行显示；

当通过拖动滚动条使所述数据元素节点出现在所述界面显示范围内时，将所述连线完整的显示出来，并随着所述数据元素节点的位移对所述连线的绘制位置进行调整。

8.根据权利要求6所述的数据显示方法，其特征在于，所述基于用户操作建立两个数据文件之间的关联关系并显示出来，还包括：

当用户选择查看任一个数据文件中的新数据元素节点时，隐藏上一次选择查看的数据元素节点对应的所述连线，在另一个数据文件中查找是否具有所述新数据元素节点，若是，则在界面上展开显示出另一个数据文件中的所述新数据元素节点，同时建立两个数据文件中同一所述新数据元素节点的连线并显示出来。

9.根据权利要求6所述的数据显示方法，其特征在于，所述方法还包括：

当基于用户的收起操作致使用户选择查看的所述数据元素节点隐藏时，隐藏所述数据元素节点对应的所述连线。

10.一种数据显示装置，其特征在于，包括：

右开树展示模块，用于对HTML模板中以左开树形式存储的数据文件中的数据元素节点的顺序进行调整，得到HTML模板中以右开树形式存储的数据文件，进行展示；

关系建立模块，用于在同一界面上分别以左开树形式和右开树形式展示两个数据文件时，基于用户操作建立两个数据文件之间的关联关系并显示出来。