JS實現(xiàn)點擊參數(shù)面板按鈕顯示或隱藏數(shù)據(jù)
當(dāng)報表中列出數(shù)據(jù)太多時,想通過顯示按鈕隱藏明細(xì)數(shù)據(jù)只顯示統(tǒng)計數(shù)據(jù)。如下圖示例,那么該如何實現(xiàn)呢?本文以FineReport為例,來講述JS如何實現(xiàn)點擊參數(shù)面板按鈕顯示或隱藏數(shù)據(jù)。
打開報表
在參數(shù)面板添加一個標(biāo)簽控件,控件名為lable,設(shè)置標(biāo)簽控件不可見,控件值為“顯示”。
在參數(shù)面板添加一個按鈕控件,控件名為button,控件值為“只顯示合計數(shù)據(jù)”,并添加點擊事件。
編輯點擊事件,添加下面的JavaScript代碼:
/*獲取隱藏的標(biāo)簽控件的值*/
var label= this.options.form.getWidgetByName("label").getValue();
/*判斷標(biāo)簽控件的值*/
if(label=='顯示')
{
/*當(dāng)標(biāo)簽控件的值為顯示時,則改為隱藏,并修改按鈕名稱為顯示所有數(shù)據(jù)*/
this.options.form.getWidgetByName("label").setValue("隱藏");
this.options.form.getWidgetByName("button").setValue("顯示所有數(shù)據(jù)");
}
else
{
/*當(dāng)標(biāo)簽控件的值不為顯示時,則改為顯示,并修改按鈕名稱為只顯示合計數(shù)據(jù)*/
this.options.form.getWidgetByName("label").setValue("顯示");
this.options.form.getWidgetByName("button").setValue("只顯示合計數(shù)據(jù)");
}
/*執(zhí)行查詢*/
_g().parameterCommit();
var label= this.options.form.getWidgetByName("label").getValue();
/*判斷標(biāo)簽控件的值*/
if(label=='顯示')
{
/*當(dāng)標(biāo)簽控件的值為顯示時,則改為隱藏,并修改按鈕名稱為顯示所有數(shù)據(jù)*/
this.options.form.getWidgetByName("label").setValue("隱藏");
this.options.form.getWidgetByName("button").setValue("顯示所有數(shù)據(jù)");
}
else
{
/*當(dāng)標(biāo)簽控件的值不為顯示時,則改為顯示,并修改按鈕名稱為只顯示合計數(shù)據(jù)*/
this.options.form.getWidgetByName("label").setValue("顯示");
this.options.form.getWidgetByName("button").setValue("只顯示合計數(shù)據(jù)");
}
/*執(zhí)行查詢*/
_g().parameterCommit();
點擊參數(shù)面板空白處,將“點擊查詢前不顯示報表內(nèi)容”屬性的勾去掉。
回到報表設(shè)計界面,右鍵B3單元格,添加條件屬性,設(shè)置行高為0毫米,添加公式條件為$label = '隱藏'。
保存模板,點擊分頁預(yù)覽即可看到上圖的效果。