含義
數據表格下拉框結合了可編輯文本框控件和下拉數據表格面板控件，該控件允許用戶快速查找和選擇，并且該控件提供了鍵盤導航支持，對行進行篩選。
依賴
- 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>
