easyUI-combobox之初见

  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来实现绑定数据,并触发选择下拉项事件了。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值