jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結合一個可編輯的文本框和下拉數據網格面板，可以讓用戶迅速找到並選擇，又可以進行搜索，展示與當前輸入的字符相匹配的數據。如果數據量大的情況，就需要combogrid具有分頁的功能。下面給大家介紹EasyUi中的Combogrid 實現分頁和動態搜索遠程數據。
$('#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,//每頁顯示的記錄條數，默認為10
pageList: [10],//可以設置每頁記錄條數的列表
method:'post',
columns:[[
{field:'mallname',title:'商城名稱',width:150,sortable:true},
{field:'url',title:'網址',width:150}
]],
keyHandler: {
up: function() {},
down: function() {},
enter: function() {},
query: function(q) {
//動態搜索
$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q });
$('#mallid').combogrid("setValue", q);
}
}
});
最近做一個項目時用到了jquery easyui，但是官方提供的demo太簡單了，有好多功能都沒有相關的例子。網上的資料很少，只能自己寫demo了。在這裡簡單記錄一下。
1.easyUi combotree 實現動態加載樹節點
2.easyUi combogrid 實現分頁和動態搜索遠程數據
下面給大家補充點知識：
一、ComboGrid常用屬性參數配置
loadMsg：加載遠程數據，顯示的信息
idField：select中選擇提交值
textField：select中選擇的顯示值
mode：定義如何加載DataGrid的數據文本的方式。當設置為“'remote'”模式下，什麼類型的用戶將被發送http請求參數名為'q'的服務器，以獲取新的數據
filter：當數據加載時”mode”設置為”local”，如何選擇本地數據源，返回true選擇行
二、ComboGrid常用方法
options（）：返回選擇對象
grid（）：返回選擇dataGrid對象
setValues（values）：設置元素值數組
setValue（value）：設置組件的值
clear（）：清除組件的值