CN106155674A - 报表页面展现的方法及装置 - Google Patents

Abstract

本申请的目的是提供一种报表页面展现方法和设备，本申请所述方法和设备通过建立维度组件和展现组件之间的双向绑定信息，并在所述报表页面被触发时，只需处理维度组件和展现组件之间的双向绑定关系以及获取并传递触发事件即可，无需过多干预维度组件和展现组件内部处理数据和过程。因此，本申请所述方法和设备一方面实现了最大程度的解耦，最大程度的利用维度组件和展现组件的自身功能。另一方面大大减少了开发报表页面的代码压力，只需按照API格式提供了相应维度组件和展现组件的接口方法，那么只需要配置相应内容即可快速完成绑定逻辑，从而大大便捷报表页面的前端开发方式。

Description

报表页面展现的方法及装置

技术领域

本申请涉及计算机领域，尤其涉及一种报表页面展现的方法及装置。

背景技术

常见的报表页面展示涉及到的两种组件：维度组件和展现组件。其中，维度组件为供用户选择的各种组件内容；展现组件为展现给用户阅读的报表、图表或其他数据格式内容。

维度组件选择完毕后对应的展现组件会根据变化的参数发起请求获取数据并展示。以往每次开发页面时都需要单独编写大量维度组件和展现组件的关联操作代码，随着组件的增加，关联操作代码的增加会导致开发量会越来越庞大。

现有的解决方法，一种是大量编写相似的JS代码，该方法重复性劳动多，相当费事费力，且不利于解耦；另一种是使用JavaScript MVC框架来实现关联触发函数，其中，JavaScript MVC是一套开放源代码的多样化互联网应用程式框架。JavaScript MVC利用MVC架构(Model View Controller)与工具扩展这些函数库，以便开发与测试。然而，JavaScript MVC框架大部分都比较重量级，上手需要阅读很多文档，使用起来比较复杂。并且缺乏灵活性，偏重于表单提交，不适合报表这样的应用场景，即使使用起来仍需开发一个业务框架进行和组件的封装。

此外，现有技术中数据报表页面也有使用框架功能来做数据关联，但是其关联的不是组件而是方法，因此同样需要去手动编码实现触发后相关的方法。

申请内容

本申请的目的是提供一种报表页面展现方法，以提高报表页面开发效率。

为解决上述技术问题，本申请提供了一种报表页面展现方法，其中，所述方法包括：

配置报表页面，包括配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息；

在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系；以及

获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现。

进一步的，配置报表页面还包括：

配置所述维度组件和所述展现组件的调用信息。

进一步的，所述维度组件的调用信息包括：

所述维度组件的唯一识别码；

所述维度组件的标志信息；

所述维度组件的模型信息；以及

所述维度组件的局域类型，其中，所述维度组件的局域类型包括与所有展现组件相关联的全局类型和部分所述展现组件相关联的局部类型。

进一步的，所述展现组件的调用信息包括：

所述展现组件的唯一识别码；

所述展现组件的标志信息；以及

所述展现组件的模型信息。

进一步的，其中，当所述维度组件的局域类型为全局类型时，则配置所述维度组件和展现组件的双向绑定信息包括：自动绑定所有展现组件的信息；以及当所述维度组件的局域类型为局部类型时，则配置所述维度组件和展现组件的双向绑定信息包括：根据指定确定所绑定的展现组件的信息。

进一步的，配置报表页面还包括：

配置所述维度组件和所述展现组件的配置信息，其中，所述配置信息包括所述维度组件和所述展现组件的统一资源定位符。

进一步的，配置报表页面还包括：

配置自定义的维度组件和展示组件。

进一步的，配置报表页面还包括：

配置启动展现所述报表页面的相关指令信息。

进一步的，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系包括：

实例化所述维度组件和展现组件，以将所述维度组件和展现组件的参数及初始值分别以键值对的形式存储维度数组和展现数组中；以及

将所述维度组件和展现组件的双向绑定信息存储于相应所述维度数组和展现数组中。

进一步的，获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现包括：

获取所述触发事件相关的数据并相应修改相应所述维度数组；

获取相应所述维度数组所绑定的展现组件，根据所述展现组件获取相应展示参数；

利用相应所述展示参数发起请求以获取展示数据；以及

利用相关所述展现组件对所述展示数据进行展示。

根据本申请另一方面提供的一种报表页面展现设备，其中，所述设备包括：

第一装置，用于配置报表页面，包括配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息；

第二装置，用于在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系；以及

第三装置，用于获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现。

进一步的，所述第一装置还包括：

第一单元，用于配置所述维度组件和所述展现组件的调用信息。

进一步的，所述第一单元所配置的所述维度组件的调用信息包括：

所述维度组件的唯一识别码；

所述维度组件的标志信息；

所述维度组件的模型信息；以及

所述维度组件的局域类型，其中，所述维度组件的局域类型包括与所有展现组件相关联的全局类型和部分所述展现组件相关联的局部类型。

进一步的，所述第一单元所配置的所述展现组件的调用信息包括：

所述展现组件的唯一识别码；

所述展现组件的标志信息；以及

所述展现组件的模型信息。

