EasyUi中的Combogrid 實現分頁和動態搜尋遠端資料，easyuicombogrid

EasyUi中的Combogrid 實現分頁和動態搜尋遠端資料，easyuicombogrid

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（）：清除組件的值

您可能感興趣的文章:

• jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
• 簡介EasyUI datagrid editor combogrid搜尋方塊的實現