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

1.1 版本

1.2 預期效果

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

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

1.3 實現思路

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

2.1 準備資料集

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.2 設計報表

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

B1：split($col,",")

A2 : ds2.select(#0)   

B2 : ds2.value(A2,B1) 

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

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

2.3 新增參數元件

參數面板區域的元件有選擇展示那些欄的元件和篩選列資料的元件。如下圖所示：

2.3.1 新增列元件

1）點選範本「參數面板」區域，給 2.1 節中定義的資料集參數都新增參數元件。如下圖所示，為 area 參數新增到參數面板。

2）修改所有元件的類型為「下拉框元件」。如下圖所示：

3）為方便查看，修改每個「標籤元件」的值。如下圖所示：

4）分別為每個「下拉框元件」綁定資料字典，如下圖所示，為 area 元件綁定資料字典。

2.3.2 新增選擇列的元件

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

2）將範本參數 col 也新增到參數面板，選擇元件類型為「下拉複選框元件」，再將對應的「標籤元件」值修改為「需要選擇的列」。如下圖所示：

3）為 col 「下拉複選框元件」綁定資料字典。資料字典類型選擇公式，值為：TABLEDATAFIELDS("ds1")。如下圖所示：

2.3.3 隱藏欄元件

將地區等欄元件全部設定為不可見，即初始化時隱藏，後面將透過新增 JS 的方式，根據選擇顯示出來。如下圖所示：

2.4 新增 JS 事件

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

JavaScript 程式碼如下：

//獲取下拉框元件area
var area = this.options.form.getWidgetByName("area");
//獲取下拉框元件xl
var xl = this.options.form.getWidgetByName("xl");
//獲取下拉框元件cplx
var cplx = this.options.form.getWidgetByName("cplx");
//獲取下拉框元件cp
var cp = this.options.form.getWidgetByName("cp");
//獲取下拉框元件ywjc
var ywjc = this.options.form.getWidgetByName("ywjc");
//獲取下拉框元件xsy
var xsy = this.options.form.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);
    this.options.form.getWidgetByName("Labelarea").setVisible(true);
} else {    
    area.setVisible(false);
    this.options.form.getWidgetByName("Labelarea").setVisible(false);
}
	if(a2) {
    xl.setVisible(true);
    this.options.form.getWidgetByName("Labelxl").setVisible(true);
} else {    
    xl.setVisible(false);
    this.options.form.getWidgetByName("Labelxl").setVisible(false);
}
if(a3) {
    cplx.setVisible(true);
    this.options.form.getWidgetByName("Labelcplx").setVisible(true);
} else {    
    cplx.setVisible(false);
    this.options.form.getWidgetByName("Labelcplx").setVisible(false);
}
if(a4) {
    cp.setVisible(true);
    this.options.form.getWidgetByName("Labelcp").setVisible(true);
} else {    
    cp.setVisible(false);
    this.options.form.getWidgetByName("Labelcp").setVisible(false);
}
if(a5) {
    ywjc.setVisible(true);
    this.options.form.getWidgetByName("Labelywjc").setVisible(true);
} else {    
    ywjc.setVisible(false);
    this.options.form.getWidgetByName("Labelywjc").setVisible(false);
}
if(a6) {
    xsy.setVisible(true);
    this.options.form.getWidgetByName("Labelxsy").setVisible(true);
} else {    
    xsy.setVisible(false);
    this.options.form.getWidgetByName("Labelxsy").setVisible(false);
}
显示代码

2.5 效果預覽

儲存範本，點選「分頁預覽」，PC 端效果如下圖所示：

注：不支援行動端

已完成範本可參考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\JS實現動態選擇列並查詢值.cpt

點選下載範本：JS實現動態選擇列並查詢值.cpt