进一步的，其中，当所述维度组件的局域类型为全局类型时，则配置所述维度组件和展现组件的双向绑定信息包括：自动绑定所有展现组件的信息；以及当所述维度组件的局域类型为局部类型时，则配置所述维度组件和展现组件的双向绑定信息包括：根据指定确定所绑定的展现组件的信息。

进一步的，其中，所述第一装置还包括：

第二单元，用于配置所述维度组件和所述展现组件的配置信息，其中，所述配置信息包括所述维度组件和所述展现组件的统一资源定位符。

进一步的，所述第一装置还包括：

第三单元，用于配置自定义的维度组件和展示组件。

进一步的，所述第一装置还包括：

第四单元，配置启动展现所述报表页面的相关指令信息。

进一步的，所述第二装置包括：

第五单元，用于实例化所述维度组件和展现组件，以将所述维度组件和展现组件的参数及初始值分别以键值对的形式存储维度数组和展现数组中；以及

第六单元，用于将所述维度组件和展现组件的双向绑定信息存储于相应所述维度数组和展现数组中。

进一步的，所述第三装置包括：

第七单元，用于获取所述触发事件相关的数据并相应修改相应所述维度数组；

第八单元，用于获取相应所述维度数组所绑定的展现组件，根据所述展现组件获取相应展示参数；

第九单元，用于利用相应所述展示参数发起请求以获取展示数据；以及

第十单元，用于利用相关所述展现组件对所述展示数据进行展示。

相比于现有技术，本申请所述方法和设备通过建立维度组件和展现组件之间的双向绑定信息，并在所述报表页面被触发时，只需处理维度组件和展现组件之间的双向绑定关系以及获取并传递触发事件即可，无需过多干预维度组件和展现组件内部处理数据和过程。因此，本申请所述方法和设备一方面实现了最大程度的解耦，最大程度的利用维度组件和展现组件的自身功能。另一方面大大减少了开发报表页面的代码压力，只需按照API格式提供了相应维度组件和展现组件的接口方法，那么只需要配置相应内容即可快速完成绑定逻辑，从而大大便捷报表页面的前端开发方式。

此外，本申请所述方法和设备通过动态调用维度组件和展现组件，可以无需增加维度组件和展现组件和代码，直接利用现有的维度组件和展现组件，实现可插拔效果和最大程度解耦组件的效果。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出根据本申请一个方面提供的一种报表页面展现设备的设备示意图；

图2示出根据本申请一优选的实施例中报表页面展现设备中第三装置的示意图；

图3示出根据本申请一个方面提供的一种报表页面展现方法的方法流程图；

图4示出根据本申请一优选的实施例中报表页面展现方法的步骤S13的流程图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本申请作进一步详细描述。

图1示出根据本申请一个方面提供的一种报表页面展现设备的设备示意图，本申请一方面示出一种报表页面展现设备，所述设备1包括：第一装置11、第二装置12和第三装置13。

所述第一装置11配置报表页面，包括配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息。

所述第二装置12在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系。

所述第三装置13获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现。

在此，所述设备1包括但不限于用户设备、网络设备、或用户设备与网络设备通过网络相集成所构成的设备。所述用户设备其包括但不限于任何一种可与用户通过触摸板进行人机交互的移动电子产品，例如智能手机、PDA等，所述移动电子产品可以采用任意操作系统，如android操作系统、iOS操作系统等。其中，所述网络设备包括一种能够按照事先设定或存储的指令，自动进行数值计算和信息处理的电子设备，其硬件包括但不限于微处理器、专用集成电路(ASIC)、可编程门阵列(FPGA)、数字处理器(DSP)、嵌入式设备等。所述网络设备其包括但不限于计算机、网络主机、单个网络服务器、多个网络服务器集或多个服务器构成的云；在此，云由基于云计算(Cloud Computing)的大量计算机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个虚拟超级计算机。所述网络包括但不限于互联网、广域网、城域网、局域网、VPN网络、无线自组织网络(Ad Hoc网络)等。本领域技术人员应能理解，其他的触摸控制设备同样适用于本申请，也应包含在本申请保护范围以内，并在此以引用方式包含于此。

在此，所述与报表页面展现相关的所有维度组件和展现组件，可以通过引入现有的关于维度组件和展现组件的报表应用以及相应的配置文件。所述设备1可以通过动态调用与报表页面展现相关的维度组件和展现组件的方法进行获取，从而实现可插拔和最大程度解耦组件的效果。此外，也可以由本领域技术人员具体定义与报表页面展现相关的维度组件和展现组件，相应定义与报表页面展现相关的维度组件和展现组件同样由设备1通过动态调用的方法获取和解耦。

在此，所述维度组件用于提供选项供用户进行选择，去内部实质是负责控制阿贾克斯请求(ajax请求)的参数，所述展现组件用于将结果展现给用户阅览，其实质是将所述阿贾克斯请求(ajax请求)所返回的数据进行封装形成展示内容，在此展示内容可以并且不限于图标、表格、动影像等方式。

具体地，所述第一装置11配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息。

所述第一装置11通过在所述维度组件中增加绑定信息(data-target)指定所绑定的展现组件，在所述展现组件中，同样通过增加绑定信息(data-target)指定所绑定的维度组件。

