JS实现点击参数面板按钮显示或隐藏数据

编辑
  • 文档创建者:cherishdqy
  • 浏览次数:7601次
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1. 描述

    当报表中列表数据太多时,想通过显示按钮隐藏明细数据只显示统计数据。如下图示例,该如何实现?



    2. 思路

    通过 JavaScript 修改参数控件的值,在条件属性中,根据参数值显示或隐藏相应的行。

    3. 操作步骤


    1)打开报表%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\GroupReport\Group_2.cpt。

    2)在参数面板添加一个标签控件,控件名为label,设置标签控件不可见,控件值为显示



    3)在参数面板添加一个按钮控件,控件名为 button,控件值为“只显示合计数据”。


    4)选择 button 控件,添加点击事件,如下图所示:

    JavaScript 代码如下:

    /*获取隐藏的标签控件的值*/
    var label= this.options.form.getWidgetByName("label").getValue();
    /*判断标签控件的值*/
    if(label=='显示')
    {
    /*当标签控件的值为显示时,则改为隐藏,并修改按钮名称为显示所有数据*/
    this.options.form.getWidgetByName("label").setValue("隐藏");
    this.options.form.getWidgetByName("button").setValue("显示所有数据");
    }
    else
    {
    /*当标签控件的值不为显示时,则改为显示,并修改按钮名称为只显示合计数据*/
    this.options.form.getWidgetByName("label").setValue("显示");        
    this.options.form.getWidgetByName("button").setValue("只显示合计数据");
    }
    /*执行查询*/
    _g().parameterCommit();

    5)点击参数面板空白处,将点击查询前不显示报表内容属性的勾去掉。


    6)回到报表设计界面,右键B3单元格,添加条件属性,设置行高为 0 毫米,点击公式,添加公式条件为$label = '隐藏'



    7)保存模板,点击分页预览即可看到上图的效果。


    4. 预览效果

    4.1 PC 端预览效果

    222

    注:不支持移动端。


    5. 已完成模板

    模板效果在线查看请点击:JS 实现点击参数面板按钮显示或隐藏数据.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\10-JS实现点击参数面板按钮显示或隐藏数据.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

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