Cognos 10 复杂报表开发：JavaScript 的应用

商业智能在企业经营管理中发挥着愈发重要的作用。cognos 10 为用户提供了一系列的工具，供用户进行商业智能活动。但有时单纯使用 Cognos 自带的报表组件无法实现某些报表需求。本文详细阐述了在 Cognos10 环境中，如何利用 jQuery 库中的动画效果实现列表（或交叉表）及对应图表的展示切换，如何利用 jQuery 实现分段的动态可伸缩显示，如何实现带有判定条件的提示页自动提交。本文旨在为 BI 开发人员提供一定技术支持，从而更好地满足用户需求，支持业务分析和管理决策。

利用 jQuery 库中的动画效果实现列表及对应图表的展示切换

[size=1.166em]为满足不同用户对报表的需求，列表（或交叉表）及其对应图表有时要求被同时展示。本节将介绍如何利用 jQuery 实现列表（或交叉表）及对应图表的展示切换动态效果。使用这种方式切换图表和列表（或交叉表），不会刷新报表页面，并且带有动画效果，会使用户体验有所提升。

假定客户有如下图 1 所示报表需求。

图 1 列表（或交叉表）及对应图表的展示切换需求

[size=1.166em]从图 1 中我们可以看出，报表加载完成后将展示四张不同类型的图表，且点击每张图表上方的切换提示文字，可切换到对应图表的表格进行展示。使用 Cognos 自带产品组件可以实现报表需求中的图表、表格（或交叉表），但对于“点击切换文字进行图和表切换”这条，Cognos 并没有现成的实现组件，这就需要我们使用 JavaScript 来实现此功能。下面结合 Cognos Sample 实例，分步阐述如何实现此需求。

[size=1.166em]步骤 1：打开 Report Studio，选择 GO Data Warehouse (query) 作为报表数据包，新建一张空白报表；

[size=1.166em]步骤 2：在页面上插入一个页面布局的两行两列的表格，并将其大小、边框以及对齐方式等进行相应设置。完成后如图 2 所示：

图 2 创建布局表格并对其属性进行设置

[size=1.166em]步骤 3：完成业务所需的图表，列表（或交叉表），并将其放入布局表格中，完成后如图 3 所示：

图 3 完成业务所需图表、列表及交叉表并将其放入布局表格中

[size=1.166em]步骤 4：从工具箱中选择 HTML 项目并将其托至布局表格的前方，在该 HTML 项目中加入清单 1 代码：

清单 1. 代码清单

[AppleScript] 纯文本查看 复制代码

 <script src="http://localhost/jquery-1.6.4.js"></script> 
 <script language=javascript type='text/javascript'> 
 jQuery.noConflict(); // 将变量 $ 的控制权让渡给第一个实现它的库

 function switchTabAndChart(me){ 
    var div1= jQuery(me); // 定位点击动作所发生的 DIV 
    var tablespan= div1.parent().parent().children('#tablespan'); // 找出其中的表格所在 span 
    var chartspan= div1.parent().parent().children('#chartspan'); // 找出其中的图表所在 span 
    if (tablespan.is(':visible')) { 
        tablespan.fadeToggle('slow'); // 表格所在 span 以慢速切换隐藏显示
        chartspan.fadeToggle('slow'); // 图表所在 span 以慢速切换隐藏显示
        div1.html("Switch to Table View"); // 改变点击的 DIV 的显示内容
    } else { 
        tablespan.fadeToggle('slow'); 
        chartspan.fadeToggle('slow'); 
        div1.html("Switch to Chart View"); 
    } 
 } 
 </script>

完成后如图 4 所示：

图 4 布局表格前方 HTML 项目及其代码

此段代码的头部，引入了 jQuery1.6.4 版本的 js 文件。本例中，我们已事先将此 js 文件放置于本机的 Web 服务器上。在项目中，该文件的路径需根据实际情况进行调整。通过阅读此段代码可发现其中有两个函数，第一个是 jQuery 自带函数 noConflict()，它用于将变量 $ 的控制权让渡给第一个实现它的库，以防止冲突。第二个是自定义函数 switchTabAndChart(me)，它用于实现动态切换表格和图表。每行代码的含义可参考代码注释。

步骤 5：对布局表格的每一个单元格，分别完成以下步骤：

子步骤 5.1：插入 HTML 项目，并写入代码，如下图所示。此段代码用于显示提示文字，并在点击时触发切换函数，完成后如图 5.1 所示：

图 5.1 提示文字所需 HTML 项目及其代码

子步骤 5.2：将表格（或交叉表）置入 span 中。因为表格（或交叉表） 默认不现实，故将 span 的样式设置为“不显示”。将图表置入另一个 span 中。完成后如图 5.2 所示：

图 5.2 表格（或交叉表）、图表所需 HTML 项目及其代码

