jQuery EasyUI
组合框(ComboBox)可以把一些HTML控件组合成一个控件,从而达到我们所期望的效果,下面介绍一下组合框详细用法:(查看演示
)
HTML代码
:首先要定义个select
- <select id="cc" name="dept"
style="width:200px;">
- <option value="aa">aitem1</option>
- <option>bitem2</option>
- <option>bitem3</option>
- <option>ditem4</option>
- <option>eitem5</option>
- </select>
然后按照《jQuery
EasyUI框架使用文档
》包含必要文件后,只要在$(function(){ }); 里插入下面的代码即可:
- $('#cc').combobox(options);
options是组合框的一些选项,比如我们可以利用远程的数据来生成一个提示框
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
下面我们来详细介绍一下选项的设置:
属性
属性名
类型
描述
默认值
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事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
jQuery EasyUI 1.3.5版本更新内容: Bug(修复) searchbox:修复“searcher”函数提供的“name”参数值错误的问题; combo:修复“isValid”方法无法返回布尔值的问题; combo:修复点击页面某一个combo组件的...
1、form里的一些控件如textbox、combobox等添加额外的一些事件,如鼠标事件(mouseover、click等),键盘事件(keydown、keyup等),... easyui自带的inputEvents方法 $(#org).textbox({ inputEvents:$.extend({},$.
datagrid:修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG; treegrid:修复在追加或插入新行的时候触发onLoadSuccess事件的BUG; tree:修复在追加或插入新节点的时候触发onLoadSuccess...
jQuery EasyUI 1.5.1版本更新内容:Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在窗体高度...
jQuery EasyUI 1.4.3版本更新内容: Bug(修复) textbox:修复“setText”方法不接受值为0的问题; timespinner:修复在使用IE11时点击空文本框时出错的问题; tabs:修复“update”方法只能更新面板正文的问题...
jQuery EasyUI 1.5.1版本更新内容: Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在...
最近做的项目涉及到JQueryEasyUI框架的使用,EasyUI是什么?网上解释说它是来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!从这句话的理解来说,我认为它是一种JavaScript...
用 $.fn.combobox.defaults 重写了 defaults。 依赖 combo 用法 <select id=”cc” name=”dept” style=”width:200px;”> ”aa”>aitem1</option> <option>bitem2</option> <option>bitem3</option> ...
在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在...
jquery.easyui.min.js提供了关于conbobox的一些处理方法。参考博客combobox使用。
下拉组合框 - ComboBox 数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字输入框 - Format NumberBox 数字...
input id=”cc” class=”easyui-combobox” name=”name” data-options=”valueField:’value’,textField:’text’,data:[{‘value’:’1′,’text’:’java’},{‘value’:’2′,’text’:’C#’}]”/>...
jQuery EasyUI 组合树(ComboTree) 和组合框的用法差不多,只是在显示上有点差别:一个显示成树状结构,一个显示成列表结构。 项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的...
可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回...
在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在...
其中easyui的具体使用方法还可以看官方的easyui文档(此外欢迎访问本人CSDN播客:http://blog.csdn.net/tototuzuoquan),多多希望大家能够秉承开源精神,让人下载资料的时候不要要那么多分!!!!
基于jquery实现的form表单的序列化与反序列化。除了基本的form元素外,增加了easyui combobox的序列化与反序列化,其它类型...使用方法, 序列化:$("#form").serializeJson() 反序列化:$("#form").loadJson(JsonObj)