知识库

推荐内容

快逸做的更好

产品优势

您的位置: 首页 > 知识库 > 打印专题 > Web报表打印,免费快逸报表提供横向分页标题切分功能

Web报表打印,免费快逸报表提供横向分页标题切分功能

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

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

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

具体实现:

报表复杂报表设计" target="_blank" class="quieeLink1">设计如图:

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

重点是前三列:

第一列用来显示折叠或展开的图标,在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报表开发工具填报等" href="http://www.bonzerreport.com/" target="_blank">用.net报表工具打印报表研究.NET报表设计;web报表博客

发布日期:2009/05/20
本文分类: 打印专题