easyUI是基于JQuery用户界面插件的集合,使用easyUI框架不需要写很多的JS代码就可以轻松完成需要的效果,
本文主要介绍easyUI下的easyui-combobox。
使用代码很简单:
<span style="font-size:18px;"><span>课程:</span><input class="easyui-combobox" id ="course" name="name" style="width: 150px;" /></span>
效果如图:
下面介绍下该插件的主要属性:
valueField:基础数据值名称绑定到Combobox(提交值)
textField:基础数据的字段名称绑定的Combobox(显示值)
url:从远程URL来加载列表数据
常用事件:
onSelect
举个例子来说明下:
来给刚才的combobox添加绑定下拉框,并触发选择选项事件,可以写在data-options中:
<span style="font-family: 'Source Code Pro', monospace; white-space: pre-wrap;"></span><pre name="code" class="html"><span>课程:</span><input id="course" class="easyui-combobox" name="name" style="width: 150px;"<pre code_snippet_id="605499" snippet_file_name="blog_20150216_2_1763161" name="code" class="html"> data-options="<span style="font-family: Arial, Helvetica, sans-serif;"> </span><pre code_snippet_id="605499" snippet_file_name="blog_20150216_3_7354545" name="code" class="html"> url:'QueryCourse',
valueField:'courseID',
textField:'courseName',
onSelect: function () {
alert('点击了下拉框选项!')
}"/>
假如QueryCorse方法查询出来的json串中,courseID的值是1000、1001、1002、1003,那么点击下拉框时效果如下:
然后点击1000或者1001时就会弹出提示框:“点击了下拉框选项!”。
这样就可以使用easyUI-combobox来实现绑定数据,并触发选择下拉项事件了。