easyUI中combobox是比较常用的选择数据的方式,在官方的API说明中是这样描述的:扩展自 $.fn.combo.defaults。使用 $.fn.combobox.defaults重写默认值对象。下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
而在实际的应用中我们可以使用combogrid来查询数据并返回的方式来设置其combobox中的数据。
代码片段如下:
<td class="head" noWrap>用户:</td>
<td><input id="userId" name="userId" data-options="editable:false"></td>
<input type="hidden" id="userId" name="userId" value="$!{userId}" />
<div id="toolbar2" class="datagrid-toolbar">
<input class="easyui-searchbox" searcher="searcher" prompt="请输入姓名查询" style="width:300px"></input> </div></td>
function loadGrid2(){
$('#userId').combogrid({
panelWidth : 450,
panelHight : 500,
idField : 'userId',//返回值
textField : 'userName',//显示在文本框中的文本字段
pagination : true,
rownumbers : true,
striped : true,
fit : true,
method : 'post',
editable : false,
multiple : false,
required : true,
url : appUrl + '/userAction',
queryParams : {
payee : $('#userId').val()
},
columns : [ [ {
field : 'userId',
title : '用户ID',
width : 60,
align : 'center'
},
... ...
]],
toolbar : '#toolbar2'
});
}
function searcher(val) {
val = encodeURIComponent(val);
$('#userId').combogrid({
url : appUrl + '/userInfoJsonList/userId='+val
});
$('#userId').combogrid("grid").datagrid('reload');
}
在完成以上的数据加载之后我们就可以从中获取idFeild和textFeild的值了,气体是你的数据加载和返回值必须是正确的。
以下才是核心的方法:
$('#userId').combobox('getValue');//获取combobox中idField的值
$('#username').combobox('getText'); //获取combobox中的textField的值