JS设置控件条件性可用/可见（报表面板）

在报表的使用过程中，有一种应用场景：在使用者的填写页面中，填写框B需要根据填写框A中是否有输入值才显示/隐藏，例如登录界面中，必须先输入账号，才可以输入密码，都是同样的应用场景。如下图：

在报表制作过程中，为了达到控件之间实时进行相互沟通的项目，需要将“主导权”赋予填写框A，在填写框A中设置“编辑后”的javascript事件，根据使用者在填写框A中是否已输入值，来控制填写框B是否可用/可用，此处示例根据填写框“帐号”是否有值来控制填写框“密码”是否可见。

如下：

1、报表界面设计：

2、javascript事件编辑

（1）“帐号”

代码如下：

var thislen = this.getValue().length;  
if(thislen) {  
    contentPane.getWidgetByName("open").setVisible(true)
}else{
    contentPane.getWidgetByName("open").setVisible(false)
    }

（2）“密码”

此处预先将控件的“可见”取消勾选，并命名控件名为“open”即可。

3、效果图：

如上，在报表制作时，通过设置填写框“帐号”编辑后的javascript事件，实时获取“帐号”中是否有值，从而控制填写框“密码”是否可见，即可实现根据填写框A控制填写框B是否可用/可用的效果。

其中，在报表面板和参数面板，JS控制事件需要稍做修改：

1、在参数面板中，JS事件为：this.options.form.getWidgetByName("open").setVisible(true);

2、在报表面板中，JS事件为：contentPane.getWidgetByName("open").setVisible(true);

setEnable(boolean)：设置是否可用，true为可用，false为不可用；

setVisible(boolean)：设置是否可见，true为可见，false为不可见。

参数面板设置控件是否可见/可用，可参考：

https://blog.youkuaiyun.com/wang1qqqq/article/details/103270171

 

当然，这种效果的实现方案有多种，如果

1、编辑后事件：通过A控件，JS设置B可见/可用；

2、初始化事件：通过B控件，获取A是否有值，设置B可见/可用。

具体采用方法就见仁见智了。