Implementation of Combogrid and dynamic search for remote data _javascript techniques in Easyui

The Combogrid in jquery Easyui is a special one, a combination of combo and grid, Combogrid combines an editable text box and a Drop-down data grid panel that allows users to quickly find and select and search, Displays data that matches the characters that are currently entered. If you have a large amount of data, you need to Combogrid features that have paging. Here we introduce the Combogrid implementation paging and dynamic search for remote data in Easyui.

$ (' #mallid '). Combogrid ({ 
panelwidth:500, 
idfield: ' Mallid ',//id field 
textField: ' Mallname ',//field 
displayed URL: ".. /global/datagrid.aspx?act=malllist ", 
fitcolumns:true, 
striped:true, 
editable:true, 
pagination: true,//whether pagination 
rownumbers:true,//ordinal 
collapsible:false,//Whether or not the 
fit:true,//automatic size can be folded 
pagesize:10,// The number of record bars displayed per page, which defaults to 
pagelist: [10],//can set a list of the number of record bars per page method 
: ' Post ', 
columns:[[ 
{field: ' Mallname ', Title: ' Mall name ', width:150,sortable:true}, 
{field: ' URL ', title: ' URL ', width:150} 
]], 
keyhandler: { 
Up:function () {}, 
down:function () {}, 
enter:function () {}, 
query:function (q) { 
//Dynamic Search 
$ (' #mallid '). Combogrid ("Grid"). DataGrid ("Reload", {' keyword ': q}); 
$ (' #mallid '). Combogrid ("SetValue", q); 
} 
 

A recent project has been used for jquery Easyui, but the official demo is too simple, and there are many features that have no relevant examples. There is very little information on the Internet, you can only write demo. Here's a quick record.

Dynamic load tree node with 1.easyUi combotree implementation

2.easyUi Combogrid Implementation Paging and dynamic search remote Data

Here to add some knowledge:

First, Combogrid common attribute parameter configuration

LOADMSG: Loading remote data, displaying the information

Idfield:select Select the Submit value

Display values selected in Textfield:select

Mode: Defines how the DataGrid's data text is loaded. When set to ' remote ' mode, what type of user will be sent a server with the HTTP request parameter named ' Q ' to get new data

Filter: When the data is loaded "mode" is set to "local", how to select the native data source, return true Select row

Ii. Common methods of Combogrid

Options (): Returns the Selection object

Grid (): Return to select DataGrid Object

Setvalues (values): set an array of element values

SetValue (value): Setting the value of a component

Clear (): Clears the value of a component