FVS實現動態選擇欄並查詢值

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 應用場景

當使用者做比較大的資料報表時，遇到報表的資料欄比較多，可以動態選擇需要的欄並查詢對應的值。如下圖所示：

注：使用此方案時，為了使用流暢，建議動態選擇欄和資料量不宜過多，否則會因為效能問題瀏覽不暢。

1.2 實現思路

透過 JS 程式碼實現參數元件的隱藏與顯示，控制查詢條件；透過函式和擴展實現根據查詢條件動態顯示欄資料。

2.1 建立範本

1）在 FineReport 設計器左上角點選「檔案>建立視覺化看板」。

2）在「建立空白看板」Tab 中，可自訂範本名稱和尺寸，選擇 範本樣式 為「內建樣式>深色主題一」。

3）點選「建立看板」。

2.2 準備資料

1）建立資料集 ds1 用來給參數元件綁定選項值來源，SQL 語句為： select * from 銷量

2）建立資料集 ds2 用來拖入儲存格中作為報表資料值，SQL 語句為：

select * from 銷量

where 1=1

${if(len(area) == 0,"","and 地區 = '" +area + "'")} 

${if(len(xsy) == 0,"","and 銷售員 = '" +xsy + "'")} 

${if(len(cplx) == 0,"","and 產品類型 = '" +cplx + "'")} 

${if(len(cp) == 0,"","and 產品 = '" +cp + "'")} 

${if(len(xl) == 0,"","and 銷量 = '" +xl + "'")} 

${if(len(ywjc) == 0,"","and 英文簡稱 = '" +ywjc + "'")} 

如何定義資料集參數可參考：資料集參數

2.3 設計表格組件

1）點選組件區「其他>表格組件」，新增到畫布中，並將其拉動到合適的大小和位置。

2）選中表格組件，點選右側配置區「內容>編輯組件」，進入表格編輯介面。

3）在儲存格 A2、B1、B2 儲存格中輸入公式值，並新增邊框。如下圖所示：

B1：split($col,",")

A2 : ds2.select(#0)

B2 : ds2.value(A2,B1) 

4）設定 B1 儲存格為「橫向擴展」，A2儲存格為「縱向擴展」。如下圖所示：

以上便完成表格的設計，預覽時表格內容會跟隨參數值變化。相關簡單範例可參考：使用函式實現動態欄 。

2.4 設計元件組件

2.4.1 新增列元件

1）點選組件區「其他>標題」向畫布中新增標題組件，分別設定「標題組件」的內容、組件名稱，並調整到適當的位置。

以 地區 元件為例，如下圖所示：

2）點選「元件>下拉框」向畫布中新增下拉框元件，分別設定「下拉框元件」的綁定參數、組件名稱，並調整到適當的位置。

以 area 元件為例，如下圖所示：

注：必須保證下拉框元件綁定參數與參數名稱一致。

3）分別為每個「下拉框元件」設定選項值來源。以 area 元件為例，步驟如下圖所示：

2.4.2 新增選擇列的元件

1）點選菜單欄「範本>範本參數」，新增一個範本參數col。如下圖所示：

2）再向畫布中新增一個「標題組件」和「下拉框元件」，點選「元件>查詢按鈕」向畫布中新增查詢按鈕，分別調整到適當的位置。「標題組件」的內容修改為 需要選擇的列 ，「下拉框元件」的綁定參數和組件名稱設定為col。如下圖所示：

3）為 col 「下拉框元件」設定選項值來源。選項值來源類型選擇公式，值為：TABLEDATAFIELDS("ds1")，勾選「開啟多選」。如下圖所示：

4）在查詢按鈕的聯動元件列表中，選中所有元件。如下圖所示：

2.4.3 隱藏列元件

同時選中地區等列元件，點選畫布上方「組合」按鈕，選擇組合即可將這些組件合併成組。將該組合設定為不可見，即初始化時隱藏，後面將透過新增 JS 的方式，根據選擇顯示出來。如下圖所示：

2.5 新增JS事件

1）給 col 「下拉框元件」新增一個「編輯結束」，主要用於控制地區等參數元件的隱藏顯示。如下圖所示：

JavaScript 程式碼如下：

//獲取下拉框元件area
var area = duchamp.getWidgetByName("area");
//獲取下拉框元件xl
var xl = duchamp.getWidgetByName("xl");
//獲取下拉框元件cplx
var cplx = duchamp.getWidgetByName("cplx");
//獲取下拉框元件cp
var cp = duchamp.getWidgetByName("cp");
//獲取下拉框元件ywjc
var ywjc = duchamp.getWidgetByName("ywjc");
//獲取下拉框元件xsy
var xsy = duchamp.getWidgetByName("xsy");
//獲取下拉框選中值
var a = this.getValue();
//判斷a中是否包含對應的欄位,傳回true或false
var a1 = a.includes("地區");
var a2 = a.includes("銷量");
var a3 = a.includes("產品類型");
var a4 = a.includes("產品");
var a5 = a.includes("英文簡稱");
var a6 = a.includes("銷售員");
//alert(a1,a2,a3,a4,a5,a6);
//對不同的元件設定隱藏顯示
	if(a1) {
    area.setVisible(true);
    duchamp.getWidgetByName("地區標題").setVisible(true);
} else {    
    area.setVisible(false);
    duchamp.getWidgetByName("地區標題").setVisible(false);
}
	if(a2) {
    xl.setVisible(true);
    duchamp.getWidgetByName("銷量標題").setVisible(true);
} else {    
    xl.setVisible(false);
    duchamp.getWidgetByName("銷量標題").setVisible(false);
}
if(a3) {
    cplx.setVisible(true);
    duchamp.getWidgetByName("產品類型標題").setVisible(true);
} else {    
    cplx.setVisible(false);
    duchamp.getWidgetByName("產品類型標題").setVisible(false);
}
if(a4) {
    cp.setVisible(true);
    duchamp.getWidgetByName("產品標題").setVisible(true);
} else {    
    cp.setVisible(false);
    duchamp.getWidgetByName("產品標題").setVisible(false);
}
if(a5) {
    ywjc.setVisible(true);
    duchamp.getWidgetByName("英文簡稱標題").setVisible(true);
} else {    
    ywjc.setVisible(false);
    duchamp.getWidgetByName("英文簡稱標題").setVisible(false);
}
if(a6) {
    xsy.setVisible(true);
    duchamp.getWidgetByName("銷售員標題").setVisible(true);
} else {    
    xsy.setVisible(false);
    duchamp.getWidgetByName("銷售員標題").setVisible(false);
}

2.6 觸發列元件與表格聯動

value 函式在 FVS 範本中直接使用於元件和表格組件之間時，不會觸發聯動效果，可使用公式$area取值觸發聯動。詳情參見具體文檔： value函式在FVS/決策報表中無聯動效果。

1）選中表格組件，點選右側配置區「內容>編輯組件」，進入表格編輯介面。

2）以列元件的參數 area 為例，在右側任意儲存格插入公式：$area，其餘五個參數操作相同，如下圖所示：

3）選中需要隱藏的列標籤，右擊，在彈出選單中選擇隱藏。如下圖所示：

2.7 效果預覽 

2.7.1 PC 端

儲存範本，點選「預覽」，PC 端效果如本文 1.1節所示。

2.7.2 行動端

行動端請自行組合組件並開啟 重佈局 ，預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS實現動態選擇欄並查詢值.fvs