1.需求
1.1.使用场景
在添加编辑表单,经常会出现根据选项,动态显示和隐藏某些元素。比如添加一个网络设备,当选择通讯方式为串口时,需要填写串口号和波特率;当选择通讯方式为网卡时,需要选择IP地址和子网掩码。串口号和IP地址,不能同时出现,只能二选一。如下图所示的效果。
1.2.解决思路
正常的实现思路,是将这些表单输入框都放到页面上,然后根据通讯方式,进行动态的显示和隐藏。利用框架,可以很容易的配置出全功能的静态表单。如下图所示。
那么如何实现动态的显示和隐藏呢?就是要对按钮的点击事件进行响应,然后控制元素的显示和隐藏。具体的样例,下面进行详细说明。
首先了解表单页面的元素布局。通过框架配置出来的表单页面,所有的输入框都有固定的格式,且每个表单元素组都分配了动态的id值。非常的整齐,也有规律和注释。如下图所示。输入框和标签文字,组成一个form-group,放在一个div下,且该div有id编号。
因此,只需要控制该div的显示和隐藏即可。
2.方案案例
理解了原理后,实现就非常简单了。主要分为两部:监控按钮点击事件、控制div的显示和隐藏。
1)框架只是对表单显示进行渲染,并未增加任何事件监听。我们需要手动对输入框增加监听事件,由于框架对原始输入框进行了二次渲染,因此有些控件的事件监听有些特殊化。下面会针对各种输入框分别说明。
2)div的显示和隐藏,只需要添加样式属性。
针对上面的表单,要隐藏串口号和波特率,只需要隐藏id值为form-group-894和form-group-895的div即可。调用如下2行JS代码即可。
//隐藏串口号输入框
$("#form-group-894").hide();
//隐藏波特率输入框
$("#form-group-895").hide();
//如果要显示,调用
$("#form-group-895").show();
如下图是直接在控制台执行的效果,输入框已被隐藏。
2.1.使用单选按钮
框架使用iCheck对原始单选框进行了渲染,这样效果比较美观。如果要监听事件,则也要使用iCheck的事件进行处理。
单选按钮一般是一组好几个,事件类型也分为单纯点击、值改变、选中、取消选中,所以具体要用哪个事件来监听,确实需要细细对比和品位。
$("input[name='CommunicateType']").on('ifChecked', function(event){
$(this).val()
});
获取到事件监听后,实现控制显示和隐藏的代码如下。
$("input[name='CommunicateType']").on('ifChecked', function (event) {
//串口:显示串口号和波特率,隐藏IP地址4个输入框
if ("0" === $(this).val()) {
//显示串口号输入框
$("#form-group-894").show();
//显示波特率输入框
$("#form-group-895").show();
//隐藏IP地址
$("#form-group-896").hide();
//隐藏端口号
$("#form-group-897").hide();
//隐藏子网掩码
$("#form-group-898").hide();
//隐藏网关
$("#form-group-899").hide();
} else {
//网口:隐藏串口号和波特率,显示IP地址4个输入框
//隐藏串口号输入框
$("#form-group-894").hide();
//隐藏波特率输入框
$("#form-group-895").hide();
//显示IP地址
$("#form-group-896").show();
//显示端口号
$("#form-group-897").show();
//显示子网掩码
$("#form-group-898").show();
//显示网关
$("#form-group-899").show();
}
});
2.2.使用开关按钮
2.3.使用复选框
2.4.使用下拉框
3.细节处理
首次加载
宽度错位问题
必填项问题。
1、去掉必填项。
2、设置默认值。