含义
下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
依赖
属性
| 属性名 |
类型 |
含义 |
默认值 |
| valueField |
string |
基础数据值名称绑定到该下拉列表框 |
value |
| textField |
string |
基础数据字段名称绑定到该下拉列表框 |
text |
| groupField |
string |
指定分组的字段名称 |
null |
| groupFormatter |
function(group) |
返回格式化后的分组标题文本，以显示分组 |
| mode |
string |
定义了当文本改变时如何读取列表数据，设置为‘remote’的时候，下拉列表会从服务器加载数据，参数名字叫‘q’ |
local |
| url |
string |
通过URL加载远程列表数据 |
null |
| method |
string |
post,get |
post |
| data |
array |
数据列表加载 |
null |
| filter |
function |
定义当'mode'设置为'local'时如何过滤本地数据，函数有2个参数：q：用户输入的文本。row：列表行数据。返回true的时候允许行显示。 |
| formatter |
function |
定义如何渲染行，一个参数：row |
| loader |
function(param,success,error) |
定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数：param：传递到远程服务器的参数对象。success(data)：在检索数据成功的时候调用该回调函数。error()：在检索数据失败的时候调用该回调函数。 |
json loader |
| loadFilter |
function(data) |
返回过滤后的数据并显示 |
事件
| 事件名 |
参数 |
含义 |
| onBeforeLoad |
param |
在请求加载数据之前触发，返回false取消该加载动作 |
| onLoadSuccess |
none |
在加载远程数据成功的时候触发 |
| onLoadError |
none |
在加载远程数据事变的时候触发 |
| onSelect |
record |
在用户选择列表项的时候触发 |
| onUnselect |
record |
在用户取消选择列表项的时候触发 |
方法
| 方法名 |
参数 |
含义 |
| options |
none |
返回属性对象 |
| getData |
none |
返回加载数据 |
| loadData |
data |
读取本地列表数据 |
| reload |
url |
请求远程列表数据。 |
| setValues |
values |
设置下拉列表看值数据 |
| setValue |
value |
设置下拉列表框的值 |
| clear |
none |
清除下拉列表框的值 |
| select |
value |
选择指定项 |
| unselect |
value |
取消选择指定项 |
我的demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>form-combobox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
var data = [{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}];
var data1 = [
{key:'v11',value:'Option11',group:'Group1'},
{key:'v12',value:'Option12',group:'Group1'},
{key:'v13',value:'Option13',group:'Group1'},
{key:'v14',value:'Option14',group:'Group1'},
{key:'v21',value:'Option21',group:'Group2'},
{key:'v22',value:'Option22',group:'Group2'},
{key:'v23',value:'Option23',group:'Group2'},
{key:'v24',value:'Option24',group:'Group2'}];
$('#cc').combobox({
required:true,
multiple:true,
data: data,
valueField:"id",
textField:"text"
});
//这个是针对输入框选中的值设定的
$('#cc').combobox('setValues', ['text1','text3']);
console.log("getText:"+$('#cc').combobox('getText'));
console.log("values:"+$('#cc').combobox('getValues'));
console.log("options:"+$('#cc').combobox('options'));
console.log("getData:"+$('#cc').combobox('getData'));
$('#cc').combobox('select', 'text4');
$('#cc').combobox('clear');
$('#cc1').combobox({
required:true,
multiple:true,
data: data1,
valueField:"key",
textField:"value",
groupField: "group",
groupFormatter: function(group){
console.log("当前的group为："+group);
return '<span style="color:red">' + group + '</span>';
}
});
$('#cc2').combobox({
required:true,
multiple:true,
data: data,
valueField:"id",
textField:"text",
icons:[{
iconCls:'icon-add',
handler:function(){
console.log("开始新增");
}
},{
iconCls:'icon-cut',
handler:function(){
console.log("开始剪切");
}
}]
})
$('#cc3').combobox({
data: data,
valueField:"id",
textField:"text",
})
$('#cc4').combobox({
data: data,
valueField:"id",
textField:"text",
multiple:true,
multiline:true,
height:50,
panelHeight:'auto'
})
});
function setvalue(){
$.messager.prompt('SetValue','Please input the value(1,2,3,etc):',function(v){
if (v){
$('#cc3').combobox('setValue',v);
}
});
}
</script>
</head>
<body>
<h2>Basic Form combobox </h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:400px">
<div style="padding:10px 60px 20px 60px" >
combobox
<input id="cc" value="001">
</div>
<div style="padding:10px 60px 20px 60px" >
combobox group
<input id="cc1" >
</div>
<div style="padding:10px 60px 20px 60px" >
combobox icons
<input id="cc2" >
</div>
<div style="margin:20px 0;margin-left:15%">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc3').combobox('getValue'))">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc3').combobox('disable')">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc3').combobox('enable')">Enable</a>
</div>
<div style="padding:10px 60px 20px 60px" >
combobox option
<input id="cc3" >
</div>
<div style="padding:10px 60px 20px 60px" >
combobox multiline
<input id="cc4" >
</div>
</div>
</body>
</html>
