JS实现参数组合筛选的前进和后退- FineReport帮助文档

1. 概述

1.1 應用場景

在一些特定場合下當參數過多時用戶進行參數組合篩選需要不斷自行調整控件值，會使參數篩選過濾變得很麻煩。

因此有的用戶想要實現參數篩選後自動保存參數組合，然後通過點擊按鈕實現參數組合篩選的前進和後退功能。效果如下圖所示：

1.2 實現思路

通過定義模板二維字符數組和數組索引來保存已經進行了篩選的參數組合，然後通過數組索引來确定前進和後退的位置，進而取到相應的參數組合。

2. 示例

2.1 數據準備

新建數據集 ds1，數據庫查詢語句爲：

SELECT * FROM 銷量

WHERE 地區 = '${DIQU}'

AND 銷售員 = '${SALES}'

2.2 報表設計

1）新建決策報表，添加參數面板和相關控件，body 組件中添加一個報表塊，表格設計如下圖所示：

2）在參數面板中添加參數控件 DIQU 和 SALES，選擇控件類型爲「下拉框控件」。如下圖所示：

3）分别爲其綁定數據字典爲 FRDemo 銷量表的地區和銷售員字段。如下圖所示：

4）在參數面板上添加三個「按鈕控件」，分别命名爲 resert ，back ，forward。如下圖所示：

5）編輯報表塊，設計報表樣式，如下圖所示。

最終報表樣式如下圖所示：

2.3 添加JS事件

1）參數面板定義模板全局二維字符串數組和數組索引，保證該數據可以在模板的任意一個 function 中都可以直接調用。使用 window 定義數組，其中的值可以自行任意定義。

JS 代碼如下：

window.str = [["華東","孫林"],["華北","王偉"]]
window.index = 0;

2）在查詢按鈕中添加點擊事件來保存每一次篩選後的參數組合值到二維字符數組中。

JS 代碼如下：

index = index + 1;
//獲取控件中的參數值
var para1 = this.options.form.getWidgetByName("DIQU").getValue();
var para2 = this.options.form.getWidgetByName("SALES").getValue();
//将參數組合保存在二維數組中
str[index-1] = [para1,para2]

3）在 back 控件中加入後退的 JS 點擊事件，先獲取字符串數組中的索引參數組合，然後将其賦值給控件，最後調用參數提交。

JS 代碼如下：

//獲取二維字符數組中的索引參數組合
var para1 = str[index-2][0];
var para2 = str[index-2][1];
//将參數組合賦值給參數控件
this.options.form.getWidgetByName("DIQU").setValue(para1);
this.options.form.getWidgetByName("SALES").setValue(para2);
index = index - 1;
_g().parameterCommit()

4）在 forward 按鈕控件中加入參數組合前進的JS事件，同樣先獲取字符串數組中的索引參數組合，然後将其賦值給控件，最後調用參數提交。

JS 代碼如下：

var para1 = str[index][0];
var para2 = str[index][1];
this.options.form.getWidgetByName("DIQU").setValue(para1);
this.options.form.getWidgetByName("SALES").setValue(para2);
index = index + 1;
_g().parameterCommit()

5）在 reset 按鈕中給參數賦初始值然後調用參數提交即可，此處的輸出值可以自由定義。

JS 代碼如下：

//賦予初值
this.options.form.getWidgetByName("DIQU").setValue("華北");
this.options.form.getWidgetByName("SALES").setValue("王偉");
//參數提交
_g().parameterCommit()