效果示意

最终效果直观。参数面板上通常有两个功能按钮：

• “清空供应商”：点击后，仅清空“供应商编号”输入框。
• “清空全部”：点击后，页面上所有下拉框、输入框等均恢复初始状态。

解决方案

实现核心是控件对象内置的 reset() 方法。它如同控件的“恢复出厂设置”键。

针对单个控件

思路直接：

1. 在JavaScript事件中，通过控件名称获取其对象引用。
2. 调用该对象的 reset() 方法。

这就像向指定地址的遥控器发送“关机”指令。

针对全部控件

需要“批处理”技巧：

1. 利用 form.name_widgets 属性，获取当前表单内所有已命名控件的集合。
2. 遍历这个集合，对其中每一个控件对象执行 reset() 操作。

这相当于给房间内所有电器同时下达复位指令。

实际案例

我们通过实际模板演练。案例模板路径：%FR_HOME%WebReportWEB-INFreportletsdemoparameterComplexParaInter.cpt。

控件清空功能按钮

如何实现“清空供应商”功能：

1. 在参数面板设计界面，新增按钮控件，修改文本为“清空供应商”。
2. 为该按钮添加“点击”事件，并写入以下JavaScript代码：

// 获取名为“supplierID”的控件对象
var widget = this.options.form.getWidgetByName("supplierID");
// 调用reset方法，清空其内容
widget.reset();

代码作用：

• 第一行：通过 getWidgetByName 精准定位“供应商编号”输入框。
• 第二行：执行重置。

点击按钮后，仅指定输入框被清空。

批量清空所有控件内容

如何实现“清空全部”功能：

1. 在参数面板添加另一个按钮，命名为“清空全部”。
2. 为其“点击”事件配置如下JS脚本：

// 获取当前表单所有已命名的控件对象集合
var widgets = this.options.form.name_widgets;
// 遍历集合，逐一重置
for (var name in widgets) {
    if (widgets.hasOwnProperty(name)) {
        widgets[name].reset();
    }
}

代码是一个经典遍历操作：

• 先获取所有控件的“花名册”（name_widgets）。
• 然后逐一执行 reset()。

执行后，页面上所有下拉选择、文本输入等控件，都会瞬间回到初始状态。

通过这两个简单按钮，参数界面的维护体验得到提升。用户可以灵活清除单个错误输入，也能在需要完全重新查询时，快速完成界面初始化。

《夸克》非常好用的免费AI浏览器

下载APP查看