进一步，所述第一装置11中还包括第一单元(未标示)，所述第一单元配置所述维度组件和所述展现组件的调用信息。

进一步的，所述第一单元所配置的所述维度组件的调用信息包括：所述维度组件的唯一识别码(id)，所述维度组件的唯一识别码用于被调用或关联，例如展现组件可以通过引用所述维度组件的唯一识别码(id)来确定其所绑定的维度组件；所述维度组件的标志信息(class)，所述维度组件的标志信息用于标志该组件为维度组件，所述方法可以通过所述维度组件的标志信息搜索并扫描所所有维度组件；所述维度组件的模型信息(data-model)，所述维度组件的模型信息包括维度组件展示模型的信息，展示模型可以是但不限于标签、图标、表格、超链接等形式；此外，所述维度组件的局域类型包括与所有展现组件相关联的全局类型和部分所述展现组件相关联的局部类型。

在此，所述维度组件(Dimension)有全局类型的维度组件和局部类型的维度组件。全局类型的维度组件自动绑定所有展现组件，一旦维度组件的值发生改变，所有的展现组件都需要相应改变。而局部维度组件需要和一个或者多个展现组件进行绑定以产生关联，每个展现组件也需要和一个或者多个维度组件有对应的关系。

在此，当所述维度组件的局域类型为全局类型时，则配置所述维度组件和展现组件的双向绑定信息包括：自动绑定所有展现组件的信息；当所述维度组件的局域类型为局部类型时，则配置所述维度组件和展现组件的双向绑定信息包括：根据指定确定所绑定的展现组件的信息。

在具体的实施例中，以一标签形式的维度组件的HTML源代码为例：

如需要设定上述维度组件所绑定的展现组件的信息，需要加上绑定信息(data-target)以指定展现组件，多个展现组件之间可以以逗号分隔表示，此外，还需要设定所述维度组件的调用信息，例如：定义维度组件的id以备其他展现组件或系统设备选择关联，设定标志信息class＝”wdm-dimension-bind”表示该组件为维度组件，设定维度组件的模型信息(data-model)，例如以表格、超链接等模型，描述所述维度组件的局域类型(data-global)，其中，一旦指定data-global为全局类型(可以用“Ture”值标识)，则可直接默认绑定所有展现组件，忽略data-target描述内容。

此外，通过增加data-args，可以指定所述维度组件发送到后台服务系统或设备的ajax请求参数。

接着，在具体实施例中，现绑定一个id＝”tableShower”的表格类型的展现组件，即是当用户单击所述标签内的非激活的其他子标签时，表格能根据该数据自动去取值。

设定该维度组件的组件值的参数名是：userType，则如下：

其中，data-target＝”tableShower”即描述了绑定关系，即指定该维度组件和id为tableShower的展现组件建立了绑定关系，增加的“wdm-dimension-bind”为所述维度组件的标志信息，以说明这是一个维度组件，data-model＝”tab”表面这是一个tab组件，实质所述方法会根据该模型信息自动搜寻dimensions[‘tab’]中相应的方法执行。data-args＝”userType”指定了发送阿贾克斯请求(ajax请求)时，该维度组件的组件值的键名为“userType”。

进一步的，所述第一单元所配置的所述展现组件的调用信息包括：所述展现组件的唯一识别码(id)，所述展现组件的唯一识别码用于被调用或关联，例如维度组件可以通过引用所述展现组件的唯一识别码(id)来确定其所绑定的展现组件；所述展现组件的标志信息(class)，所述展现组件的标志信息用于标志该组件为展现组件，所述方法可以通过所述展现组件的标志信息搜索并扫描所所有展现组件；以及所述展现组件的模型信息(data-model)，所述展现组件的模型信息包括展现组件展示模型的信息，展示模型可以是但不限于标签、图标、表格、超链接等形式。

在具体的实施例中一个以表格形式的展现组件的HTML源代码如下：

如果配置该展现组件关联到前述具体实施例中的维度组件，则只需要将该展现组件中增加以下内容：

<table id＝"tableShower"class＝"wdm-tb-gl-sty wdm-display-bind"iterCols＝"name,version,id,numberF,dateF"data-model＝"table">

即，增加唯一识别码id＝"tableShower"，增加标志信息class＝”wdm-display-bind”用以表示是一个展示组件，并说明所述展现组件的模型信息data-model是“table”，以表示模型信息为表格，则后续报表展现方法会自动寻找提供的displays[‘table’]中相应的方法进行执行，其他不需要变动。

此外，某些时候需要以隐藏数据(input hidden)的形式提交额外的信息，则在报表页面中定义<div class＝”wdm-global-params”>的标签内的所有<input type＝”hidden”>的唯一识别码(id)和值(value)，则在每次维度组件触发事件时，隐藏数据都会被自动提交。

进一步的，所述第一装置11还包括：第二单元(未标示)，所述第二单元配置所述维度组件和所述展现组件的配置信息，其中，所述配置信息包括所述维度组件和所述展现组件的统一资源定位符，此外，还可以包括例如自定义接口等内容。

