`
jaychang
  • 浏览: 713260 次
  • 性别: Icon_minigender_1
  • 来自: 嘉兴
社区版块
存档分类
最新评论

jQuery EasyUI ComboBox用法

阅读更多

jQuery EasyUI 组合框(ComboBox)用法

jQuery EasyUI 组合框(ComboBox)可以把一些HTML控件组合成一个控件,从而达到我们所期望的效果,下面介绍一下组合框详细用法:(查看演示

HTML代码 :首先要定义个select

  1. <select id="cc" name="dept" style="width:200px;">
  2.     <option value="aa">aitem1</option>
  3.     <option>bitem2</option>
  4.     <option>bitem3</option>
  5.     <option>ditem4</option>
  6.     <option>eitem5</option>
  7. </select>


然后按照《jQuery EasyUI框架使用文档 》包含必要文件后,只要在$(function(){ }); 里插入下面的代码即可:

  1. $('#cc').combobox(options);

options是组合框的一些选项,比如我们可以利用远程的数据来生成一个提示框

  1. $('#cc').combobox({
  2.     url:'combobox_data.json',
  3.     valueField:'id',
  4.     textField:'text'
  5. });

下面我们来详细介绍一下选项的设置:

属性

属性名 类型 描述 默认值
width 数字 组件的宽度 auto
listWidth 数字 下拉列表的宽度 null
listHeight 数字 下拉列表的高度 null
valueField 字符串 基础数据值名称绑定到这个组合框 value
textField 字符串 基础数据的字段的名称绑定到这个组合框 text
editable 布尔 定义是否可以直接到文本域中键入文本 true
url 字符串 加载列表数据的远程URL null

事件

事件名 参数 描述
onLoadSuccess none 当远程数据成功加载时触发
onLoadError none 当远程数据加载失败时触发
onSelect record 当用户选择了一个列表项时触发
onChange newValue, oldValue 当文本域字段的值改变时触发

方法

方法名 参数 描述
select value 选择下拉列表中的一项
setValue param 设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和 TextField属性。
getValue none 获取字段值
reload url 请求远程列表数据.
分享到:
评论

相关推荐

    easyui-textbox和easyui-combobox的onchange事件响应实例

    这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。

    jQuery EasyUI 1.3.5 离线简体中文API文档

    jQuery EasyUI 1.3.5版本更新内容: Bug(修复) searchbox:修复“searcher”函数提供的“name”参数值错误的问题; combo:修复“isValid”方法无法返回布尔值的问题; combo:修复点击页面某一个combo组件的...

    简述jQuery Easyui一些用法

    1、form里的一些控件如textbox、combobox等添加额外的一些事件,如鼠标事件(mouseover、click等),键盘事件(keydown、keyup等),... easyui自带的inputEvents方法 $(#org).textbox({ inputEvents:$.extend({},$.

    jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    datagrid:修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG; treegrid:修复在追加或插入新行的时候触发onLoadSuccess事件的BUG; tree:修复在追加或插入新节点的时候触发onLoadSuccess...

    jQuery EasyUI 1.5.1 中文API文档

    jQuery EasyUI 1.5.1版本更新内容:Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在窗体高度...

    jQuery EasyUI 1.4.3 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.4.3版本更新内容: Bug(修复) textbox:修复“setText”方法不接受值为0的问题; timespinner:修复在使用IE11时点击空文本框时出错的问题; tabs:修复“update”方法只能更新面板正文的问题...

    jQuery EasyUI 1.5.1 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.5.1版本更新内容: Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在...

    JQueryEasyUI框架下的combobox的取值和绑定的方法

    最近做的项目涉及到JQueryEasyUI框架的使用,EasyUI是什么?网上解释说它是来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!从这句话的理解来说,我认为它是一种JavaScript...

    jQuery EasyUI API 中文文档 – ComboBox组合框

    用 $.fn.combobox.defaults 重写了 defaults。   依赖 combo 用法 &lt;select id=”cc” name=”dept” style=”width:200px;”&gt; ”aa”&gt;aitem1&lt;/option&gt; &lt;option&gt;bitem2&lt;/option&gt; &lt;option&gt;bitem3&lt;/option&gt; ...

    jQuery EasyUI 组件加上“清除”功能实例详解

     在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在...

    jquery.easyui.min.js

    jquery.easyui.min.js提供了关于conbobox的一些处理方法。参考博客combobox使用。

    jQuery EasyUI 1.3 API 中文教程

    下拉组合框 - ComboBox 数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字输入框 - Format NumberBox 数字...

    jQuery+easyui中的combobox实现下拉框特效

    input id=”cc” class=”easyui-combobox” name=”name” data-options=”valueField:’value’,textField:’text’,data:[{‘value’:’1′,’text’:’java’},{‘value’:’2′,’text’:’C#’}]”/&gt;...

    jQuery Easyui 下拉树组件combotree

    jQuery EasyUI 组合树(ComboTree) 和组合框的用法差不多,只是在显示上有点差别:一个显示成树状结构,一个显示成列表结构。 项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的...

    jQuery EasyUI的TreeGrid查询功能实现方法

    可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回...

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在...

    easyui资料

    其中easyui的具体使用方法还可以看官方的easyui文档(此外欢迎访问本人CSDN播客:http://blog.csdn.net/tototuzuoquan),多多希望大家能够秉承开源精神,让人下载资料的时候不要要那么多分!!!!

    form表单的序列化与反序列化

    基于jquery实现的form表单的序列化与反序列化。除了基本的form元素外,增加了easyui combobox的序列化与反序列化,其它类型...使用方法, 序列化:$("#form").serializeJson() 反序列化:$("#form").loadJson(JsonObj)

Global site tag (gtag.js) - Google Analytics