EasyUi中的Combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)

更新時(shí)間：2016年04月01日 11:21:22 作者：大餅卷饅頭蘸米飯

jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結(jié)合一個(gè)可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板，可以讓用戶(hù)迅速找到并選擇，又可以進(jìn)行搜索，展示與當(dāng)前輸入的字符相匹配的數(shù)據(jù)。下面給大家介紹EasyUi中的Combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)

jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結(jié)合一個(gè)可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板，可以讓用戶(hù)迅速找到并選擇，又可以進(jìn)行搜索，展示與當(dāng)前輸入的字符相匹配的數(shù)據(jù)。如果數(shù)據(jù)量大的情況，就需要combogrid具有分頁(yè)的功能。下面給大家介紹EasyUi中的Combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)。

$('#mallid').combogrid({ 
panelWidth:500, 
idField:'mallid', //ID字段 
textField:'mallname', //顯示的字段 
url:"../global/datagrid.aspx?act=malllist", 
fitColumns: true, 
striped: true, 
editable:true, 
pagination : true,//是否分頁(yè) 
rownumbers:true,//序號(hào) 
collapsible:false,//是否可折疊的 
fit: true,//自動(dòng)大小 
pageSize: 10,//每頁(yè)顯示的記錄條數(shù)，默認(rèn)為10 
pageList: [10],//可以設(shè)置每頁(yè)記錄條數(shù)的列表 
method:'post', 
columns:[[ 
{field:'mallname',title:'商城名稱(chēng)',width:150,sortable:true}, 
{field:'url',title:'網(wǎng)址',width:150} 
]], 
keyHandler: { 
up: function() {}, 
down: function() {}, 
enter: function() {}, 
query: function(q) { 
//動(dòng)態(tài)搜索 
$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q }); 
$('#mallid').combogrid("setValue", q); 
} 
} 
});

最近做一個(gè)項(xiàng)目時(shí)用到了jquery easyui，但是官方提供的demo太簡(jiǎn)單了，有好多功能都沒(méi)有相關(guān)的例子。網(wǎng)上的資料很少，只能自己寫(xiě)demo了。在這里簡(jiǎn)單記錄一下。

1.easyUi combotree 實(shí)現(xiàn)動(dòng)態(tài)加載樹(shù)節(jié)點(diǎn)

2.easyUi combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)

下面給大家補(bǔ)充點(diǎn)知識(shí)：

一、ComboGrid常用屬性參數(shù)配置

loadMsg：加載遠(yuǎn)程數(shù)據(jù)，顯示的信息

idField：select中選擇提交值

textField：select中選擇的顯示值

mode：定義如何加載DataGrid的數(shù)據(jù)文本的方式。當(dāng)設(shè)置為“'remote'”模式下，什么類(lèi)型的用戶(hù)將被發(fā)送http請(qǐng)求參數(shù)名為'q'的服務(wù)器，以獲取新的數(shù)據(jù)

filter：當(dāng)數(shù)據(jù)加載時(shí)”mode”設(shè)置為”local”，如何選擇本地?cái)?shù)據(jù)源，返回true選擇行

二、ComboGrid常用方法

options（）：返回選擇對(duì)象