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

1. 概述

1.1 预期效果

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

1.2 实现思路

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

2. 示例
2.1 设计主模板
2.1.1 数据准备

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

sql 语句为：

1. select * from 产品
   
2. 
   
3. where 1=1
   
4. 
   
5. ${if(len(类别ID) == 0,"","and 类别ID = '" + 类别ID + "'")}
   
6. 
   
7. ${if(len(PRODUCT1) == 0,"","and 产品名称 = '" + PRODUCT1 + "'")}
   
8. 
   
9. ${if(len(gysid) == 0,"","and 供应商ID = '" + gysid + "'")}
   
10. 
    
11. ${if(len(PRODUCT_ID) == 0,"","and 产品ID = '" + PRODUCT_ID + "'")}
    
12. 
    
13. ${if(len(cbj) == 0,"","and 成本价 = '" + cbj + "'")}
    
14. 
    
15. ${if(len(dj) == 0,"","and 单价 = '" + dj + "'")}
    
16. 
    
17. order by 产品ID

复制代码

2.1.2 设计报表

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

2.1.3 设置参数控件

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

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

如下图所示：

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

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

JavaScript 代码如下：

1. window.form = this.options.form; //当前的form赋值给全局变量
   
2. var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>"); // iframe参数的命名及宽高等
   
3. $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为点击查询时，对话框中显示的子报表
   
4. var o = {
   
5. title : "筛选所需数据并返回",
   
6. width : 600,//调整对话框宽度
   
7. height: 300//调整对话框高度
   
8. };
   
9. 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 代码如下：

1. var form = window.parent.contentPane;
   
2. 
   
3. var cpmc = this.options.form.getWidgetByName("PRODUCT1").getValue();
   
4. var cbj = this.options.form.getWidgetByName("cbj").getValue();
   
5. var gysid = this.options.form.getWidgetByName("gysid").getValue();
   
6. var dj = this.options.form.getWidgetByName("dj").getValue();
   
7. var cpid = this.options.form.getWidgetByName("PRODUCT_ID").getValue();
   
8. 
   
9. //拿取当前页面的父窗口（即获取填报界面）
   
10. var Widget = form.parameterEl.getWidgetByName('PRODUCT1');
    
11. Widget.setValue(cpmc);
    
12. 
    
13. var Widget = form.parameterEl.getWidgetByName('cbj');
    
14. Widget.setValue(cbj);
    
15. 
    
16. var Widget = form.parameterEl.getWidgetByName('gysid');
    
17. Widget.setValue(gysid);
    
18. 
    
19. var Widget = form.parameterEl.getWidgetByName('dj');
    
20. Widget.setValue(dj);
    
21. 
    
22. var Widget = form.parameterEl.getWidgetByName('PRODUCT_ID');
    
23. Widget.setValue(cpid);
    
24. //form.setCellValue($("div.fr-trigger-editor.ui-state-enabled[widgetname='SUPPLIERS_NO']"),val);
    
25. //赋值的索引要做下处理，做对应
    
26. //form.setCellValue(col,row-1,va2);
    
27. //给文本控件的单元格（A2）赋值val，0代表第一列，1代表第2行
    
28. window.parent.FR.closeDialog(); //确定获取值后，关闭取消父窗口的对话框
    
29. window.parent.FR.destroyDialog();

复制代码

2）给「筛选」按钮添加一个初始化后事件，如下图所示：

JavaScript 代码如下：

1. var form = window.parent.contentPane;
   
2. var pro = form.parameterEl.getWidgetByName('PRODUCT1').getValue();
   
3. 
   
4. var pro1 = this.options.form.getWidgetByName("PRODUCT1");
   
5. pro1.setValue(pro);
   
6. 
   
7. 
   
8. 
   
9. var cpmc = form.parameterEl.getWidgetByName("PRODUCT1").getValue();
   
10. var cbj = form.parameterEl.getWidgetByName("cbj").getValue();
    
11. var gysid =form.parameterEl.getWidgetByName("gysid").getValue();
    
12. var dj = form.parameterEl.getWidgetByName("dj").getValue();
    
13. var cpid = form.parameterEl.getWidgetByName("PRODUCT_ID").getValue();
    
14. 
    
15. //拿取当前页面的父窗口（即获取填报界面）
    
16. var Widget = this.options.form.getWidgetByName('PRODUCT1');
    
17. Widget.setValue(cpmc);
    
18. 
    
19. var Widget = this.options.form.getWidgetByName('cbj');
    
20. Widget.setValue(cbj);
    
21. 
    
22. var Widget = this.options.form.getWidgetByName('gysid');
    
23. Widget.setValue(gysid);
    
24. 
    
25. var Widget = this.options.form.getWidgetByName('dj');
    
26. Widget.setValue(dj);
    
27. 
    
28. var Widget = this.options.form.getWidgetByName('PRODUCT_ID');
    
29. 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

模板见附件

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