jqgrid

jqGrid-tut-1 — The resulting two-column grid, in all its shining silver glory 😉

I promised in my last post to do a jqGrid tutorial, and here it is!

So, in this tutorial, we’re going to build a basic jqGrid with local data. No need to know PHP or have a localhost installed. Just type and go.

First, you need to download jqGrid from here: http://www.trirand.com/blog/?page_id=6

Import it into your page as such:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

(Remember, the above code goes in your header!). You will have to modify the jqGrid file URLs based on where you saved your html file vs. the jqGrid files.

Then, the html:

<table id="grid"></table>

<div id="pager"></div>

And that’s all you need! IMPORTANT: make sure your “#grid” is a table and not a div. jqGrid will not work if you feed it a div id instead of a table id. The pager can (should) be a div. Now, the last (and most important) step is the script:

var mydata = [
{ id : "one", "name" : "row one" },
{ id : "two", "name" : "row two" },
{ id : "three", "name" : "row three" }
];

$("#grid").jqGrid({ //set your grid id
data: mydata, //insert data from the data object we created above
datatype: 'local',
width: 500, //specify width; optional
colNames:['Id','Name'], //define column names
colModel:[
{name:'id', index:'id', key: true, width:50},
{name:'name', index:'name', width:100}
], //define column models
pager: '#pager', //set your pager div id
sortname: 'id', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
caption:"jqGrid Example" //title of grid
});

More options for the jqGrid function can be found here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Now, just put it all together in one document and voila! You’ve got yourself a grid 😉