easy-ui的input框联动效果js实现代码.

1.jQueryEasyUI简介

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。[1]百度词条

2.api探索

input框有两种初始化方式:第一种是<select>元素创建一个预定义结构的下拉列表框.

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>

或者:

<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'" />

url是json格式的key-value键值对.eg:

[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]

3.js实现拉列表框下拉列表联动.

本文探讨的是js实现,接下来我们不废话,进入正题
首先需要初始化一个input框:

<input name="TEST_TYPE" id="test_type" class="easyui-combobox"   data-options="
url:'<%=getConPath %>/commom/combobox.jsp?dictId=T_TEST_TYPE',//根据dictId去数据库中查询数据字典
valueField:'id',
textField:'text',
multiple:false,
disabled:true,
onLoadSuccess:function(){
$('#test_type').combobox('setValue','01');//设置默认值
},onSelect:function(row){//下拉框改变函数
if(row.id=='01'){//公共考试
$('#enrol_begin_time').attr('disabled','disabled');//不可编辑状态
$('#enrol_end_time').attr('disabled','disabled');
}else{//限定考试
$('#enrol_begin_time').attr('disabled',false);//可编辑状态
$('#enrol_end_time').attr('disabled',false);
}
}
"
/>

这里初始化和实现都在一起,url是数据库查询,java封装返回的json值,01代表共当选择公共考试,02代表限定考试.当选择公共考试时(row.id='01'),报名开始时间和结束时间不可编辑.



当选择限定考试时(row.id='02'),报名开始时间和报名结束时间可编辑.



这样就实现了简单的联动效果,主要触发了onSelect函数,这里的onSelect函数也可以用jquery里的onChange事件

4.总结和扩展

在本文的例子中,初始化和加载数据都放在了jsp页面上,当然也可以单独写在js文件里.data-option的剩下的属性就不一一介绍了,有兴趣了解的可以查看easyui API文档.

实际开发中,可能存在复杂的业务逻辑,都可在onSelect编写,可以嵌套查询等等,如当选择公共考试时,直接隐藏报名开始时间和报名结束时间.或者根据下拉列表的选择,动态的加载报名时间和其他input框中值.