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

扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。


依赖
combo
用法
<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>
<input id="cc" name="dept" value="aa">


代码如下:

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

json 数据格式的示例


代码如下:

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

特性

其特性扩展自 combo，下列是为combobox 增加的特性。
















































名称

类型

说明

默认值

valueField

string

绑定到 ComboBox 的 value 上的基础数据的名称。

value

textField

string

绑定到 ComboBox 的 text 上的基础数据的名称。

text

mode

string

定义在文本改变时如何加载列表数据。如果组合框从服务器加载就设为 'remote' 。

local

url

string

从远程加载列表数据的 URL 。

null

method

string

用来检索数据的 http method 。

post

data

array

被加载的列表数据。

null

filter

function

定义当 'mode' 设为 'local' 时如何过滤数据。这个函数有两个参数：
q：用户输入的文字
row：列表中的行数据。
返回 true 就允许显示该行。

formatter

function

定义如何呈现行。这个函数有一个参数：row。

事件

其事件扩展自 combo，下列是为 combobox 增加的事件。























名称

参数

说明

onLoadSuccess

none

当远程数据加载成功时触发。

onLoadError

none

当远程数据加载失败时触发。

onSelect

record

当用户选择一个列表项时触发。

onUnselect

record

当用户取消选择一个列表项时触发。

方法

其方法扩展自 combo，下列是为 combobox 追加或重写的方法。











































名称

参数

说明

options

none

返回 options 对象。

getData

none

返回加载的数据。

loadData

data

加载本地列表数据。

reload

url

请求远程的列表数据。

setValues

values

把数组设置为组合框的值。

setValue

value

设置组合框的值。

clear

none

清除组合框的值。

select

value

选择指定的选项。

unselect

value

取消选择指定的选项。


风流涕淌 翻译

赞 (0)

相关推荐

  • jquery easyui combobox模糊过滤(示例代码)

    修改jquery easyui combobox模糊过滤 复制代码 代码如下: filter:function(q,row){ var opts=$(this).combobox("options"); //return row[opts.textField].indexOf(q)==0;// return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 },formatter:function(row){ var opts=$

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

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • jQuery EasyUI编辑DataGrid用combobox实现多级联动

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascript"> $(function(){ var editing ; //判断用户是否处于编辑状态 var flag ; //判断新增和修改方法 $('#set_schedule').datagrid({ idField:'id' , fitColumns: false , url:'schedul

  • easyUI combobox实现联动效果

    我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的combobox吧 创建easyui-combobox的方法,在easyUI的官网都有: 1.从带有预定义结构的 元素创建组合框(combobox) <select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> <option value="aa&

  • EasyUI学习之Combobox级联下拉列表(2)

    EasyUI学习之Combobox级联下拉列表(2)

    本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 <fieldset> <legend>信息查询</legend> <div style="white-space: nowrap; padding: 5px;"> <label>学校:</label> <input class="easyui-combobox" type

  • EasyUI学习之Combobox下拉列表(1)

    EasyUI学习之Combobox下拉列表(1)

    本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 <label>性别:</label> <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /> 2.显示 3.js代码 //以下的方式可以解决浏览器汉字乱码问题 /******

  • Easyui form combobox省市区三级联动

    Easyui form combobox省市区三级联动

    使用方法 $(function () { //省市区三级联动 $.citySelect({ $province: $('#province'), $city: $('#city'), $County: $('#county') }); $('#ff').form('load', { 'province': '广东省', 'city': '深圳市', 'county': '罗湖区' }); }); <form id="ff" method="post">

  • Easyui的combobox实现动态数据级联效果

    Easyui的combobox实现动态数据级联效果

    实现从数据库中动态获取对应的List集合,并在Easyui的combobox中显示出来. 实现的效果如下: 1.数据库的表设计如图所示 2.数据库中填写相关的数据,如图所示.如图所示[法律法规]是所属栏目,因此他的字段parentid是0.[中国公民出国].[内地居民往来港澳]是属于法律法规的类别.因此他们的字段parentid是对应1,[法律法规]的字段categoryid是1. 3.相关的配置:已经在前面的博客中写了http://www.jb51.net/article/86381.htm

  • EasyUI中combobox默认值注意事项

    在修改数据时,需要先加载数据. 在加载combobox数据的时候,从后台传来的应该int类型的数据. html代码 复制代码 代码如下: <tr>    <td style="text-align: right;">院系:</td>        <input type="hidden" id="belongsvalue" value="${fbook.belongs}" />

  • 如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上

    使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column col : columnList ){ for(Combobox cbb : col.getCombobox()){ if(cbb != null){ str += "var ed" + ci + " = $j(\"#"+RandomNumber+"

随机推荐