JS实现网页框高级过滤筛选

  • 文档创建者:Kevin-s
  • 编辑次数:13次
  • 最近更新:RosieY 于 2020-10-19
  • 1. 概述

    1.1 预期效果

    当报表参数面板中参数过多或者部分参数不经常作为过滤筛选时,可将部分参数放在另一张报表上。主报表中点击按钮,弹出子报表,在子报表填写过滤条件后传回主报表。如下图所示:

    1598788192177708.gif

    1.2 实现思路

    设计两张模板,主模板和子模板。主模板参数面板中添加按钮,通过 JS 链接到子模板;子模板中实现参数筛选,通过 JS 将筛选的值返回到主模板 ,主模板中点击查询得到筛选的数据。

    2. 示例

    2.1 设计主模板

    2.1.1 数据准备

    新建数据集 ds1。如下图所示:

    sql 语句为:

    select * from 产品 

    where 1=1

    ${if(len(类别ID) == 0,"","and 类别ID = '" + 类别ID + "'")}

    ${if(len(PRODUCT1) == 0,"","and 产品名称 = '" + PRODUCT1 + "'")}

    ${if(len(gysid) == 0,"","and 供应商ID = '" + gysid + "'")}

    ${if(len(PRODUCT_ID) == 0,"","and 产品ID = '" + PRODUCT_ID + "'")}

    ${if(len(cbj) == 0,"","and 成本价 = '" + cbj + "'")}

    ${if(len(dj) == 0,"","and 单价 = '" + dj + "'")}

    order by 产品ID

    1597297435322220.png

    2.1.2 设计报表

    设计报表样式,B2~D2 单元格拖入对应标题名称的数据列。如下图所示:

    1600870923491758.png

    2.1.3 设置参数控件

    1)将数据集参数类别 ID、产品名称、供应商ID、产品ID、成本价、单价添加到参数面板,控件类型选择文本框控件。除类别 ID外,其余全设置为不可见。

    2)添加一个按钮控件,填写按钮名字为「高级筛选」,并设置一个控件图标,点击该按钮将会实现弹出子报表的效果。

    如下图所示:

    1600912408127518.png

    3)给按钮控件 「高级筛选」添加一个点击事件。如下图所示:

    1600912454735260.png

    注:代码中的弹窗模板路径需要根据实际应用场景调整。若修改模板名称和路径,JS中也要做相应修改。

    JavaScript 代码如下:

    window.form = this.options.form; //当前的form赋值给全局变量
    var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>"); // iframe参数的命名及宽高等
    $iframe.attr("src", 
    "http://localhost:8075/webroot/decision/view/report?viewlet=高级筛选_子.cpt&ref_t=design&op=view&ref_c=9e2cfd00-e8b1-4f7a-b870-bd0574f39811"); 
    //childtest.cpt为点击查询时,对话框中显示的子报表
    var o = {
    title : "筛选所需数据并返回",
    width : 600,//调整对话框宽度
    height: 300//调整对话框高度
    };
    FR.showDialog(o.title, o.width, o.height, $iframe,o); //弹出对话框

    2.1.4 保存模板

    保存模板,重命名为高级筛选_主.cpt。

    2.2 设计子模板

    2.2.1 设置参数控件

    新建模板,对照主模板中参数过滤控件,在新模板中添加需要的参数过滤控件。如下图所示:

    image.png

    2.2.2 添加按钮控件

    添加一个按钮控件,控件名字为「筛选」。如下图所示:

    1600912736364542.png

    2.2.3 添加 JS 事件

    1)给「筛选」按钮添加一个点击事件,如下图所示:

    1600913130731181.png

    JavaScript 代码如下:

    var form = window.parent.contentPane;

    var cpmc = this.options.form.getWidgetByName("PRODUCT1").getValue();
    var cbj = this.options.form.getWidgetByName("cbj").getValue();
    var gysid = this.options.form.getWidgetByName("gysid").getValue();
    var dj = this.options.form.getWidgetByName("dj").getValue();
    var cpid = this.options.form.getWidgetByName("PRODUCT_ID").getValue();

    //拿取当前页面的父窗口(即获取填报界面)
    var Widget = form.parameterEl.getWidgetByName('PRODUCT1');
    Widget.setValue(cpmc);

    var Widget = form.parameterEl.getWidgetByName('cbj');
    Widget.setValue(cbj);

    var Widget = form.parameterEl.getWidgetByName('gysid');
    Widget.setValue(gysid);

    var Widget = form.parameterEl.getWidgetByName('dj');
    Widget.setValue(dj);

    var Widget = form.parameterEl.getWidgetByName('PRODUCT_ID');
    Widget.setValue(cpid);
    //form.setCellValue($("div.fr-trigger-editor.ui-state-enabled[widgetname='SUPPLIERS_NO']"),val);
    //赋值的索引要做下处理,做对应
    //form.setCellValue(col,row-1,va2); 
    //给文本控件的单元格(A2)赋值val,0代表第一列,1代表第2行
    window.parent.FR.closeDialog(); //确定获取值后,关闭取消父窗口的对话框
    window.parent.FR.destroyDialog();

    2)给「筛选」按钮添加一个初始化后事件,如下图所示:

    1600913925199646.png

    JavaScript 代码如下:

    var form = window.parent.contentPane;
    var pro = form.parameterEl.getWidgetByName('PRODUCT1').getValue();

    var pro1 = this.options.form.getWidgetByName("PRODUCT1");
    pro1.setValue(pro);



    var cpmc = form.parameterEl.getWidgetByName("PRODUCT1").getValue();
    var cbj = form.parameterEl.getWidgetByName("cbj").getValue();
    var gysid =form.parameterEl.getWidgetByName("gysid").getValue();
    var dj = form.parameterEl.getWidgetByName("dj").getValue();
    var cpid = form.parameterEl.getWidgetByName("PRODUCT_ID").getValue();

    //拿取当前页面的父窗口(即获取填报界面)
    var Widget = this.options.form.getWidgetByName('PRODUCT1');
    Widget.setValue(cpmc);

    var Widget = this.options.form.getWidgetByName('cbj');
    Widget.setValue(cbj);

    var Widget = this.options.form.getWidgetByName('gysid');
    Widget.setValue(gysid);

    var Widget = this.options.form.getWidgetByName('dj');
    Widget.setValue(dj);

    var Widget = this.options.form.getWidgetByName('PRODUCT_ID');
    Widget.setValue(cpid);

    2.2.4 保存模板

    保存模板,重命名为高级筛选_子.cpt。

    注:若修改模板名称,注意也要修改相应 JS 中的模板名称。

    2.3 效果预览

    打开主模板,选择「分页预览」,点击「高级筛选」按钮,弹出参数筛选网页框,在产品名称填入「苹果汁」,点击「筛选」参数筛选网页框关闭,在主页面点击「查询」,可以查看苹果汁的数据。如下图所示:

    注:PC 端支持「分页预览」、「填报预览」、「数据分析」,不支持移动端。

    1598788238267009.gif

    3. 模板下载

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\高级筛选_主.cpt

    点击下载模板:高级筛选_主.cpt

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\高级筛选_子.cpt

    点击下载模板:高级筛选_子.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!