Combogrid in EasyUi implements paging and dynamic search of remote data_javascript skills

Combogrid in jquery easyui is quite special. It is a combination of combo and grid. Combogrid combines an editable text box and a drop-down data grid panel, allowing users to quickly find and select, search, display and current input. The characters match the data. If the amount of data is large, combogrid needs to have paging function. Let me introduce Combogrid in EasyUi to implement paging and dynamic search of remote data.

$('#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); 
} 
} 
}); 

I recently used jquery easyui when working on a project, but the official demo provided was too simple, and there were many functions without relevant examples. There is very little information on the Internet, so I can only write the demo myself. Just record it briefly here.

1.easyUi combotree implements dynamic loading of tree nodes

2.easyUi combogrid implements paging and dynamic search of remote data

Let me add some knowledge to you:

1. ComboGrid common attribute parameter configuration

loadMsg: Load remote data, displayed information

idField: Select the submitted value in select

textField: Display value selected in select

mode: Define how to load the data text of the DataGrid. When set to "'remote'" mode, what type of user will be sent to the server with http request parameter named 'q' to obtain new data

filter: When the data is loaded, "mode" is set to "local", how to select the local data source and return true to select the row

2. Common methods of ComboGrid

options(): Return the selection object

grid(): Returns the selected dataGrid object

setValues(values): Set element value array

setValue(value): Set the value of the component

clear(): clear the value of the component