jqGrid
The HTML The html file looks like this:
The assumption that makes the above work is that the saved file is in the directory where you placed the jqGrid files. If it is not, you will need to change the pathing appropriately.<html> <head> <title>jqGrid Demo</title> <link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" /> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.jqGrid.js" type="text/javascript"></script> <script src="js/jqModal.js" type="text/javascript"></script> <script src="js/jqDnR.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url:'example.php', datatype: 'xml', mtype: 'GET', colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'], colModel :[ {name:'invid', index:'invid', width:55}, {name:'invdate', index:'invdate', width:90}, {name:'amount', index:'amount', width:80, align:'right'}, {name:'tax', index:'tax', width:80, align:'right'}, {name:'total', index:'total', width:80, align:'right'}, {name:'note', index:'note', width:150, sortable:false} ], pager: jQuery('#pager'), rowNum:10, rowList:[10,20,30], sortname: 'id', sortorder: "desc", viewrecords: true, imgpath: 'themes/basic/images', caption: 'My first grid' }); }); </script> </head> <body> <table id="list" class="scroll"></table> <div id="pager" class="scroll" style="text-align:center;"></div> </body> </html>
First, we need to include the files required to construct the grid. This is done between the <head> tags in the html document.
<head> <link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" /> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.jqGrid.js" type="text/javascript"></script> … </head>
- The <link…/> tag loads the style sheet for jqGrid,
- The first <script ../> tag loads the jquery library,
- The second <script ../> tag loads the required jqGrid plugins,
- The third and fourth <script ../> tags load the additional modules required for some functions, and
- The last script tag is where we write the commands needed to construct the grid. A detailed description of this area appears below.
The definition of the grid is done via the html tag <table>. To make our life easy it is good idea to give the table an id that is unique in this html document. The second step is to assign a class "scroll" so that we can use the style definitions in the CSS provided with jqGrid.<body> … <table id="list" class="scroll"></table> <div id="pager" class="scroll" style="text-align:center;"></div> … </body>
Cellspacing, cellpadding and border attributes are added by jqGrid and shoudl not be included in the definition of your table.
We want to use a paging mechanism too, so we define the navigation layer. This can be done with the commonly-used <div> tag. Giving the class "scroll" of the navigator specifies that we want to use the CSS provided with jqGrid. It is important to note that the navigation layer can be placed arbitrarily any place in the html document. Normally, and in this case, it is under the grid.
We use the jQuery document.ready function to run our script at the appropriate time. For more information on this, refer to the jQuery documentation.
The syntax for constructing the grid is:
where:jQuery('#grid_selector').jqGrid( options )
- grid_selector is the unique id of the grid table (list using our example above)
- jqGrid is the plugin, and
- options is an array, in our example several lines, of the information needed to construct the grid.
The settings and options used above are described here; listings of all settings and options can be found in API Methods and colModel API.{ url:'example.php', datatype: 'xml', mtype: 'GET', colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'], colModel :[ {name:'invid', index:'invid', width:55}, {name:'invdate', index:'invdate', width:90}, {name:'amount', index:'amount', width:80, align:'right'}, {name:'tax', index:'tax', width:80, align:'right'}, {name:'total', index:'total', width:80,align:'right'}, {name:'note', index:'note', width:150, sortable:false} ], pager: jQuery('#pager'), rowNum:10, rowList:[10,20,30], sortname: 'id', sortorder: 'desc', viewrecords: true, imgpath: 'themes/basic/images', caption: 'My first grid' }
| 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 |
| 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 xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods |
| 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 |
| 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 |
| 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 above. For the complete list of options see colModel API:
|
| 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. |
| rowNum | sets how many 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 |
| sortorder | sets the sorting order. This parameter is added to the url |
| viewrecords | defines whether we want to display the number of total records from the query in the pager bar |
| imgpath | the path to the images needed for the grid. The path should not end with '/' |
| caption | sets the caption for the grid. If this parameter is not set the Caption layer will be not visible |
Last Updated: 25/5/2011 | © Sriseshaa.com jqGrid - a jQuery Plugin, 2011
No comments:
Post a Comment