继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值
combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.
从<select>元素和一个预定义结构创建combobox.
从<input>标记创建combobox.
使用javascript创建combobox
创建两个依赖的combobox
json数据转换示例:
这些属性继承至 combo,下面是combobox的一些新增属性.
Name | Type | Description | Default |
---|---|---|---|
valueField | string | 绑定到这个combobox的基础数据值名. | value |
textField | string | 绑定到这个combobox的数据字段名. | text |
mode | string | 当文本改变时定义如何加载显示列表数据.如果设置为'remote' combobox从远程服务器加载数据.当设置为'remote'模式时, 用户输入的信息将发送作为http请求参数,参数名为'q'到服务器检索新的数据. | local |
url | string | 一个从远程服务器加载列表数据的URL. | null |
method | string | 检索数据的http请求方法. | post |
data | array | 需要加载到列表的数据. 示例代码: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" /> |
null |
filter | function | 定义如何过滤本地数据,当'mode'设置为'local'的时候. 这个函数提供两个参数: q: 用户输入的文本. row: 列表的行数据. 返回true 允许行显示 . 示例代码: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } }); |
|
formatter | function | 定义如何呈现行. 这个函数提供一个参数 :row. 示例代码: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } }); |
|
loader | function(param,success,error) | 定义如何从远程服务器加载数据. 返回false终止这个动作.这个函数提供一下参数: param:传递给远程服务器的参数对象. success(data): 当检索数据成功这个回调函数将被调用. error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用. |
json loader |
事件继承至 combo, 以下是combobox的新增事件.
Name | Parameters | Description |
---|---|---|
onBeforeLoad | param | 一个请求在加载数据之前触发,返回false取消这个加载动作. 示例代码: // 在从远程服务器加载数据之前改变请求参数 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } }); |
onLoadSuccess | none | 当远程数据加载成功之后触发. |
onLoadError | none | 远程数据加载出错触发. |
onSelect | record | 当用户选择一个列表项的时候触发. |
onUnselect | record | 当用户取消选择一个列表项的时候触发. |
方法继承至 combo,以下是combobox的新增的或者是重写的方法.
Name | Parameter | Description |
---|---|---|
options | none | 返回 options 对象. |
getData | none | 返回加载数据. |
loadData | data | 返回本地列表数据. |
reload | url | 请求远程服务器列表数据.传入'url'参数重写原始的URL值. 示例代码: $('#cc').combobox('reload'); //使用原始URL重新加载列表数据 $('#cc').combobox('reload','get_data.php'); //使用新的URL重新加载列表数据 |
setValues | values | 设置 combobox 值数组. 示例代码: $('#cc').combobox('setValues', ['001','002']); |
setValue | value | 设置 combobox 值. 示例代码: $('#cc').combobox('setValues', '001'); |
clear | none | 清除 combobox 值. |
select | value | 选择特定的项. |
unselect | value | 取消特定的选择项. |
$('#Id').combogrid('grid').datagrid('selectRecord',value值); 用来设置默认选中 $('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除选择 |
combox 例子
//打开运输工具BOX
function open_Transport_box(){
var transTool= $('#transTool').combogrid({
rownumbers:true,//显示序号
pageSize: 5,//每页显示的记录条数,默认为10
pageList: [5,10],//可以设置每页记录条数的列表
pagination: true,//是否显示分页栏
nowrap: true,//数据是否换行
striped: true,//数据背景颜色交替
panelWidth:400,//容器宽度
fitColumns:true,//自适应列宽
width:120,
//delay:300,
mode: 'remote', //远程加载数据
idField:'x_code',//唯一列
textField:'x_cn',//显示文本列
url:'transportToolAction.do?method=findTransToolCode',//URL
columns:[[
{field:'x_code',title:'注册号',width:60},
{field:'x_name',title:'企业名称',width:100},
{field:'x_cn',title:'x_cn',hidden:true,width:120}
]],
//点击赋值
onClickRow:function(){
$('#transTool').val( $('#transTool').combogrid('getValue'));
},onLoadSuccess:function(){
var grid= $('#transTool').combogrid('grid');
var rs=$(grid).datagrid('getRows');
if(rs.length>0){
var d=rs[0];
$('#transTool').combogrid('grid').datagrid('selectRecord',d.x_code);
}
}
});
//回车赋值
transTool.combogrid('textbox').keyup(function(event) {
if (event.keyCode == '13') {
$('#transTool').val( $('#transTool').combogrid('getValue'));
}
});
transTool.combogrid('textbox').blur(function() {
alert(23);
});
// //失去焦点赋值
// $("input").blur(function(){
// alert($('#transTool').combogrid('getValue'));
// $('#transTool').val( $('#transTool').combogrid('getValue'));
// });
}