Report Studio通过js,jq设置默认起始时间段

浏览: 3895

项目中经常遇到用户的个性化需求:你们这个日历好难看,换一个;报表一打开就显示最近一周的数据;我们报表有十来个字段想自由组合钻取和过滤....

Cognos报表开发中,恰当的使用的js,jq组件,不仅能满足用户个性化需求,也能使原本看似Cognos不可能完成事情变得可能。本文将介绍js,jq解决cognos报表开发中最常见的两种需求:给组件赋初始值和自定义组件。

实例中没有congos的日历而是用的My97DatePicker这个日历组件,初始日期设置为月初到今天,效果如下:

3.gif

js,jq和cognos交互的原理:

1.png

引入的组件通过js设置Cognos自带组件的值,Cognos自带组件和报表的过滤参数绑定,从而实现引入的组件控制报表上的数据。下面通过实例说明。希望大家很快能举一反三运用其他jq框架融入报表开发。

附件中提供了各种组件设置和获取值的方法,My97DatePicker包及资料。演示的报表如下:

2.png

3.png

----------------------------------------------设置初始值为特定时间段---------------------------------------

经常遇到要求一打开报表就显示最近一周或者一个月或者其他时间段的需求。本例演示设置日期为月初到当前日期。大家可以灵活的修改js实现不同需求,网上有很多现成的js可以参考使用。

4.png

拖入两个html 项目和两个文本提示框。文本提示框对应页面上的开始日期和结束日期参数。注意设置两个组件名称

5.png

逻辑说明: 文本提示框绑定开始和结束日期参数,js设置文本提示框的值为要求的日期段。从而达到了报表一打开就展示指定日期段。

隐藏页面组件的内容(有点常识都看得懂):

<div style="display:none">

设置参数初始值的内容(红色表示组件名称具体参考附件):

</div>

<script>

function init(){

//获取cognos页面上的对象

var form=getFormWarpRequest();

var startDate=form._textEditBoxStartDate;

var endDate=form._textEditBoxEndDate;

//获取日期对象

var date=new Date();

var y=date.getFullYear();

var m=date.getMonth() + 1;

//根据报表中日期格式调整

if(m<=9){

m='0'+m;

}

var d=date.getDate();

if(d<=9){

d='0'+d;

}

startDate.value=y+'-'+m+'-'+'01';

endDate.value=y+'-'+m+'-'+d;

//自动提交

promptButtonFinish();

}

</script>

<body onload=init()>

如果不想用其他日历控件,那么设置默认时间段已经完成, 再在报表页面用cognos的日历控件接收上面的参数就行。 要用其他第三方控件的往下看:

----------------------------------------------自定义组件---------------------------------------

拷贝 My97DatePicker到服务器(架构不同拷贝的路径也不同,我用的自带的tomcat)

6.png

为什么选择My97DatePicker,因为它功能十分强大:提供各种格式日期,年月,星期等的展示(参考附件资料),并且兼容性在项目上也得到了验证。 当然你也可以根据自己喜好引入其他jq组件,比如easyui。

逻辑说明: 文本提示框绑定开始和结束日期参数, My97DatePicker 日历控制文本提示框的值,从而达到控制报表过滤参数。

7.png

隐藏工具栏(方法很多,我就喜好这种):

<style>

.topRow{

display:none;

}

</style>

隐藏文本提示框:

<div style="display:none">

注意两个文本提示框的参数和名称

8.png

赋值的js:

</div>

<script type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>

<script>

//获取cognos页面上的对象

var form=getFormWarpRequest();

var startDate=form._textEditBoxTxtStart;

var endDate=form._textEditBoxTxtEnd;

//用文本框的值给日历组件赋值

document.getElementById("d5221A").value=startDate.value;

document.getElementById("d5222A").value=endDate.value;

//日历组件选择的值给文本框赋值

function changeIt(flag){

if(flag==1){

startDate.value=document.getElementById("d5221A").value;

}else{

endDate.value=document.getElementById("d5222A").value;

}

}

//cognos中提交表单查询数据

function submitData(){

promptButtonFinish();

}

</script>

两个My97DatePicker日历:

<input id="d5221A" class="Wdate" type="text"  onFocus="var d5222=$dp.$('d5222A');WdatePicker({onpicked:function(){d5222A.focus();changeIt(1)},maxDate:'#F{$dp.$D(\'d5222A\')}'})" />



<input id="d5222A" class="Wdate" type="text" onFocus="WdatePicker({onpicked:function(){changeIt(0)},minDate:'#F{$dp.$D(\'d5221A\')}'})"/>

查询按钮:

<input type="button" onclick="submitData()" value="查询数据">

至此,开发完成!

-----------------------------------------------总结--------------------------------------------

大家可以看得出cognos结合js其实很简单,而且报表开发结合js/jq,其他开源插件比如echart,easyui,百度地图API等将产生令人期待的展示效果和方式。Cognos,BI技术交流群 347488829。最后贴上一句老话:

10.jpg

推荐 10
本文由 攻城的狮子 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

4 个评论

很实用的,谢谢狮子
按照这个方法做下来了 真的很棒~
谢谢啦 狮子 66666
狮子,活动报表中 没有 文本框提示 这个组件,这个时候我该如何来创建和传递这个时间参数呢?

要回复文章请先登录注册