【参数界面JS实例】JS实现网页框高级过滤筛选

RosieY

1. 概述

1.1 预期效果

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

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

复制代码

2.1.2 设计报表

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

2.1.3 设置参数控件

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

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

如下图所示：

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

注：代码中的弹窗模板路径需要根据实际应用场景调整。若修改模板名称和路径，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=doc/JS/参数界面JS实例/高级筛选_子.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 设置参数控件

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

2.2.2 添加按钮控件

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

2.2.3 添加 JS 事件

1）给「筛选」按钮添加一个点击事件，如下图所示：

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）给「筛选」按钮添加一个初始化后事件，如下图所示：

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 端支持「分页预览」、「填报预览」、「数据分析」，不支持移动端。

3. 模板下载

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

模板见附件

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

模板见附件

编辑于 2020-12-17 16:40

用户b1956520 · 发表于 2022-10-18 09:24:00

这个是适用于什么场景？看的一脸懵！

1回帖数	2关注人数	10759浏览人数
最后回复于：2022-10-18 09:24

提问

【参数界面JS实例】JS实现网页框高级过滤筛选