含义
数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。
依赖
- combo
- datagrid
使用
标签创建
<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
data-options="
panelWidth:450,
value:'006',
idField:'code',
textField:'name',
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]]
"></select>
javascript创建
<input id="cc" name="dept" value="01" />
$('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'code',
textField:'name',
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]]
});
属性
数据表格下拉框的属性扩展自combo(自定义下拉框)和datagrid(数据表格)，树形下拉框新增属性如下：
| 属性名 | 类型 | 含义 | 默认值 |
|---|---|---|---|
| loadMsg | string | 在数据表格加载远程数据的时候显示消息 | |
| idField | string | Id字段名称 | |
| textField | string | 显示在文本框中的文本字段 | |
| mode | string | 定义在文本改变的时候如何读取数据网格数据。设置为'remote'，数据表格将从远程服务器加载数据。当设置为'remote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。 | local |
| filter | function(q,row) | 定义在mode设置为local的时候如何选择本地数据，返回true时则选择该行 |
事件
数据表格下拉框事件完全扩展自combo(自定义下拉框)和datagrid(数据表格)。
方法
| 方法名 | 参数 | 含义 | 例子 |
|---|---|---|---|
| options | none | 返回属性对象 | |
| grid | node | 返回数据表格对象 | var g =$('#cc').combogrid('grid'); // 获取数据表格对象var r = g.datagrid('getSelected'); // 获取选择的行alert(r.name); |
| setValues | values | 设置组件值数组 | $('#cc').combogrid('setValues', ['001','007']); |
| setValue | value | 设置组件值 | $('#cc').combogrid('setValue', '002'); |
| clear | none | 清除组件的值 |
数据表格下拉框的方法扩展自combo(自定义下拉框)，数据表格下拉框新增或重写的方法如下：
| 方法名 | 参数 | 含义 | 例子 |
|---|---|---|---|
| options | none | 返回属性对象 | |
| grid | node | 返回数据表格对象 | var g =$('#cc').combogrid('grid'); // 获取数据表格对象var r = g.datagrid('getSelected'); // 获取选择的行alert(r.name); |
| setValues | values | 设置组件值数组 | $('#cc').combogrid('setValues', ['001','007']); |
| setValue | value | 设置组件值 | $('#cc').combogrid('setValue', '002'); |
| clear | none | 清除组件的值 |
我的demo
image
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>form-combotree - 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() {
$('#cc').combogrid({
panelWidth:450,
value:'006',
idField:'code',
textField:'name',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]],
data: [
{code:'value11', name:'value11',addr: 11,col4:"dwdawd1"},
{code:'value12', name:'value12',addr: 12,col4:"dwdawd2"},
{code:'value13', name:'value13',addr: 13,col4:"dwdawd3"},
{code:'value14', name:'value14',addr: 14,col4:"dwdawd4"}
],
fitColumns: true
});
$('#cc1').combogrid({
panelWidth:450,
value:'value14',
idField:'code',
textField:'name',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]],
data: [
{code:'value11', name:'value11',addr: 11,col4:"dwdawd1"},
{code:'value12', name:'value12',addr: 12,col4:"dwdawd2"},
{code:'value13', name:'value13',addr: 13,col4:"dwdawd3"},
{code:'value14', name:'value14',addr: 14,col4:"dwdawd4"}
],
fitColumns: true
});
$('#cc2').combogrid({
panelWidth:450,
value:'value14',
idField:'code',
textField:'name',
multiple:true,
height:40,
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]],
data: [
{code:'value11', name:'value11',addr: 11,col4:"dwdawd1"},
{code:'value12', name:'value12',addr: 12,col4:"dwdawd2"},
{code:'value13', name:'value13',addr: 13,col4:"dwdawd3"},
{code:'value14', name:'value14',addr: 14,col4:"dwdawd4"}
],
fitColumns: true
});
$('#cc3').combogrid({
panelWidth:450,
value:'value14',
idField:'code',
textField:'name',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]],
data: [
{code:'value11', name:'value11',addr: 11,col4:"dwdawd1"},
{code:'value12', name:'value12',addr: 12,col4:"dwdawd2"},
{code:'value13', name:'value13',addr: 13,col4:"dwdawd3"},
{code:'value14', name:'value14',addr: 14,col4:"dwdawd4"}
],
fitColumns: true,
onChange: function(newValue,oldValue){
console.log("newValue:"+newValue+"oldValue:"+oldValue);
},
onClickRow: function(index,row){
console.log("index:"+index+"row:"+row);
}
});
})
function setvalue(){
$.messager.prompt('SetValue','Please input the value:',function(v){
if (v){
$('#cc1').combogrid('setValue',v);
}
});
}
</script>
</head>
<body>
<h2>Basic Form combogrid </h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:600px;height:auto;">
<div style="padding:10px 60px 20px 60px" >
<div>combogrid</div>
<input id="cc" >
</div>
<div style="padding:10px 60px 20px 60px" >
combogrid action
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc1').combogrid('getValue'))">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combogrid('disable')">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combogrid('enable')">Enable</a>
</div>
<input id="cc1" >
</div>
<div style="padding:10px 60px 20px 60px" >
<div>combogrid action</div>
<input id="cc2" >
</div>
<div style="padding:10px 60px 20px 60px" >
<div>combogrid change</div>
<input id="cc3" >
</div>
</div>
</body>
</html>
