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

1.1 应用场景

当报表中参数面板中参数过多或者部分参数不经常作为过滤筛选，可将部分参数放在另一张报表上，用网页框的填写过滤条件，传到主报表。

1.2 实现思路

设计两张模板主模板和子模板，子模板作为主模板预览时的弹窗，点击链接到子模板填写过滤选项，最终将过滤值返回到主模板，主模板点击过滤进行筛选查询。

2.1 设计高级筛选_主模板

2.1.1 数据准备

新建数据集 ds1，写入数据库查询语句：

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 参数设置

将数据集参数类别 ID添加到参数面板，添加产品名称，供应商ID，产品ID，成本价，单价等到参数面板，并设置为不可见，自定义控件选择文本控件类型。并在文本控件右侧拖入一个按钮控件，点击该按钮可以弹出弹窗，控件名称为button0_c，并设置一个控件图标，按钮名字设为：高级筛选。

给按钮控件 button0_c 添加一个点击事件，

注：代码中的弹窗模板路径需要根据实际应用场景调整。

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 设计弹窗模板

如下图设计，添加需要添加到弹窗模板的参数过滤控件。

2.2.2 给筛选按钮添加事件

给筛选按钮添加一个点击事件。

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.2.3 保存报表

保存报表，重命名为高级筛选_子.cpt。

2.3 效果预览

打开模板高级筛选_主.cpt，选择数据分析预览，点击打开弹窗按钮，在产品名称填入“苹果汁”，点击筛选在主页面点击查询，可以查看苹果汁的数据。

注：分页预览、填报预览、数据分析都可以，但移动端预览是不支持的。

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

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

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

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