[size=1.166em]步骤 6：点击工具栏中的运行按钮，运行报表，最终就得到图 1 所示的报表了。当点击布局表格中任意一个单元格内的提示语时，即可切换该单元格内的表格、列表（或交叉表）的显示与隐藏， 如图 6 所示：

图 6 报表运行后点击第一个单元格内提示语后的结果


利用 jQuery 实现分段的动态可伸缩显示

分段展示是报表中很常见的一种展示方式。但如果每个分段内的展示内容较多，则将造成分段很长，给报表使用者带来不便。而若能在分段中增加一个功能，使分段内的内容能够根据使用者的操作（如点击分段的头部）动态地展示或隐藏，则有效的减少了这种不便，并使分段更加明确。如图 7 所示：

图 7 分段的动态可伸缩显示

本节将分步骤阐述如何实现此功能。

步骤 1. 新建一张空白报表，然后分别拖入一个列表和图表，并添加相应的数据项，完成后如图 8 所示：

图 8 完成列表和图表

步骤 2. 选中列表中需要做分段的列后，点击工具栏的分段图标使其分段，完成后如图 9 所示：

图 9 完成分段

[size=1.166em]步骤 3. 对整个分段的边框进行设置，以显示边框。并对分段首部的格式进行设置，属性如图 10 所示：

图 10 分段首部属性

[size=1.166em]步骤 4. 首先点击工具栏上的锁定 / 解锁图标， 使其变为解锁状态。然后在分段内增加布局表，并将列表和对应的图表拖入布局表的单元格中，完成后如图 11 所示：

图 11 图表及列表拖入分段内

[size=1.166em]步骤 5. 选中列表中其他需要显示在段首中的列，按住 Ctrl 键的同时将其拖动到段首中，将其复制到段首，并添加标识文字，完成后如图 12 所示：

图 12 在段首添加其他列并添加标识文字

[size=1.166em]步骤 6. 为段首单元格增加 HTML 项目，在其中使用 HTML 代码，将段首单元格转换为表格形式，以增加段首内数据项之间的分隔距离，如图 13 所示：

图 13 段首内添加 HTML 项目，以完善格式

[size=1.166em]步骤 7. 为了能够标识出段首，并在其上增加点击事件，使得当用户对其进行点击时可以触发相应 JavaScript 代码运行，对页面进行操作，我们需要在段首单元格增加 HTML 项目，并在其中加入 HTML 代码，如图 14 所示：

图 14 段首内增加 DIV 以增加标识及点击事件

[size=1.166em]步骤 8. 在分段的前面增加 HTML 项目，并在其中增加清单 2 代码：

清单 2. 代码清单

[AppleScript] 纯文本查看 复制代码

<script src="http://localhost/jquery-1.6.4.js"></script> 
 <script language=javascript type='text/javascript'> 
 jQuery.noConflict(); // 将变量 $ 的控制权让渡给第一个实现它的库
 // 段首点击事件
 function hidediv(me){ 
    var thisEle = jQuery(me); 
    var sectionBody = thisEle.parent().parent().next(); 
    var sectionHeadImg = thisEle.find(".imageT"); 

    if (sectionBody.is(':visible')) { 
        sectionBody.fadeToggle("slow"); 
        // 设置图片为：展开图片，提前放置于本机 Web 服务器上，实际情况中需作出适当调整
        sectionHeadImg.attr('src','http://localhost/icon-link-expand-light.gif'); 
    } else { 
        sectionBody.fadeToggle("slow"); 
        // 设置图片为：关闭图片，提前放置于本机 Web 服务器上，实际情况中需作出适当调整
        sectionHeadImg.attr('src','http://localhost/icon-link-collapse-light.gif'); 
    } 
 } 
 // 初始化分段
 function initialTable(){ 
    // 找到每个段首内 DIV 
    var thisEle = jQuery('.toTwist'); 
    // 找到每个段中并将其隐藏
    thisEle.parent().parent().next().fadeOut(); 
    // 找到第一个段中并将其展示
    thisEle.parent().parent().next().first().fadeIn(); 
    // 在每个段首内的鼠标指针设定为“手指”型
    thisEle.parent().parent().css('cursor','pointer'); 
 } 
 // 加载后延时 500ms 执行
 jQuery(window).ready(function() { 
    t = setTimeout("initialTable()",500); 
 }); 

 </script>

完成后如图 15 所示：

图 15 分段前增加 HTML 项目

[size=1.166em]至此，已经实现了本次需求。运行报表，当页面加载时，第一个分段将默认展开显示其内容，其他分段只显示分段头，其内容隐藏；在报表使用者点击区段头时，本区段的内容将做隐藏或显示的切换。本例中还对区段进行了一些样式上的调整，使其更加突出重点。

带有判定条件的提示页自动提交

