下面就通过web表格插件FineReport来简单介绍一下。
工具/原料
web表格插件FineReport7.1.1
大小：148.2M 适用平台：windows/linux
获得分页预览单元格
1、概述分页预览报表只能用于展现数据，有时我们也需要获取分页预览的报表中的某些单元格的值进行其他操作，比如在工具栏中显示报表总行数(总行数保存在某固定单元格中)。下面效果图中，我们获取了某单元格的值，然后对其进行了修改，如下所示：
![web表格插件FineReport教程：[4]分页预览JS](https://exp-picture.cdn.bcebos.com/423041db3620b93ac4502171ad0f8835dc8a8a6c.jpg)
2、原理BS访问某个cpt模板，报表servlet将会将cpt文件解析成对应的html，报表内容最终转换为一个table，位于id=content-container的div中。由于分页预览只是展现，在这种查看方式下FR没有现成单元格获取方法，可以用jquery语法获取指定单元格，如：$("tr[tridx=行号]","div.content-container").children().eq(列号)例如我们要获取某行某列的值，代码是：$("tr[tridx=行号]","div.content-container").children().eq(列号).html();如果我们要修改某行某列的值，代码是：$("tr[tridx=行号]","div.content-container").children().eq(列号).html(新值);
3、示例例如对于以上的分页报表，我们可以设定一个加载后事件。单击分页预览旁的设置图标，添加加载结束事件，具体的js如下：var a = $("tr[tridx=4]","div.content-container").children().eq(3).html();alert("第5行第4列值为："+a);$("tr[tridx=4]","div.content-container").children().eq(3).html(900);alert("第5行第4列值被修改为900");
分页预览改变鼠标所在行的颜色
1、问题描述在预览模板时，由于数据比较多，希望鼠标点击某行时该行高亮显示，如下图所示，此时要如何实现呢？
![web表格插件FineReport教程：[4]分页预览JS](https://exp-picture.cdn.bcebos.com/89402670d5413a8cb2d1a4bb1ffc508c9ace816c.jpg)
2、实现步骤打开一模板如：%FR_HOME%\WebReport\WEB-INF\reportlets\GettingStarted.cpt模板，点击模板>模板web属性>分页预览设置，选择为该模板单独设置，然后添加加载结束事件，具体js如下：contentPane.makeHighlight('red'); //使点击的行变成红色
3、分页预览模板，当鼠标点击某行时，某行变色。如果要实现鼠标滑过改行是改变颜色，js语句修改为contentPane.makeHighlight('red','mouseover');
定时刷新报表
1、问题描述对于监控系统，数据库中的数据是实时更新的，希望BS端的报表也能够实时更新数据，如实时监控股价走势。要如何设置才能实现报表的定时刷新呢？
2、实现思路点击模板>模板web属性，选择为当前模板设置，然后添加加载结束事件，使用setInterval方法定时刷新报表页面，JS如下：setInterval("self.location.reload();",10000); //10000ms即每10s刷新一次页面。
禁用右键
1、问题描述在jsp页面中调用模板，一般是将url放在iframe中，然后通过点击相应的树节点查看报表，若设置权限后，登录系统后可能有些用户通过点击右键中的属性查看url然后访问，这样对系统不是很安全，因此禁止用户通过右键查看url呢，此时可以使用禁用菜单右键功能。
2、实现步骤点击模板>模板web属性>分页预览设置，选择为该模板单独设置，在下面的事件设置里面添加一个加载结束事件，完整js代码如下：function nocontextmenu(event){event = event || window.event;if (event.which == 2 )event.returnValue = false;return false;}document.oncontextmenu = nocontextmenu;
3、这段代码的基本原理是当用户的页面事件为右键(event.which == 2)的时候返回false，禁止弹出菜单。如果模板中有参数面板，希望一调用模板就禁用右键，而不是查询之后禁用，则需要在参数面板的查询按钮中添加初始化事件，写入上述js代码。注：如果要禁用填报页面和数据分析页面的右键操作，则在模板>模板web属性的填报预览设置和数据分析设置中进行相同的设置。
在报表中调用客户的js
1、问题描述两种情况：1、报表嵌入在某个页面的iframe框架中，需要在报表模板中获取页面里面定义的方法；2、报表嵌入在某个页面的iframe框架中，需要在报表模板中获取页面中另一个iframe里面的方法。
2、解决方案首先通过js获取方法所在的对象，然后通过方法名调用：情况1中页面对于模板来说是父，因此可以通过parent.window.fnname()调用父页面的方法；情况2中通过父页面获取另一个iframe，再调用其中的方法：parent.window.getElementById("iframename").contentWindow.fnname()。
3、前提准备如下page1.html中，通过iframe嵌入了一张report报表及page2.html页面；在page1中定义了方法fun1：<html> <head> <title>page1</title><script type="text/javascript">function fun1(){alert("这是主页面中的方法！");} </script> </head> <body><p>这是page1</p><iframe src="/WebReport/page2.html" name="page2" id="page2" ></iframe><iframe src="/WebReport/ReportServer?reportlet=report.cpt" name="report" scrolling="auto"></iframe> </body></html>
4、其中page2.html中也定义了一个方法fun2：<html> <head> <title>page2</title> <script type="text/javascript">function fun2(){var name = alert("这是嵌在另一个iframe中页面里的方法！")} </script> </head> <body> <P>这是page2！</p> </body></html>
5、在模板中调用客户自己的js方法如在report.cpt模板的参数界面提交按钮点击事件中，获取页面page1及page2中的方法，js如下：var page1 = parent.window;page1.fun1();var page2 = page1.document.getElementById("page2").contentWindow;page2.fun2();
