在查询查询页面中,有时候并不会把所有查询项都直接显示出来,而是①根据使用者的选项内容,联动下一个下拉框中应供选择的选项;②根据使用者使用的选项细化深度,提供下一个深度查询数据查询的选项;③根据使用者的权限,限制/开发更底层数据的查询权限。如下图:
对于这种需求场景,我们可以通过新建下拉框数据集,设置各个下拉框数据集之间的关系,设置下拉框的编辑后JS事件,实现下拉框数据之间的联动,实现定义的条件下,显示/隐藏一些深度查询的选项,灵活控制每个使用者的查询权限,提高数据分析系统的使用方便性。
1、界面设计
查询参数界面设计如下,使用省份、城市、区县来做下拉框数据关联和隐藏/显示。
此处设置 “省份” 下拉框控件名为 type1, “城市” 下拉框控件名为 type2, “区县” 下拉框控件名为 type3。
2、创建数据集
对应省份、城市、区县下拉框,分别创建数据集,提供给下拉框作为下拉组内数据,其中,城市和区县的数据需要根据前面的选项内容来进行关联,所以需要获取到对应控件的值,做数据筛选。
城市下拉框数据集:
区县下拉框数据集
3、设置隐藏/显示
对于需要隐藏的控件,可以在开发时就设置控件为不可见的状态;然后设置JS事件,用来定义此控件在什么条件下隐藏和显示。
此处示例在城市下拉框中设置JS事件,定义条件,控制区县下拉框的隐藏和显示。
代码如下:
var form = this.options.form;
var thislen = this.getValue().toString().length;
if(thislen) {
form.getWidgetByName("qx").visible();//可见
form.getWidgetByName("type3").visible();//可见
}else{
form.getWidgetByName("qx").invisible();//不可见
form.getWidgetByName("type3").invisible();//不可见
}
此处通过获取城市下拉框中的长度,控件区县下拉框是否可见,读者也可以根据自己的实际需求情况,设置不同的情况。
4、效果图
如上,通过数据集,设置各个下拉框数据集之间的关系,实现下拉框之间的数据联动;通过控件的JS事件,捕捉选择数据时的数据,根据数据的有无或数据内容是什么,条件性隐藏/显示其他下拉框控件;同理,也可以应用在数据分析中,针对不同的用户,隐藏/显示不同的下拉框,控件不同的用户角色有不同的功能,限制各自的数据查询权限和数据查询深度。