[size=1.166em]在报表开发中我们经常会使用到提示页，它的作用是让报表使用者能够填写或选择提示值，以便报表生成。在多数情况下，值提示的选择或填写及提交需要报表使用者人为操作。有些情况下如果系统可以自动操作，将会有效提高用户体验。

[size=1.166em]我们都知道，当展示数量较大时，报表的运行效率会降低。此时需求往往要求增加一个提示页面，让使用者选择或填写一定的值提示，这样就可以限定报表最终生成时的数据量，以提高报表的运行效率。考虑如下情况：针对给定报表，使用者权限的不同，报表可能会展示不同数量的数据。对于能够看到很少数量的用户，增加的提示页面几乎没有作用，反而对使用者是一个麻烦。如能实现以下需求：当报表最终页面的数据量大于一定阀值时，需要报表使用者选择值提示；当数据量小于一定阀值，提示页面自动提交。就既保证了报表的运行效率，又可在必要时减少使用者的操作，使用户有更好的体验。下面分步骤阐述如何实现。

[size=1.166em]步骤 1. 在报表页面的查询中，增加一个用于计算此查询数据量的数据项，其属性如图 16 所示：

图 16 查询内新增数据项的属性

步骤 2. 为报表增加提示页面，如图 17 所示：

图 17 新增提示页面

步骤 3. 在增加的提示页面中增加一个单项组件，其值设定为先前增加的用于计算数据量的数据项，然后将这个单项组件放置在一个 id 为“theCount”的隐藏 span 中，这样做的既保留了操作判断条件，又使其不展现在报表上，从而对用户造成干扰，如图 18 所示：

图 18 提示页面内加入判断条件数据项及 span

步骤 4. 增加用于自动提交时和用户操作时的提示语，并分别将其放入 span 中，并增加所需的值提示及“完成”按钮，本例中值提示以“选择和搜索提示”为例如图 19 所示，读者也可以根据自己的需要增加任意类型的值提示。

图 19 加入提示语、span 及完成按钮

步骤 5. 在这些组件的后方增加 HTML 项目，并加入如清单 3 所示代码，结果如图 20 所示：

清单 3. 代码清单

[AppleScript] 纯文本查看 复制代码

 <script src="http://localhost/jquery-1.6.4.js"></script> 
 <script language=javascript type='text/javascript'> 
 // 自动提交函数
 function submitting(){ 
    // 找出判断条件所在的 span 
    var conditionObject = document.getElementById("theCount"); 
    var iid; 
    var t = conditionObject.parentNode; 
    // 找出“完成”按钮所在的表单 id 
    for(var i=0; i<100;i++){ 
        if(t.tagName == 'FORM'){ 
            if (t.id.search("formWarpRequest")">-1){ 
                iid = t.id.replace(/formWarpRequest(.*)/, "oCV$1"); 
                break; 
            } 
        }else{ 
            if(t.parentNode!=null){ 
                t=t.parentNode; 
            } 
            else{ 
                break; 
            } 
        } 
    } 
    // 设置提交所需命令
    var command = iid+'.promptAction(\'finish\')'; 
    // 设置延时为 0 的自动提交
    setTimeout(command, 0); 
 } 
    // 页面加载完成时执行
    window.onload=function(){ 
    // 找出判断条件所在的 span 
    var spanCount = document.getElementById("theCount"); 
    // 找到其中的单项
    var theCount= spanCount.getElementsByTagName('span')[0]; 
    // 获取单项的值
    var realCount= theCount.innerHTML; 
    // 根据单项的值进行判断，设置不同提示语的展示或隐藏，及调用提交函数
    if(realCount<5){ 
        document.getElementById("indicator1").style.display = 'block'; 
        document.getElementById("theSearch").style.display = 'none'; 
        submitting(); 
    }else{ 
        document.getElementById("theSearch").style.display = 'block'; 
    } 
 } 

 </script>

图 20 加入 HTML 项目

至此，已经实现了此需求。报表运行时，将根据报表页面的查询结果进行判断：若满足一定条件（本例中为 realCount>=5）在提示页面展示值提示供使用者选择；否则，提示页面会自动提交，减少用户干预。

总结

Cognos 的报表通过浏览器页面进行展示，而 JavaScript 可以操作浏览器页面中的所有元素。对于 Cognos 自带功能难以实现的功能，可以尝试使用 JavaScript 来实现。而多种多样的开源 JavaScript 库（如本文示例中所用的 jQuery 库），不仅可使 JavaScript 开发更加方便快捷从而简化报表开发过程，合理使用还能提升用户体验。本文结合实例讲述了如何利用 jQuery 库中的动画效果实现列表（或交叉表）及对应图表的展示切换，如何利用 jQuery 实现分段的动态可伸缩显示以及如何实现带有判定条件的提示页自动提交，相信能对报表开发人员有一定的帮助。