自定义参数界面

编辑
  • 文档创建者:文档助手1
  • 浏览次数:10030次
  • 编辑次数:13次
  • 最近更新:Kevin-s 于 2019-06-09
  • 1. 问题描述


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


    2. 实现思路

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

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

    3. 实现方法

    3.1 模板准备

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

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



    模板另存为%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)。

    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 ,效果如下图:




    附件列表


    主题: 部署集成
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]