Posts Tagged ‘javascript’

如何通过JavaScript函数获取Web报表单元格的值

12.19.2009 by hewei - 0 Comment - 0
Posted in web报表
报表展现在web页面以后,有时需要通过鼠标点击单元格的事件来获取该单元格的值。怎样来实现这个需求?快逸报表中通过在jsp页面中设定JavaScript函数就可以完成。 首先,我们需要知道报表是如何在页面上展现的。设计器安装目录: \webapps\quiee\reportJsp中的showReport.jsp就是一个典型的展现报表的jsp例子: 展现快逸报表的jsp文件 从上图可以看到整个报表标签< report:html>包含在一个< table>标签中,在报表扩展的时候,就是在这个table中去扩展。 想通过点击鼠标去获得单元格的值,就要定位单元格。如何去定位一个单元格呢,就要通过< report:html>中的name属性,然后加上单元格的位置来定位例如:report1_A1就代表的是报表的A1单元格。 接下来,在页面中增加一段JavaScript函数,用这个函数去获得单元格的值。 < script language=”javascript”> function _getDispValueByName(){ var cell = document.getElementById(”report1_A1″); //通过ID去定位单元格位置 alert(cell.value); //用alert()函数弹出这个单元格的值 } < /script> 最后,可以做一下效果展示,在页面上增加一个按钮,来触发这个JavaScript函数。 < input type=”button” onclick=_getDispValueByName() value=”check”> 效果如下: 通过JavaScript函数获取Web报表单元格的值 通过这个例子,不仅告诉我们怎样去定位单元格获取单元格的值,还告诉我们快逸报表中是可以使用强大的JavaScript函数来实现很多特殊功能的。
原文链接: 如何通过JavaScript函数获取Web报表单元格的值

在润乾报表中使用超链接–触发js函数

10.17.2009 by fengzhou - 0 Comment - 0
Posted in java报表相关

润乾报表提供了为单元格设置超链接属性的功能。润乾报表提供的超链接可分为常规超链接、超链接中引用单元格的值,超链接中触发js函数三种类型。前面的文章我们已经介绍过了前两种,这里将介绍如何在超链接中使用js函数。下面给出一个简单的例子。

首先,新建一个报表,在E1中添加文字:触发js函数,为了看起来明显,设置字体颜色为蓝色,并为字体加上下划线,设置E1 超链接 属性的值为:javascript:tips()。其中tips()为待触发的js函数,如下图

cfjssj.png

然后,在发布报表的页面上,编写js函数tips()如下

<script launguage=”javascript”>
function tips(){
alert(”被超链接触发的js弹出提示框!”);
}
</script>

或者,可以直接在该单元格的超链接属性的表达式中写javascript函数,如下图

biaodashi.png

此时就不用在发布报表的jsp页面上编写js函数了。

最后,发布报表,当点击报表E1中文字 :触发js函数,就会执行js函数,弹出提示框,如下图

cfjshsxs.png

这样就实现了在超链接中触发js函数。

注意:润乾报表中提供利用单元格的超链接属性触发js函数的接口,至于使用什么样的js函数,需要用户根据需要自己定义。例如,用户可以编写一个js函数,完成弹出新窗口展现报表的功能,函数举例如下

//在弹出新窗口中展现报表,并向该页面传递参数id的值
function show_product(id){
var strurl=’./chaolianjie.jsp?raq=test.raq&arg1=’+id;
window.open(strurl,”_blank”,” Width=650 ,Height=500,top=100,left=100″);
}

然后在报表触发单元格里写入如下超链接表达式,把A1的真实值传递到新窗口打开的报表展现页面。


引自:润乾报表知识库
相关文章:利用超链接传递下拉数据集的值特殊符号的处理如何使用序号函数给报表加序号动态设置滚动条高度宽度的方法

可树形展开的折叠报表的制作

07.06.2009 by fengzhou - 0 Comment - 0
Posted in java报表相关

润乾报表最终在页面上是以纯html方式进行展现的,也就是说,是一个静态页面。那么,当最终用户需要web报表中提供一些交互能力时,就需要结合 javascript脚本来实现。比如下图中这样的折叠报表(单击加号可以展开分组),就可以用润乾报表来设计报表模板,再结合简单的 javascript脚本即可实现。

1.png

实现思路:报表在网页上展示时,整体是一个HTML的table对象。因此可以在单元格中加入一些标识,然后通过javascript动态设置css的display属性来实现。

具体实现:

报表设计如下图所示:

2.png

重点是前三列:

第一列用来显示折叠或展开的图标,在A3单元格的HTML事件属性中写入表达式(多级展开的情况以此类推):”OnClick=\”changeNodeState(”+B3+”)\””

第二列用来保存每一行的标识(这个标识应该是全表唯一的),B4单元格中写有表达式D4,为了美观,这里将其设置为了白色;

第三列用于存自己所属的父级标识,处于根级的行保留空值即可,该列整体设置为隐藏。

javascript处理部分如下,在发布报表的jsp中加入代码即可:

<script language=”javascript”>
var tree;
function init(){

/** 构建一个树实例, 参数分别为:
* 报表名–对应report标签中的name
* 唯一标识所在列–第一列为0,以此类推,下同
* 父级所在列
* 用于显示图标的列
* 表头所占行
*/
tree = new TableTree(”report1″,1,2,0,2);
tree.init();
// 初始化数据
tree.collapseAll(); // 折叠所有 }

function changeNodeState(node){ // 更改节点状态,展开/折叠
var node = tree.getNode(node);
if(node.isOpened())
node.collapseAll();
else
node.expand();
}
</script>

<body onload=”init()”>

引自:润乾技术知识库
原文链接:可树形展开的折叠报表的制作
相关文章:在润乾参数表单中如何不点击查询按钮自动传参关于润乾报表自定义函数报错的问题决策分析解决方案润乾报表填报处理类问题

用免费的快逸报表怎么做折叠报表

06.27.2009 by fengzhou - 0 Comment - 0
Posted in java报表相关

最终用户常常需要web报表中提供一些交互的能力。比如下图中这样的折叠报表(单击加号可以展开分组),使用免费的快逸报表工具结合简单的javascript脚本即可实现。

使用快逸报表做的折叠报表

实现思路:报表在网页上展示时,整体是一个HTML的table对象。因此可以在单元格中加入一些标识,然后通过javascript动态设置css的display属性来实现。

具体实现:

报表设计如图:

“快逸折叠报表设计界面”

重点是前三列:

第一列用来显示折叠或展开的图标,在A3单元格的HTML事件中加入表达式(多级展开的情况以此类推):

“OnClick=\”changeNodeState(”+B3+”)\””

第二列用于保存每一行的标识(这个标识应该是全表唯一的),B4单元格中写有表达式D4,为了美观,要将其设置为白色了;

第三列用于存自己所属的父级标识,处于根级的行保留空值即可,该列整体隐藏。

另外,由于折叠时会造成报表最后一行的下边框消失(这是IE的问题),所以请追加一行,并将其填充为边框颜色,设置行高为1。

javascript处理部分如下,在jsp中加入代码即可:

<script language=”javascript”>

var tree;

function init(){

/** 构建一个树实例

* 参数分别为:

* 报表名 - 对应report标签中的name

* 唯一标识所在列 - 第一列为0,以此类推,下同

* 父级所在列

* 用于显示图标的列

* 表头所占行 -

*/

tree = new TableTree(”report1″,1,2,0,2);

tree.init(); // 初始化数据

tree.collapseAll(); // 折叠所有

}

// 更改节点状态,展开/折叠

function changeNodeState(node){

var node = tree.getNode(node);

if(node.isOpened())

node.collapseAll();

else

node.expand();

}

</script>

<body onload=”init()”>

……

引自:报表工具知识库
原文链接:用免费的快逸报表怎么做折叠报表
相关文章:使用javascript将页面中的关键字高亮显示 ; 报表折叠方案 ; 用快逸来实现Web应用中的下拉树;快逸报表:在jboss中部署报表的一个异常解决
其他相关内容:免费的web报表开发工具; 用.net报表工具打印报表; 研究.NET报表设计;web报表博客

简单的办法在非J2EEweb应用中使用快逸报表

06.09.2009 by fengzhou - 0 Comment - 0
Posted in web报表应用

目前,有相当一部分是web应用是使用非J2EE开发的,比如:.net、php或者asp等等。那么免费的快逸报表设计器制作的报表可以在这些页面上显式么?可以!

快逸报表提供基于javascript脚本的方式来实现这个任务:

1、按照常规步骤部署报表服务器。

2、在web页面上使用javascript脚本调用快逸报表。

下面的示例是一个HTML文件,在ASP、PHP等网页中的用法与此相同。
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body>
<script language=javascript src=”runqianReport.js”>
</script>

<table align=center width=90% style=”font-family:宋体;font-size:13px”>
<tr height=40><td width=100% align=center style=”font-size:16px;font-weight:bold”>快逸报表JS控件演示</td></tr>
<tr>
<td align=center>
<script language=javascript>
var report = new runqianReport( “80%”, “400px” );
report.setBorder( “border:1px solid blue” ); //设置控件为兰色细边框
report.setServerURL( http://192.168.0.27:7070/report );
</script>
</td>
</tr>
<!– 下面这个查询是在控件外的,也可以用report.setParamFile( “xxx.raq” )在控件里面显示一个查询表单进行查询 –>
<tr><td align=center>
性别<select id=sexBox>
<option value=”1″>男</option>
<option value=”2″>女</option>
</select>
班级<select id=classBox>
<option value=”1″>一班</option>
<option value=”2″>二班</option>
</select>
<input type=button value=”查询” onclick=”query()”>
</td></tr>
</table>
<script language=javascript>
function query() {
report.init();
report.setFile( “scores.raq” );
report.setSaveAsName( “学生成绩表” );
report.putParam( “sex”, document.getElementById( “sexBox” ).value );
report.putParam( “class”, document.getElementById( “classBox” ).value );
report.display();
}
query();
</script>

</body>
</html>

引自:报表工具知识库
原文链接:简单的办法在非J2EEweb应用中使用快逸报表
相关文章:使用javascript将页面中的关键字高亮显示 ; 快逸报表中将Excel作为数据源 ; 何为.NET?如何影响我?;博计报表数据源找不到的一个原因
其他相关内容:Web报表软件分类-实现技术;ASP Web报表开发软件; 研究BI报表设计web报表博客