含義
數(shù)據(jù)表格下拉框結(jié)合了可編輯文本框控件和下拉數(shù)據(jù)表格面板控件，該控件允許用戶(hù)快速查找和選擇巧涧，并且該控件提供了鍵盤(pán)導(dǎo)航支持膊存，對(duì)行進(jìn)行篩選。
依賴(lài)
- combo
- datagrid
使用
標(biāo)簽創(chuàng)建
<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創(chuàng)建
<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}
]]
});
屬性
數(shù)據(jù)表格下拉框的屬性擴(kuò)展自combo(自定義下拉框)和datagrid(數(shù)據(jù)表格)禁灼，樹(shù)形下拉框新增屬性如下：
| 屬性名 | 類(lèi)型 | 含義 | 默認(rèn)值 |
|---|---|---|---|
| loadMsg | string | 在數(shù)據(jù)表格加載遠(yuǎn)程數(shù)據(jù)的時(shí)候顯示消息 | |
| idField | string | Id字段名稱(chēng) | |
| textField | string | 顯示在文本框中的文本字段 | |
| mode | string | 定義在文本改變的時(shí)候如何讀取數(shù)據(jù)網(wǎng)格數(shù)據(jù)管挟。設(shè)置為'remote'，數(shù)據(jù)表格將從遠(yuǎn)程服務(wù)器加載數(shù)據(jù)弄捕。當(dāng)設(shè)置為'remote'模式的時(shí)候僻孝，用戶(hù)輸入將會(huì)發(fā)送到名為'q'的http請(qǐng)求參數(shù)，向服務(wù)器檢索新的數(shù)據(jù)守谓。 | local |
| filter | function(q,row) | 定義在mode設(shè)置為local的時(shí)候如何選擇本地?cái)?shù)據(jù)穿铆，返回true時(shí)則選擇該行 |
事件
數(shù)據(jù)表格下拉框事件完全擴(kuò)展自combo(自定義下拉框)和datagrid(數(shù)據(jù)表格)。
方法
| 方法名 | 參數(shù) | 含義 | 例子 |
|---|---|---|---|
| options | none | 返回屬性對(duì)象 | |
| grid | node | 返回?cái)?shù)據(jù)表格對(duì)象 | var g =$('#cc').combogrid('grid'); // 獲取數(shù)據(jù)表格對(duì)象var r = g.datagrid('getSelected'); // 獲取選擇的行alert(r.name); |
| setValues | values | 設(shè)置組件值數(shù)組 | $('#cc').combogrid('setValues', ['001','007']); |
| setValue | value | 設(shè)置組件值 | $('#cc').combogrid('setValue', '002'); |
| clear | none | 清除組件的值 |
數(shù)據(jù)表格下拉框的方法擴(kuò)展自combo(自定義下拉框)斋荞，數(shù)據(jù)表格下拉框新增或重寫(xiě)的方法如下：
| 方法名 | 參數(shù) | 含義 | 例子 |
|---|---|---|---|
| options | none | 返回屬性對(duì)象 | |
| grid | node | 返回?cái)?shù)據(jù)表格對(duì)象 | var g =$('#cc').combogrid('grid'); // 獲取數(shù)據(jù)表格對(duì)象var r = g.datagrid('getSelected'); // 獲取選擇的行alert(r.name); |
| setValues | values | 設(shè)置組件值數(shù)組 | $('#cc').combogrid('setValues', ['001','007']); |
| setValue | value | 設(shè)置組件值 | $('#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>
