JS实现参数控件赋值

1.1 问题描述

参数界面中，往往需要在一个控件中动态的控制其他控件的值，如下图，当 username 有值时，state 自动变为 1，当 username 无值时，state 自动变为 2。

1.2 实现思路

可以通过 JavaScript 脚本获取到需要的控件，从而获得控件的值，及给控件赋值。

我们制作一个简单的例子实现上图效果。

2.1 参数界面

1）新建模板，点击菜单模板-模板参数，添加两个模板参数：username和state：

2）打开参数面板，在右侧的控件设置中，点击全部添加按钮：

3）控件会自动添加到参数面板中，如下图参数面板所示：

4）将两个未定义的控件分别设置为下拉框控件和单选按钮组控件：

5）选择下拉框控件 username，设置数据字典，类型设置选择自定义，实际值和显示值都为：jerny，anna，merry。

6）选择单选按钮组控件 state，设置数据字典，类型设置选择自定义，实际值和显示值都为：1，2。

2.2 JS 事件设置

选择下拉框控件 username，添加编辑后事件，如下图所示：

JavaScript 代码如下：

var state = this.options.form.getWidgetByName("state");
var username = this.options.form.getWidgetByName("username").getValue();
if(!username) {
    state.setValue(2);
} else {
    state.setValue(1);
}

注：该段代码是用来对 state 参数置数，当 username 为空时，!username 为真，此时将 state 置数为 2；否则当 username 有值时，将 state 置数为 1。

注：移动端需要 将3.2 中的 JavaScript 代码添加到编辑结束事件中。为了 PC 端和移动端可以在一个模板中实现一样的效果，可以 同时添加编辑后和编辑结束事件，JS 代码一样。

2.3 预览效果

保存模板，点击分页预览，PC 端效果如下所示：

移动端效果如下所示：

1）App 预览效果

2）H5 预览效果

模板效果在线查看请点击：JS 实现参数控件赋值.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\15-JS实现参数控件赋值.cpt

点击下载模板：15-JS实现参数控件赋值.cpt