JS清空(重置)条件

1. 描述
2. 思路
3. 操作步骤
4. 预览效果

1. 描述

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

重置某个控件的内容：

重置所有控件的内容：

2. 思路

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

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

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

3. 操作步骤

以上效果图中的两个清空按钮来说明如何实现重置控件内容。

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

3.1 示例一：重置单个控件内容的按钮

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

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

具体的js如下：

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

移动端使用下面的js：

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

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

3.2 示例二：重置所有控件内容

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

事件js脚本为：

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

移动端使用下面的js：

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端支持移动端的js代码，建议重置控件使用移动端的js，可以兼容PC端和移动端。