使用圖表工具時如何動態顯示參數控件?

由於業務的需要,很多情況下需要當滿足某個條件時,某些查詢條件才顯示出來:

選擇年報,顯示年的下拉框控件,如圖所示:

下面我們就通過圖表工具FineReport來向大家介紹。

工具/原料

圖表工具FineReport7.1.1

大小:148.2M 適用平臺:windows/linux

方法/步驟

打開模板

修改數據集

將數據集修改為:SELECT * FROM 訂單 where 1=1 ${if(type=="日報","and date(訂購日期) = '" + date + "'",if(type=="月報","and strftime('%m',訂單.訂購日期) = "+ month + " and strftime('%Y',訂單.訂購日期) = " + year ,"and strftime('%Y',訂單.訂購日期) = " + year ))}

給參數type設置默認值為日報,參數date設置默認值的類型為字符串型值為2010-01-03。

表樣修改

將表樣修改成如下樣式:

給A3設置形態,自定義數據,實際值與對應的顯示值分別為:日報,日期;月報,年月;年報,年份。

在B3單元格中增加如下公式:=if(type=="日報",$date,if(type=="月報",$year+"."+$month,$year))

使用圖表工具時如何動態顯示參數控件

參數界面設置

將參數界面設置成如下樣式:

設置參數type的控件類型為下拉框,數據字典選擇自定義,實際值與顯示值都為日報,月報,年報。

設置參數year的控件類型為下拉框,數據字典選擇自定義,顯示值與實際值都為2010,2011。

設置參數month的控件類型也為下拉框,數據字典選擇公式,在實際值出填寫公式=range(1,6)即可。

設置參數date的控件類型為日期,返回值類型為默認的字符串型。

使用圖表工具時如何動態顯示參數控件

動態顯示參數控件JS事件設置

給參數type的下拉框控件增加編輯後事件,具體的JS代碼如下:

點擊參數type的下拉框控件,在屬性表的下方選擇事件面板,點擊增加編輯後事件,具體的js如下:

var form = this.options.form;

var p2Widget = form.getWidgetByName("date");

var p3Widget = form.getWidgetByName("year");

var p4Widget = form.getWidgetByName("month");

var value = this.getValue(); //獲取當前參數即type參數的值

if (value == "日報") {

p2Widget.visible();

p3Widget.invisible();

p4Widget.invisible();

} else if (value == "月報") {

p2Widget.invisible();

p3Widget.visible();

p4Widget.visible();

} else if(value == "年報"){

p2Widget.invisible();

p3Widget.visible();

p4Widget.invisible();

}else {

p2Widget.invisible();

p3Widget.invisible();

p4Widget.invisible();

}

注:此段代碼判斷type參數的值,若是日報,則只顯示date控件,若是月報,則顯示year和month控件,若是年報,則只顯示year控件。

保存模板

點擊分頁預覽,效果如上圖。

相關問題答案