1. Fixed jqgrid Syntax:
<SCRIPT type = "text/JavaScript">
$ (Function (){
$ ("# List"). jqgrid ({parameter table })
});
</SCRIPT>
2. The parameter table is a key parameter. The following is a detailed description.
Property |
Description |
URL |
Tells us where to get the data. typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the body layer in the grid get the address of the data to be displayed from the background |
Datatype |
This tells jqgrid the type of information being returned so it can construct the grid. in this case, we tell the grid that we expect ct xml data to be returned from the server, but other formats are possible. for a list of all available datatypes refer to APIMethods tells us that the data types such as JSON and XML can also be stored locally. |
Mtype |
Tells us how to make the Ajax call: either 'get' or 'post'. In this case, we will use the get method to retrieve data from the server to obtain data |
Colnames |
An array in which we place the names of the columns. this is the text that appears in the head of the grid (header Layer ). the names are separated with commas is an array used to display the header title |
Colmodel |
An array that describes the model of the columns. this is the most important part of the grid. here I explain only the options used abve. an array that describes the model of the columns. this is the most important part of the grid. here I explain only the options used abve. for the complete list of options see colmodel API NameThe name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats column name IndexThe name passed to the server on which to sort the data (note that we cocould pass column numbers instead ). typically this is the name (or names) from database-this is server-side sorting, so what you pass depends on what your server expects to receive index is the order of your column WidthThe width of the column, in pixels row width (default) AlignThe alignment of the column is centered or left SortableSpecifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect (whether it can be continued) |
Pager |
Defines that we want to use a pager bar to navigate through the records. this must be a valid HTML element; in our example we gave the DIV the ID of "pager", but any name is acceptable. note that the navigation layer (the "pager" Div) can be positioned anywhere you want, determined by your HTML; in our example we specified that the pager will appear after the body layer. number of displayed pages |
Rownum |
Sets how to configure records we want to view in the grid. this parameter is passed to the URL for use by the server routine retrieving the data |
Rowlist |
An array to construct a select box element in the pager in which we can change the number of the visible rows. when changed during the execution, this parameter replaces the rownum parameter that is passed to the URL |
Sortname |
Sets the initial sorting column. Can be a name or number. This parameter is added to the URL for use by the server routine |
Viewrecords |
Defines whether we want to display the number of total records from the query in the pager bar |
Caption |
Sets the caption for the grid. If this parameter is not set the caption layer will be not visible |
Connection address: http://www.trirand.com/jqgridwiki/doku.php? Id = wiki: first_grid # behind_the_scenesgrid_data