JS實現清空元件內容

1.1 問題描述

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

• 重置某個元件的內容：

• 重置所有元件的內容：

1.2 實現思路

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

2.1 重置單個元件內容

2.1.1 準備範本

點選可下載範本：ComplexParaInter.cpt

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

2.1.2 新增按鈕元件

在參數設計頁面建立一個「按鈕元件」，設定其按鈕名稱為「清空供應商」，為該按鈕元件新增「點擊」事件，實現點選按鈕時將供應商元件的內容清空，如下圖所示：

JavaScript 程式碼如下：

注：supplierID 為供應商下拉框元件的名稱。

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

2.1.3 預覽效果

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

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

2.2 重置所有元件內容

2.2.1 準備範本

準備範本ComplexParaInter.cpt，同本文 2.1.1 節內容。

2.2.2 新增按鈕元件

在參數介面建立一個「按鈕元件」，設定其元件名稱為「清空全部」，並新增「點擊」事件，如下圖所示：

JavaScript 程式碼如下：

//獲取參數介面上的所有元件，遍歷每個元件並重新指派
$.each(this.options.form.name_widgets, function(i, item) {
    if(item.getType() !== 'label') {
        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();  //重置結束日期

2.2.3 預覽效果

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

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

點選下載範本：JS清空（重置）條件-範例一.cpt

點選下載範本：JS清空（重置）條件-範例二.cpt