1.1 版本

1.2 问题描述

在使用查询控件时，有时我们希望能够快捷重置控件的内容，或者重置所有控件的内容。效果如下图所示：

• 重置某个控件的内容：

• 重置所有控件的内容：

1.3 实现思路

• 只重置一个控件的值时，可以在 JS 事件中获取需要重置的控件，用setValue("")、setText("")、reset()给控件赋空值，从而清空该控件的内容；移动端使用reset()重置控件。

• 当需要重置全部控件时，可以通过form.name_widgets获取参数界面上所有的控件，遍历每个控件并重置，代码如下所示：

$.each(this.options.form.name_widgets, function(i, item) {
    if(item.options.type !== 'label') {
        item.setValue("");
        item.setText("");
        item.reset();
    }
});

以描述示例图中清空供应商按钮为例，说明如何重置单个控件内容。

2.1 操作步骤

打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\parameter\ComplexParaInter.cpt。

在参数设计页面新建一个按钮控件，设定其按钮名称为清空供应商，并添加点击事件，将供应商(supplierID)控件内容清空，如下图所示：

• 事件的 JavaScript 代码如下：

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

• 移动端使用的 JavaScript 代码如下：

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

注：PC 端支持移动端的 JavaScript 代码，建议重置控件使用移动端的 JavaScript 代码，可以兼容 PC 端和移动端。

2.2 效果预览

1）PC端

2）移动端

以描述示例图中清空全部按钮为例，说明如何重置单个控件内容。

3.1 操作步骤

打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\parameter\ComplexParaInter.cpt。

在参数界面新建一个按钮控件，设定其控件名称为清空全部，并添加点击事件：

事件的 JavaScript 代码如下：

$.each(this.options.form.name_widgets, function(i, item) {
    if(item.options.type !== 'label') {
        item.setValue("");
        item.setText("");
        item.reset();
    }
});

移动端使用下面的 JavaScript 代码：

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();  //重置结束日期

注：PC 端支持移动端的 JavaScript 代码，建议重置控件使用移动端的 JavaScript 代码，可以兼容 PC 端和移动端。

3.2 效果预览

1）PC端

2）移动端

已完成模板参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\17-JS清空(重置)条件-示例一.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\17-JS清空(重置)条件-示例二.cpt

点击下载模板：

17-JS清空(重置)条件-示例一.cpt

17-JS清空(重置)条件-示例二.cpt

该方法不支持新填报预览，新填报预览时，清空查询控件内容会报错：CustomJSError:Cannot read property 'length'of undefined。