历史版本13 :JS实现清空控件内容 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
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();} });;
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控件内容清空
移动端使用下面的js:
var supplierID = this.options.form.getWidgetByName("supplierID"); //获取supplierID控件 supplierID.reset(); //重置supplierID控件
3.2 示例二:重置所有控件内容
在参数界面新建一个按钮控件,设定其控件名称为清空全部,并添加点击事件:
事件js脚本为:
$.each(this.options.form.name_widgets,function(i,item){ if (item.options.type !=='label') {item.setValue();item.setText();} });
移动端使用下面的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端和移动端。
4. 预览效果编辑
4.1 PC端预览效果
1)示例一:重置单个控件内容的按钮
2)示例二:重置所有控件内容
4.2 移动端预览效果
1)示例一:重置单个控件内容的按钮
APP预览效果:
H5预览效果:
2)示例二:重置所有控件内容
APP预览效果:
H5预览效果:
5. 已完成模板编辑
1)示例一
模板效果在线查看请点击:JS清空(重置)条件-示例一.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\17-JS清空(重置)条件-示例一.cpt
2)示例二
模板效果在线查看请点击:JS清空(重置)条件-示例二.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\17-JS清空(重置)条件-示例二.cpt