在具体的实施例中，需要配置的统一资源定位符(url)、参数等或者组件的配置信息(Config)可以在专门的页面中设定，可以以json格式的页面中进行设定。具体内容的代码形式可以但不限于如下(双引号“//”之后为对相应代码的说明)：

进一步的，所述第一装置11还包括：第三单元(未标示)，所述第三单元包括配置自定义的维度组件和展示组件。通过对自定义的维度组件和展示组件进行配置，可以使后台服务系统或设备得到相应参数

在具体的实施例中，假设维度组件按照API(Application ProgrammingInterface,应用程序编程接口)的规范定义好了以json(JavaScript ObjectNotation，一种轻量级的数据交换格式)的形式存在，假定名称为dimension，

增加调用语句：

$(document).wdmEasyChart('mergeDimension',dimension)；

即可完成添加。

一般来说，维度组件的API只需要暴露这一个函数即可：

createModel:function(item,itemConfig)

参数分别是jQueryDOM和相应配置项。

假设展示组件按照API(Application Programming Interface,应用程序编程接口)的规范定义好了以json(JavaScript Object Notation，一种轻量级的数据交换格式)的形式存在，假定名称为display，

增加调用语句：

$(document).wdmEasyChart(‘mergeDisplay’,display)；

即可完成添加。

一般来说，展示组件的API只需要暴露这一个函数即可：

displayOperation:function(id,targetConfig,submitData)；

其中，参数分别是DOM id，相应的配置以及已经封装好要提交的数据。

进一步的，所述第一装置11还包括：第四单元(未标示)，其中，所述第四单元配置启动展现所述报表页面的相关指令信息。

在具体的实施例中，所述第四单元通过增加一句话即可让所述报表页面启动：

$(document).wdmEasyChart(‘start’,config)；

其中，所述$(document)表示搜寻的最大范围。

经过以上步骤报表页面编写完毕，随后，后台服务系统或设备的接口只需做到根据相应参数作为条件，然后拼装成查询语句进行查询即可，根据查询结果再完成报表页面的展示即可。

在此，所述第一单元、第二单元、第三单元以及第四单元，可以以任意组合或全部组合的方式包括于第一装置13之内。

接着，所述第二装置12在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系。

具体地，所述第二装置12包括第五单元(未标示)和第六单元(未标示)。

所述第五单元实例化所述维度组件和展现组件，以将所述维度组件和展现组件的参数及初始值分别以键值对的形式存储维度数组和展现数组中，所述第六单元中，将所述维度组件和展现组件的双向绑定信息存储于相应所述维度数组和展现数组中。

在具体的实施例中，报表页面展现方法的代码实现是通过写在立刻执行的匿名函数中，实参是jQuery，形参是$，一方面可以避免全局变量同名污染，另一方面可以直接使用形参$简化操作避免形参$命名冲突。报表页面展现方法包括三个变量：全局数组(tools)、维度数组(dimensions)和展现数组(displays)。

其中，tools定义一些公共函数，还有三个数组，分别存放全局维度组件，局部维度组件，展现组件。所述维度数组的每个元素是KV对(键值对)，其中K(键)是维度组件的id，V是实例化的对象与当前值。展现数组每个元素也是KV对，K是展现组件的id，V是展现组件的实例化对象和展现组件和维度组件的维度映射表(即绑定信息)。dimensions(可扩展)定义了所有可用维度组件的data-model对应的名字在这里以dimensions的属性存在，包含对应一些方法供框架根据data-model动态化的调用。此外，displays(可扩展)定义了所有可用展示组件的data-model对应的名字在这里以displays的属性存在，包含对应一些方法供框架根据data-model动态化的调用。

在具体的实施例中，所述第五单元扫描所有隐藏数据(input hidden)中的数据，并存入数组tools的全局数组中；所述第六单元扫描所有维度组件和展示组件，并根据维度组件和展现组件的双向绑定信息，建立和展现组件的双向绑定关系，并将双向绑定关系存入全局数组中。

图2示出根据本申请一优选的实施例中报表页面展现设备中第三装置13的示意图；所述第三装置13包括第七单元101、第八单元102、第九单元103和第十单元104。

其中，第七单元101获取所述触发事件相关的数据并相应修改相应所述维度数组；第八单元102获取相应所述维度数组所绑定的展现组件，根据所述展现组件获取相应展示参数；第九单元103利用相应所述展示参数发起请求以获取展示数据；以及第十单元104利用相关所述展现组件对所述展示数据进行展示。

在具体的实施例中，所述第七单元101获取所述触发事件，并获取所述触发事件的数据并相应修改相应所述维度数组，在具体的实施例中，所述第七单元101首先获取所述触发事件相关的维度组件的相应信息，包括获取维度组件的模型信息(data-model)，并在获得相应维度组件的配置信息(config)，根据模型信息，动态的执行组件对象中相应的方法，模型方法例如但不限于表格形式，随后，根据维度组件的全局类型，将初始值放入全局数组中，根据用户选择注册相应事件，在所绑定的事件中获得相应改变的数值并修改相应的维度数组。接着，实例化相应维度组件的对象，将所述对象和初始值保存到全局数组中。找到相应维度组件所有可能触发事件的条件，获得用户刚刚触发获取的数据，放入维度数组中。

接着，第八单元102获取相应所述维度数组所绑定的展现组件，并根据所述展现组件获取相应展示参数；具体地，根据维度组件所绑定的展现组件获得以下可能的参数：包括input hidden中相应维度组件的空间参数，全局维度参数以及自身配置信息等，根据参数向后台发起请求，以获得展现数据。所述第八单元102根据维度组件的全局类型和绑定信息搜索展现组件，具体地，当维度组件为全局类型时，则直接搜索所有的展现组件，当维度组件为局部类型时，则根据维度组件的绑定信息所绑定的展现组件，获得搜索到的展现组件的唯一识别码(id)以获取相应参数信息，其中相应参数信息包括展示组件的配置信息、隐藏数据(input hidden)中全局类型的维度组件的请求参数信息，以及该展现组件所绑定的维度组件的请求参数信息。接着，所述第九单元103利用相应所述展示参数发起请求以获取展示数据，所述第九单元103根据展现组件的模型信息(data-model)动态决定调用哪一个展现组件的展示模型，并将参数信息向后台服务设备或系统传递参数信息以发送请求。然后，第十单元104利用相关所述展现组件对所述展示数据进行展示。本申请所述方法利用展现组件对展示数据进行展示，但并不限制展现组件内部如何处理和具体对展示数据进行展示。

图3示出根据本申请一个方面提供的一种报表页面展现方法的方法流程图，本申请另一方面示出一种报表页面展现方法，所述方法包括：步骤S11、步骤S12和步骤S13。

在步骤S11中，配置报表页面，包括配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息。

在步骤S12中，在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系。

在步骤S13中，获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现。

在此，所述与报表页面展现相关的所有维度组件和展现组件，可以通过引入现有的关于维度组件和展现组件的报表应用以及相应的配置文件。可以通过动态调用与报表页面展现相关的维度组件和展现组件的方法进行获取，从而实现可插拔和最大程度解耦组件的效果。此外，也可以由本领域技术人员具体定义与报表页面展现相关的维度组件和展现组件，相应定义与报表页面展现相关的维度组件和展现组件同样通过动态调用的方法获取和解耦。

在此，所述维度组件用于提供选项供用户进行选择，去内部实质是负责控制阿贾克斯请求(ajax请求)的参数，所述展现组件用于将结果展现给用户阅览，其实质是将所述阿贾克斯请求(ajax请求)所返回的数据进行封装形成展示内容，在此展示内容可以并且不限于图标、表格、动影像等方式。

具体地，在步骤S11中，配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息。

在所述维度组件中，通过增加绑定信息(data-target)指定所绑定的展现组件，在所述展现组件中，同样通过增加绑定信息(data-target)指定所绑定的维度组件。

进一步，在步骤S11中，还包括配置所述维度组件和所述展现组件的调用信息。

进一步的，所述维度组件的调用信息包括：

所述维度组件的唯一识别码(id)，所述维度组件的唯一识别码用于被调用或关联，例如展现组件可以通过引用所述维度组件的唯一识别码(id)来确定其所绑定的维度组件；

所述维度组件的标志信息(class)，所述维度组件的标志信息用于标志该组件为维度组件，所述方法可以通过所述维度组件的标志信息搜索并扫描所所有维度组件；

所述维度组件的模型信息(data-model)，所述维度组件的模型信息包括维度组件展示模型的信息，展示模型可以是但不限于标签、图标、表格、超链接等形式；

此外，所述维度组件的局域类型包括与所有展现组件相关联的全局类型和部分所述展现组件相关联的局部类型。

在此，所述维度组件(Dimension)有全局类型的维度组件和局部类型的维度组件。全局类型的维度组件自动绑定所有展现组件，一旦维度组件的值发生改变，所有的展现组件都需要相应改变。而局部维度组件需要和一个或者多个展现组件进行绑定以产生关联，每个展现组件也需要和一个或者多个维度组件有对应的关系。

在此，当所述维度组件的局域类型为全局类型时，则配置所述维度组件和展现组件的双向绑定信息包括：自动绑定所有展现组件的信息；当所述维度组件的局域类型为局部类型时，则配置所述维度组件和展现组件的双向绑定信息包括：根据指定确定所绑定的展现组件的信息。

在具体的实施例中，以一标签形式的维度组件的HTML源代码为例：

如需要设定上述维度组件所绑定的展现组件的信息，需要加上绑定信息(data-target)以指定展现组件，多个展现组件之间可以以逗号分隔表示，此外，还需要设定所述维度组件的调用信息，例如：定义维度组件的id以备其他展现组件或系统设备选择关联，设定标志信息class＝”wdm-dimension-bind”表示该组件为维度组件，设定维度组件的模型信息(data-model)，例如以表格、超链接等模型，描述所述维度组件的局域类型(data-global)，其中，一旦指定data-global为全局类型(可以用“Ture”值标识)，则可直接默认绑定所有展现组件，忽略data-target描述内容。

此外，通过增加data-args，可以指定所述维度组件发送到后台服务系统或设备的ajax请求参数。

接着，在具体实施例中，现绑定一个id＝”tableShower”的表格类型的展现组件，即是当用户单击所述标签内的非激活的其他子标签时，表格能根据该数据自动去取值。

设定该维度组件的组件值的参数名是：userType，则如下：

其中，data-target＝”tableShower”即描述了绑定关系，即指定该维度组件和id为tableShower的展现组件建立了绑定关系，增加的“wdm-dimension-bind”为所述维度组件的标志信息，以说明这是一个维度组件，data-model＝”tab”表面这是一个tab组件，实质所述方法会根据该模型信息自动搜寻dimensions[‘tab’]中相应的方法执行。data-args＝”userType”指定了发送阿贾克斯请求(ajax请求)时，该维度组件的组件值的键名为“userType”。

进一步的，所述展现组件的调用信息包括：

所述展现组件的唯一识别码(id)，所述展现组件的唯一识别码用于被调用或关联，例如维度组件可以通过引用所述展现组件的唯一识别码(id)来确定其所绑定的展现组件；

所述展现组件的标志信息(class)，所述展现组件的标志信息用于标志该组件为展现组件，所述方法可以通过所述展现组件的标志信息搜索并扫描所所有展现组件；以及

所述展现组件的模型信息(data-model)，所述展现组件的模型信息包括展现组件展示模型的信息，展示模型可以是但不限于标签、图标、表格、超链接等形式。

在具体的实施例中一个以表格形式的展现组件的HTML源代码如下：

如果配置该展现组件关联到前述具体实施例中的维度组件，则只需要将该展现组件中增加以下内容：

<table id＝"tableShower"class＝"wdm-tb-gl-sty wdm-display-bind"iterCols＝"name,version,id,numberF,dateF"data-model＝"table">

即，增加唯一识别码id＝"tableShower"，增加标志信息class＝”wdm-display-bind”用以表示是一个展示组件，并说明所述展现组件的模型信息data-model是“table”，以表示模型信息为表格，则后续报表展现方法会自动寻找displays[‘table’]中相应的方法进行执行，其他不需要变动。

此外，某些时候需要以隐藏数据(input hidden)的形式提交额外的信息，则在报表页面中定义<div class＝”wdm-global-params”>的标签内的所有<input type＝”hidden”>的唯一识别码(id)和值(value)，则在每次维度组件触发事件时，隐藏数据都会被自动提交。

进一步的，所述步骤S11还包括：配置所述维度组件和所述展现组件的配置信息，其中，所述配置信息包括所述维度组件和所述展现组件的统一资源定位符，此外可以包括自定义接口等内容。

在具体的实施例中，一般情况下，需要配置的统一资源定位符(url)、参数等或者组件的配置信息(Config)可以在专门的页面中设定，可以以json格式的页面中进行设定。具体内容的代码形式可以但不限于如下(双引号“//”之后为对相应代码的说明)：

进一步的，所述步骤S11还包括：配置自定义的维度组件和展示组件。通过对自定义的维度组件和展示组件进行配置，可以使后台服务系统或设备得到相应参数。

在具体的实施例中，假设维度组件按照API(Application ProgrammingInterface,应用程序编程接口)的规范定义好了以json(JavaScript ObjectNotation，一种轻量级的数据交换格式)的形式存在，假定名称为dimension，

增加调用语句如下：

$(document).wdmEasyChart('mergeDimension',dimension)；

即可完成添加。

一般来说，维度组件的API只需要暴露这一个函数即可：

createModel:function(item,itemConfig)

参数分别是jQueryDOM和相应配置项。

假设展示组件按照API(Application Programming Interface,应用程序编程接口)的规范定义好了以json(JavaScript Object Notation，一种轻量级的数据交换格式)的形式存在，假定名称为display，

增加调用语句：

$(document).wdmEasyChart(‘mergeDisplay’,display)；

即可完成添加。

一般来说，展示组件的API只需要暴露这一个函数即可：

displayOperation:function(id,targetConfig,submitData)；

其中，参数分别是DOM id，相应的配置以及已经封装好要提交的数据。

进一步的，所述步骤S11还包括：配置启动展现所述报表页面的相关指令信息。

在具体的实施例中，通过增加一句话即可让所述报表页面启动：

$(document).wdmEasyChart(‘start’,config)；

其中，所述$(document)表示搜寻的最大范围。

经过以上步骤报表页面编写完毕，随后，后台服务系统或设备的接口只需做到根据相应参数作为条件，然后拼装成查询语句进行查询即可，根据查询结果再完成报表页面的展示即可。

接着，在步骤S12中，在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系。

具体地，步骤S12包括：实例化所述维度组件和展现组件，以将所述维度组件和展现组件的参数及初始值分别以键值对的形式存储维度数组和展现数组中；以及将所述维度组件和展现组件的双向绑定信息存储于相应所述维度数组和展现数组中。

在具体的实施例中，报表页面展现方法的代码实现是通过写在立刻执行的匿名函数中，实参是jQuery，形参是$，一方面可以避免全局变量同名污染，另一方面可以直接使用形参$简化操作避免形参$命名冲突。报表页面展现方法包括三个变量：全局数组(tools)、维度数组(dimensions)和展现数组(displays)。

其中，tools定义一些公共方法，还有三个数组，分别存放全局维度组件，局部维度组件，展现组件。所述维度数组的每个元素是KV对(键值对)，其中K(键)是维度组件的id，V是实例化的对象与当前值。展现数组每个元素也是KV对，K是展现组件的id，V是展现组件的实例化对象和展现组件和维度组件的维度映射表(即绑定信息)。dimensions(可扩展)定义了所有可用维度组件的data-model对应的名字在这里以dimensions的属性存在，包含对应一些方法供框架根据data-model动态化的调用。此外，displays(可扩展)定义了所有可用展示组件的data-model对应的名字在这里以displays的属性存在，包含对应一些方法供框架根据data-model动态化的调用。

在具体的实施例中，扫描所有隐藏数据(input hidden)中的数据，并存入数组tools的全局数组中；接着，扫描所有维度组件和展示组件，并根据维度组件和展现组件的双向绑定信息，建立和展现组件的双向绑定关系，并将双向绑定关系存入全局数组中。

图4示出根据本申请一优选的实施例中报表页面展现方法的步骤S13的流程图，所述步骤S13包括步骤S101、步骤S102、步骤S103和步骤S104。

其中，在步骤S101中，获取所述触发事件相关的数据并相应修改相应所述维度数组；在步骤S102中，获取相应所述维度数组所绑定的展现组件，根据所述展现组件获取相应展示参数；在步骤S103中，利用相应所述展示参数发起请求以获取展示数据；以及在步骤S104中，利用相关所述展现组件对所述展示数据进行展示。

在具体的实施例中，在所述步骤S101中，获取所述触发事件，并获取所述触发事件的数据并相应修改相应所述维度数组，在具体的实施例中，在所述步骤S101中，首先获取所述触发事件相关的维度组件的相应信息，包括获取维度组件的模型信息(data-model)，并在获得相应维度组件的配置信息(config)，根据模型信息，动态的执行组件对象中相应的方法，模型方法例如但不限于表格形式，随后，根据维度组件的全局类型，将初始值放入全局数组中，根据用户选择注册相应事件，在所绑定的事件中获得相应改变的数值并修改相应的维度数组。接着，实例化相应维度组件的对象，将所述对象和初始值保存到全局数组中。找到相应维度组件所有可能触发事件的条件，获得用户刚刚触发获取的数据，放入维度数组中。

接着，在所述步骤S102中，获取相应所述维度数组所绑定的展现组件，并根据所述展现组件获取相应展示参数；具体地，根据维度组件所绑定的展现组件获得以下可能的参数：包括input hidden中相应维度组件的空间参数，全局维度参数以及自身配置信息等，根据参数向后台发起请求，以获得展现数据。在所述步骤S101中，根据维度组件的全局类型和绑定信息搜索展现组件，具体地，当维度组件为全局类型时，则直接搜索所有的展现组件，当维度组件为局部类型时，则根据维度组件的绑定信息所绑定的展现组件，获得搜索到的展现组件的唯一识别码(id)以获取相应参数信息，其中相应参数信息包括展示组件的配置信息、隐藏数据(inputhidden)中全局类型的维度组件的请求参数信息，以及该展现组件所绑定的维度组件的请求参数信息。

接着，在所述步骤S103中，利用相应所述展示参数发起请求以获取展示数据，在所述步骤S103中，根据展现组件的模型信息(data-model)动态决定调用哪一个展现组件的展示模型，并将参数信息向后台服务设备或系统传递参数信息以发送请求。

然后，在所述步骤S104中，利用相关所述展现组件对所述展示数据进行展示。本申请所述方法利用展现组件对展示数据进行展示，但并不限制展现组件内部如何处理和具体对展示数据进行展示，从而实现对展示组件的最大解耦。

相比于现有技术，本申请所述方法和设备通过建立维度组件和展现组件之间的双向绑定信息，并在所述报表页面被触发时，只需处理维度组件和展现组件之间的双向绑定关系以及获取并传递触发事件即可，无需过多干预维度组件和展现组件内部处理数据和过程。因此，本申请所述方法和设备一方面实现了最大程度的解耦，最大程度的利用维度组件和展现组件的自身功能。另一方面大大减少了开发报表页面的代码压力，只需按照API格式提供了相应维度组件和展现组件的接口方法，那么只需要配置相应内容即可快速完成绑定逻辑，从而大大便捷报表页面的前端开发方式。

此外，本申请所述方法和设备通过动态调用维度组件和展现组件，可以无需增加维度组件和展现组件和代码，直接利用现有的维度组件和展现组件，实现可插拔效果和最大程度解耦组件的效果。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims (20)

1.一种报表页面展现方法，其中，所述方法包括：

配置报表页面，包括配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息；

在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系；以及

获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现。

2.根据权利要求1所述的报表页面展现方法，其中，配置报表页面还包括：

配置所述维度组件和所述展现组件的调用信息。

3.根据权利要求2所述的报表页面展现方法，其中，所述维度组件的调用信息包括：

所述维度组件的唯一识别码；

所述维度组件的标志信息；

所述维度组件的模型信息；以及

所述维度组件的局域类型，其中，所述维度组件的局域类型包括与所有展现组件相关联的全局类型和部分所述展现组件相关联的局部类型。

4.根据权利要求2或3所述的报表页面展现方法，其中，所述展现组件的调用信息包括：

所述展现组件的唯一识别码；

所述展现组件的标志信息；以及

所述展现组件的模型信息。

5.根据权利要求4所述的报表页面展现方法，其中，

当所述维度组件的局域类型为全局类型时，则配置所述维度组件和展现组件的双向绑定信息包括：自动绑定所有展现组件的信息；以及

当所述维度组件的局域类型为局部类型时，则配置所述维度组件和展现组件的双向绑定信息包括：根据指定确定所绑定的展现组件的信息。

6.根据权利要求1至5中任一项所述的报表页面展现方法，其中，配置报表页面还包括：

配置所述维度组件和所述展现组件的配置信息，其中，所述配置信息包括所述维度组件和所述展现组件的统一资源定位符。

7.根据权利要求1至6所述的报表页面展现方法，其中，配置报表页面还包括：

配置自定义的维度组件和展示组件。

8.根据权利要求1至7中任一项所述的报表页面展现方法，其中，配置报表页面还包括：

配置启动展现所述报表页面的相关指令信息。

9.根据权利要求1至8中任一项所述的报表页面展现方法，其中，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系包括：

实例化所述维度组件和展现组件，以将所述维度组件和展现组件的参数及初始值分别以键值对的形式存储维度数组和展现数组中；以及

将所述维度组件和展现组件的双向绑定信息存储于相应所述维度数组和展现数组中。

10.根据权利要求9所述的报表页面展现方法，其中，获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现包括：

获取所述触发事件相关的数据并相应修改相应所述维度数组；

获取相应所述维度数组所绑定的展现组件，根据所述展现组件获取相应展示参数；

利用相应所述展示参数发起请求以获取展示数据；以及

利用相关所述展现组件对所述展示数据进行展示。

11.一种报表页面展现设备，其中，所述设备包括：

第一装置，用于配置报表页面，包括配置与报表页面展现相关的所有维度组件和展现组件的双向绑定信息，其中，所述双向绑定信息包括：所述维度组件所绑定的展现组件的信息以及所述展现组件所绑定的维度组件的信息；

第二装置，用于在所述报表页面被触发时，初始化所述维度组件和展现组件，并根据所述维度组件和展现组件的双向绑定信息建立所述维度组件和展现组件之间的双向绑定关系；以及

第三装置，用于获取触发事件，并根据所述双向绑定关系利用所述事件相关的维度组件所绑定的展现组件进行报表页面展现。

12.根据权利要求11所述的报表页面展现设备，其中，所述第一装置还包括：

第一单元，用于配置所述维度组件和所述展现组件的调用信息。

13.根据权利要求12所述的报表页面展现设备，其中，所述第一单元所配置的所述维度组件的调用信息包括：

所述维度组件的唯一识别码；

所述维度组件的标志信息；

所述维度组件的模型信息；以及

所述维度组件的局域类型，其中，所述维度组件的局域类型包括与所有展现组件相关联的全局类型和部分所述展现组件相关联的局部类型。

14.根据权利要求12或13所述的报表页面展现设备，其中，所述第一单元所配置的所述展现组件的调用信息包括：

所述展现组件的唯一识别码；

所述展现组件的标志信息；以及

所述展现组件的模型信息。

15.根据权利要求14所述的报表页面展现设备，其中，

当所述维度组件的局域类型为全局类型时，则配置所述维度组件和展现组件的双向绑定信息包括：自动绑定所有展现组件的信息；以及

当所述维度组件的局域类型为局部类型时，则配置所述维度组件和展现组件的双向绑定信息包括：根据指定确定所绑定的展现组件的信息。

16.根据权利要求11至15中任一项所述的报表页面展现设备，其中，所述第一装置还包括：

第二单元，用于配置所述维度组件和所述展现组件的配置信息，其中，所述配置信息包括所述维度组件和所述展现组件的统一资源定位符。

17.根据权利要求11至16所述的报表页面展现设备，其中，所述第一装置还包括：

第三单元，用于配置自定义的维度组件和展示组件。

18.根据权利要求11至17中任一项所述的报表页面展现设备，其中，所述第一装置还包括：

第四单元，配置启动展现所述报表页面的相关指令信息。

19.根据权利要求11至18中任一项所述的报表页面展现设备，其中，所述第二装置包括：

第五单元，用于实例化所述维度组件和展现组件，以将所述维度组件和展现组件的参数及初始值分别以键值对的形式存储维度数组和展现数组中；以及

第六单元，用于将所述维度组件和展现组件的双向绑定信息存储于相应所述维度数组和展现数组中。

20.根据权利要求19所述的报表页面展现设备，其中，所述第三装置包括：

第七单元，用于获取所述触发事件相关的数据并相应修改相应所述维度数组；

第八单元，用于获取相应所述维度数组所绑定的展现组件，根据所述展现组件获取相应展示参数；

第九单元，用于利用相应所述展示参数发起请求以获取展示数据；以及

第十单元，用于利用相关所述展现组件对所述展示数据进行展示。