历史版本13 :自定义参数界面 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑


用户系统可能已经使用自己框架如 .Net、jQuery、Ext 等中的控件实现了条件查询界面，不需要再使用FR内置的参数界面，此时如何将用户表单控件的值传递给报表呢？，如下图所示：

222

2. 实现思路编辑

用户自己实现条件表单界面，在点击如“查询”等按钮时，获取控件的值拼接出最终的报表 URL，赋给 form 表单的 action，再触发表单提交事件。

若控件值为中文，表单提交前需要先使用 cjkEncode 进行编码。

3. 实现方法编辑

3.1 模板准备

打开模板%FR_HOME%webapps\webroot\WEB-INF\reportlets\demo\parameter\库存每页显示固定行.cpt

切换至参数界面，在右下角的高级选项中，把参数栏高度调至最小，去掉点击查询前不显示报表内容选项后面的勾，如下图：

222

模板另存为%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\parameter\库存每页显示固定行1.cpt

3.2 自定义表单界面

实际系统中使用的框架不同，控件的种类和定义方法也不同，因此如上图中的表单查询界面我们不做介绍，用户自行实现，该例使用最简单的 HTML 元素。

主要注意的是如果是 form 表单提交参数的话，action 地址及表单提交结果显示位置目标模板 target；

如该例中定义 form 表单时没有指定 action，target 的值为嵌入报表的 iframe 名字。

另外我们在点击查询按钮时需要先获取控件值，因此查询按钮 type 使用 button，不要使用 submit（直接触发 action）。
222

3.3 表单提交事件

点击“查询”按钮时，触发 autoSubmit()，在该方法中通过 JS 获取表单控件的值，拼接出完整的报表访问路径，并对最终的 URL 进行 encodeURI 编码。

将最终的报表 URL 赋给 form 的 action，并触发提交，返回的报表结果就会显示在指定的 iframe 中。

function autoSubmit() {
  var num = document.getElementById('num').value; //获取文本控件的值
  var row = document.getElementById('row').value; //获取下拉框控件的值
  //拼接出最终报表访问路径，并对完整的路径进行编码转换，防止乱码问题
  var reportURL = encodeURI("../../decision/view/report?viewlet=/demo/parameter/库存查询每页显示固定行.cpt&para=" + num + "&row=" + row);
document.paraForm.action = reportURL; //通过f orm 的 name 获取表单，并将报表访问路径赋给表单的a ction
  document.paraForm.submit(); //触发表单提交事件
}

3.4 示例完整代码

<html>
  <head>  
  <title>FineReport Demo</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <script type="text/javascript">
    function autoSubmit() {
  var num = document.getElementById('num').value; //获取文本控件的值
  var row = document.getElementById('row').value; //获取下拉框控件的值
  //拼接出最终报表访问路径，并对完整的路径进行编码转换，防止乱码问题
  var reportURL = encodeURI("../../decision/view/report?viewlet=/demo/parameter/库存查询每页显示固定行.cpt&para=" + num + "&row=" + row);
document.paraForm.action = reportURL; //通过 form 的 name 获取表单，并将报表访问路径赋给表单的 action
  document.paraForm.submit(); //触发表单提交事件
    }
  </script>
  </head>  
  <body>
<fieldset>
    <legend>查询表单：</legend>
<form name="paraForm" method="post" target="reportFrame">
最小库存量：<input type="text" name="num" id="num" value="1"/>
每页显示行数：<select name="row" id="row">  
<option value="10" select>10  
<option value="20">20
<option value="30">30
<input type="button" name="show" value="查询" onclick="autoSubmit()"/>
    </form> 
</fieldset>
    <iframe id="reportFrame" name="reportFrame" width="100%" height="100%" ></iframe>  
  </body>  
</html>

3.5 保存预览

已完成页面查看%FR_HOME%/webapps/webroot/help/page_demo/parameter.html

启动设计器，在浏览器输入：http://localhost:8075/webroot/help/page_demo/parameter.html ，效果如下图：


222