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

rownumbers:true,//序號

collapsible:false,//是否可折疊的

fit: true,//自動大小

pageSize: 10,//每頁顯示的記錄條數(shù)，默認為10

pageList: [10],//可以設置每頁記錄條數(shù)的列表

method:'post',

columns:[[

{field:'mallname',title:'商城名稱',width:150,sortable:true},

{field:'url',title:'網(wǎng)址',width:150}

]],

keyHandler: {

up: function() {},

down: function() {},

enter: function() {},

query: function(q) {

//動態(tài)搜索

$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q });

$('#mallid').combogrid("setValue", q);

}

}

});

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

1.easyUi combotree 實現(xiàn)動態(tài)加載樹節(jié)點

2.easyUi combogrid 實現(xiàn)分頁和動態(tài)搜索遠程數(shù)據(jù)

下面給大家補充點知識：

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

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

idField：select中選擇提交值

textField：select中選擇的顯示值

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

filter：當數(shù)據(jù)加載時”mode”設置為”local”，如何選擇本地數(shù)據(jù)源，返回true選擇行

二、ComboGrid常用方法

options（）：返回選擇對象

grid（）：返回選擇dataGrid對象

setValues（values）：設置元素值數(shù)組

setValue（value）：設置組件的值

clear（）：清除組件的值