JS实现清空控件内容- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 問題描述

在使用查詢控件時，有時我們希望能夠快捷重置控件的内容，或者重置所有控件的内容。效果如下圖所示：

重置某個控件的内容：

222

重置所有控件的内容：

222

1.2 實現思路

在 JS 事件中獲取需要重置的控件，用setValue("")、setText("")、reset()給控件賦空值，從而清空該控件的内容。

注：該方法不支持新填報預覽。

2 示例

2.1 重置單個控件内容

2.1.1 準備模板

準備内置模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\parameter\ComplexParaInter.cpt。

點擊可下載模板：ComplexParaInter.cpt

報表參數界面樣式如下圖所示：

2.1.2 添加按鈕控件

在參數設計頁面新建一個「按鈕控件」，設定其按鈕名稱爲「清空供應商」，爲該按鈕控件添加「點擊」事件，實現點擊按鈕時将供應商控件的内容清空，如下圖所示：

JavaScript 代碼如下：

注：supplierID 爲供應商下拉框控件的名稱。

//獲取supplierID控件
var supplierID = this.options.form.getWidgetByName("supplierID");
//将supplierID控件内容清空
supplierID.setValue("");
supplierID.setText("");
supplierID.reset();

移動端 JavaScript 代碼如下：

注：建議重置控件使用移動端的 JavaScript 代碼，可以兼容 PC 端和移動端。

var supplierID = this.options.form.getWidgetByName("supplierID"); //獲取supplierID控件
supplierID.reset();  //重置supplierID控件

2.1.3 預覽效果

1）保存模板，點擊「分頁預覽」，PC 端效果如下圖所示：

222

2）App及 HTML5 效果如下圖所示：

222

2.2 重置所有控件内容

2.2.1 準備模板

準備内置模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\parameter\ComplexParaInter.cpt，同本文 2.1.1 節内容。

2.2.2 添加按鈕控件

在參數界面新建一個「按鈕控件」，設定其控件名稱爲「清空全部」，并添加「點擊」事件，如下圖所示：

JavaScript 代碼如下：

//獲取參數界面上的所有控件，遍曆每個控件并重新賦值
$.each(this.options.form.name_widgets, function(i, item) {
    if(item.options.type !== 'label') {
        item.setValue("");
        item.setText("");
        item.reset();
    }
});

移動端 JavaScript 代碼如下：

注：建議重置控件使用移動端的 JavaScript 代碼，可以兼容 PC 端和移動端。

this.options.form.getWidgetByName("categoryID").reset();  //重置産品類别
this.options.form.getWidgetByName("supplierID").reset();  //重置供應商
this.options.form.getWidgetByName("pay").reset();  //重置訂單支付狀态
this.options.form.getWidgetByName("start").reset();  //重置起始日期
this.options.form.getWidgetByName("end").reset();  //重置結束日期