jQuery Data Grid v0.4

2010/02/13 jQgrid v0.4 released, enhanced the sort functions, fixed the css issue and enriched the features.
2009/08/19 jQgrid v0.3.1 released, fixed function jqgrid_getCurrentPage().
2009/07/25 jQgrid v0.3 released.
2009/06/21 jQgrid v0.2 released.
2009/06/05 You can send us the grid template through tech@jqframework.com and we can link back to your site or to your contact point.
2009/06/05 jQgrid v0.1 released.
2009/06/02 Extended some features in jQgrid v0.1 and undergo final testing.
2009/05/31 jQgrid v0.1 will be released soon.

jQgrid provided a centralize event handler for you to customize.
jQgrid events included sort,create,update,search,refresh,copy,click and more.
jQgrid can open infinite subgrid.
jQgrid can let you to change your own language easily.
jQgrid can remember records that you clicked even page changed.
jQgrid supported paging handing.
jQgrid is easy to integrate and customize.
jQgrid box tested with IE6, IE7, IE8, FF3, Opera9, Safari4, Google Chrome2.
Lightweight data grid - The source file is just 19k!
Free and Free of charge under the MIT License.

If you have further questions, please contact us through our Knowledge Sharing Board.

Content Loading From Server Side

```
//grid div
```

<div id="page" class="grid" title="page value"></div>

```
 
```
```
 
```
```
//javascript
```
```
<script>
```
```
jQuery(document).ready(function(){
```
```
   $("#page").jqgrid({
```
```
      "name":"page",
```
```
      "search":true,
```
```
      "refresh":true,
```
```
      "create":true,
```
```
      "delete":true,
```
```
      "showpage":true
```
```
   });
```
```
 
```
```
 
```
```
   var cols={};
```
```
   cols["page_name"]="Page Name";
```
```
   cols["create_date"]="Create Date";
```

   $("#page").jqgrid_buildHeader(cols,{check:true});

```
 
```
```
 
```
```
   var postdata={};
```
```
   postdata["action"]="dataRequest";
```

   $.post("pagemodal.php",postdata,function(data){

```
      try{
```

         $("#page").jqgrid_buildBody(data);

         $("#page").jqgrid_resetCheckedItems();

```
      }
```
```
      catch(e){}
```
```
   },"json");
```
```
});
```
```
function jQgridHandler(obj){
```

   alert("id:"+obj["id"]+" name:"+obj["name"]+" action:"+obj["action"]+" value:"+obj["value"]);

```
}
```
```
</script>
```
```
 
```
```
 
```
```
//server side scripting
```
```
<?php
```
```
if ($_POST["action"]=="dataRequest"){
```
```
   $dataObject[0]["page_name"]="a";
```
```
   $dataObject[0]["create_date"]="100";
```
```
 
```
```
   $dataObject[1]["page_name"]="b";
```
```
   $dataObject[1]["create_date"]="200";
```
```
}
```
```
echo json_encode($dataObject);
```
```
?>
```

jQgrid Documentation

If you have further questions, please contact us through our Knowledge Sharing Board.

jQgrid API Version 0.4

Change logs:

When clicked on one row, all other selected rows will be cleared
You need to define the sortItem function in order to allow the column to be sorted
Fixed the layout issue on IE if the columns are hidden on the right hand side

<div id="mygrid" class="grid" title="jQuery Data Grid - jQgrid"></div>

//Include Parameters, default all set to false, allow column to be sorted

```
$(document).ready(function() {
```
```
   $("#mygrid").jqgrid({
```

      "name":"GridName", // the name of the grid, easy for you to identify

      "parentid":"parent id", // let you store the parent id from the parent grid

      "search":true, // enable the search button in the grid, default false

      "refresh":true, // enable the refresh button in the grid, default false

      "create":true,  // enable the create button in the grid, default false

      "update":true,  // enable the update button in the grid, default false

      "msupdate":true,  // enable the mass update button in the grid, default false

      "copy":true,  // enable the copy button in the grid, default false

      "delete":true,  // enable the delete button in the grid, default false

      "excelimport":true,  // enable the excel import button in the grid, default false

      "excelexport":true,  // enable the excel export button in the grid, default false

      "showpage":true  // enable the paging in the grid, default false

      "hidefooter":true  // hide the footer bar, default is false

```
   });
```

   $("#mygrid").jqgrid_sortColumn("col1");

```
});
```
```
</script>
```

jQgrid API Version 0.3

Change logs:

Fixed the expand issue when check is false
Added hideheader option for function buildHeader
Added hidefooter option for function jqgrid
Enhanced function jqgrid_buildBody

Initialize jQgrid (changed in version 3)

<div id="mygrid" class="grid" title="jQuery Data Grid - jQgrid"></div>

//Include Parameters, default all set to false

```
$(document).ready(function() {
```
```
   $("#mygrid").jqgrid({
```

      "name":"GridName", // the name of the grid, easy for you to identify

      "parentid":"parent id", // let you store the parent id from the parent grid

      "search":true, // enable the search button in the grid, default false

      "refresh":true, // enable the refresh button in the grid, default false

      "create":true,  // enable the create button in the grid, default false

      "update":true,  // enable the update button in the grid, default false

      "msupdate":true,  // enable the mass update button in the grid, default false

      "copy":true,  // enable the copy button in the grid, default false

      "delete":true,  // enable the delete button in the grid, default false

      "excelimport":true,  // enable the excel import button in the grid, default false

      "excelexport":true,  // enable the excel export button in the grid, default false

      "showpage":true  // enable the paging in the grid, default false

      "hidefooter":true  // hide the footer bar, default is false

```
   });
```
```
});
```
```
</script>
```

To create table header columns (changed in version 3)

```
var cols={};
```
```
cols["col1"]="jQgrid header column 1";
```
```
cols["col2"]="jQgrid header column 2";
```
```
cols["col3"]="jQgrid header column 3";
```

//default not included expand and check features

```
$("#mygrid").jqgrid_buildHeader(cols);
```

//enable grid expand icon, check and hide header features

$("#mygrid").jqgrid_buildHeader(cols,{"check":true,"expand":true,"hideheader":true});

To create table body contents (changed in version 3)

```
var cols={};
```
```
cols["id1page1"]={};
```

cols["id1page1"]["col1"]="jQgrid page page 1 row 1 column 1";

cols["id1page1"]["col2"]="jQgrid page page 2 row 1 column 2";

cols["id1page1"]["col3"]="jQgrid page page 3 row 1 column 3";

//default not included expand and check features

```
$("#mygrid").jqgrid_buildBody(cols);
```

//no need to define expand and check anymore, it will follow the header options

//enable grid expand icon and check features

$("#mygrid").jqgrid_buildBody(cols,{"check":true,"expand":true});

jQgrid API Version 0.2

Change logs:

Fixed the paging issue when no record return from server side
Fixed the size of expand and check column
Added a loader on the grid when action taken
Added feature on sorting
Centralized the grid button defination

Initialize jQgrid (changed in version 3)

<div id="mygrid" class="grid" title="jQuery Data Grid - jQgrid"></div>

//Include Parameters, default all set to false

```
$(document).ready(function() {
```
```
   $("#mygrid").jqgrid({
```

      "name":"GridName", // the name of the grid, easy for you to identify

      "parentid":"parent id", // let you store the parent id from the parent grid

      "search":true, // enable the search button in the grid, default false

      "refresh":true, // enable the refresh button in the grid, default false

      "create":true,  // enable the create button in the grid, default false

      "update":true,  // enable the update button in the grid, default false

      "msupdate":true,  // enable the mass update button in the grid, default false

      "copy":true,  // enable the copy button in the grid, default false

      "delete":true,  // enable the delete button in the grid, default false

      "excelimport":true,  // enable the excel import button in the grid, default false

      "excelexport":true,  // enable the excel export button in the grid, default false

      "showpage":true  // enable the paging in the grid, default false

```
   });
```
```
});
```
```
</script>
```

To create table header columns (changed in version 3)

```
var cols={};
```
```
cols["col1"]="jQgrid header column 1";
```
```
cols["col2"]="jQgrid header column 2";
```
```
cols["col3"]="jQgrid header column 3";
```

//default not included expand and check features

```
$("#mygrid").jqgrid_buildHeader(cols);
```

//enable grid expand icon and check features

$("#mygrid").jqgrid_buildHeader(cols,{"check":true,"expand":true});

To create table body contents (changed in version 3)

```
var cols={};
```
```
cols["id1page1"]={};
```

cols["id1page1"]["col1"]="jQgrid page page 1 row 1 column 1";

cols["id1page1"]["col2"]="jQgrid page page 2 row 1 column 2";

cols["id1page1"]["col3"]="jQgrid page page 3 row 1 column 3";

//default not included expand and check features

```
$("#mygrid").jqgrid_buildBody(cols);
```

//enable grid expand icon and check features

$("#mygrid").jqgrid_buildBody(cols,{"check":true,"expand":true});

To enable/disable the loader on the grid header

```
//enable the grid loader
```

$("#mygrid").jqgrid_setGridLoader("inline");

```
//disable the grid loader
```

$("#mygrid").jqgrid_setGridLoader("none");

jQgrid API Version 0.1

To control the width of jQgrid

```
<div style="width:400px">
```

<div id="mygrid" class="grid" title="jQuery Data Grid - jQgrid"></div>

```
</div>
```

Initialize jQgrid (Change in Version 2)

<div id="mygrid" class="grid" title="jQuery Data Grid - jQgrid"></div>

      "name":"GridName", // the name of the grid, easy for you to identify

      "parentid":"parent id", // let you store the parent id from the parent grid

      "search":false, // disable the search button in the grid, default true

      "refresh":false, // disable the refresh button in the grid, default true

      "create":false,  // disable the create button in the grid, default true

      "update":false,  // disable the update button in the grid, default true

      "copy":false,  // disable the copy button in the grid, default true

      "delete":false,  // disable the delete button in the grid, default true

      "showpage":false  // disable the paging in the grid, default true

```
   });
```
```
});
```
```
</script>
```

To check all items in jQgrid within a page

```
$("#mygrid").jqgrid_checkall();
```

To Check a record in jQgrid

```
$("#mygrid").jqgrid_checkItem("id1");
```

To create table header columns (Change in Version 2)

```
var cols={};
```
```
cols["col1"]="jQgrid header column 1";
```
```
cols["col2"]="jQgrid header column 2";
```
```
cols["col3"]="jQgrid header column 3";
```

//default included expand and check features

```
$("#mygrid").jqgrid_buildHeader(cols);
```

//disable grid expand icon and check features

$("#mygrid").jqgrid_buildHeader(cols,{"check":false,"expand":false});

To create table body contents (Change in Version 2)

```
var cols={};
```
```
cols["id1page1"]={};
```

cols["id1page1"]["col1"]="jQgrid page page 1 row 1 column 1";

cols["id1page1"]["col2"]="jQgrid page page 2 row 1 column 2";

cols["id1page1"]["col3"]="jQgrid page page 3 row 1 column 3";

//default included expand and check features

```
$("#mygrid").jqgrid_buildBody(cols);
```

//disable grid expand icon and check features

$("#mygrid").jqgrid_buildBody(cols,{"check":false,"expand":false});

To set the title of the grid

//you can define the title in the <div> with id=mygrid itself

$("#mygrid").jqgrid_setTitle("sample grid");

To minimize/maximize the grid

//Only the header bar will show when minimized

```
$("#mygrid").jqgrid_hideshow();
```

Customize to your own language

```
$("#mygrid").jqgrid_setLanguage({
```

   "pre_total":"total", // word "total" on the bottom right of the grid when paging enable

   "post_total":"rows", // word "rows" on the bottom right of the grid when paging enable

   "create":"create record", // the description of the create icon when mouseover

   "update":"update record", // the description of the update icon when mouseover

   "delete":"delete record(s)", // the description of the delete icon when mouseover

   "copy":"copy record", // the description of the copy icon when mouseover

   "search":"search record(s)", // the description of the search icon when mouseover

   "refresh":"refresh" // the description of the refresh icon when mouseover

```
});
```

To set/get the name of the grid

```
//get method
```
```
$("#mygrid").jqgrid_getName();
```
```
//set method
```

$("#mygrid").jqgrid_setName("sample grid");

To set/get the parent id of the grid

```
//get method
```
```
$("#mygrid").jqgrid_getParentid();
```
```
//set method
```
```
$("#mygrid").jqgrid_setParentid("id1");
```

To set/get the record limit per page

```
//get method
```
```
$("#mygrid").jqgrid_getRecLimit();
```

//set method (value multiple by 5, from 5 up to 50)

```
$("#mygrid").jqgrid_setRecLimit(50);
```

To get current page from the grid

```
$("#mygrid").jqgrid_getCurrentPage();
```

To change the paging value on the grid

$("#mygrid").jqgrid_setPagingValue({"currpage":1,"lastpage":2,"totalrows":10});

To get the last checked record from the grid

```
$("#mygrid").jqgrid_getLastCheck();
```

To get all checked record(s) from the grid

```
$("#mygrid").jqgrid_getChecked();
```

The centralized event handler

//all events will be handled by this function, you can customize events to what you want!

```
function jQgridHandler(obj){
```

   alert("id:"+obj["id"]+" name:"+obj["name"]+" action:"+obj["action"]+" value:"+obj["value"]);

```
}
```

To create subgrid in centralized event handler

```
function jQgridHandler(obj){
```
```
   if (obj["action"]=="createsubgrid"){
```

      //you can try to use $.post, $.get, $.json, $.ajax to get the data from server side

      $("#"+obj["id"]).jqgrid({"name":"test1","create":false});

      $("#"+obj["id"]).jqgrid_buildHeader(header_data());

      $("#"+obj["id"]).jqgrid_buildBody(body_data(1));

      $("#"+obj["id"]).jqgrid_setPagingValue({"currpage":1,"lastpage":2,"totalrows":10});

```
   }
```
```
}
```

To change page in centralized event handler within a grid

```
function jQgridHandler(obj){
```
```
   if (obj["action"]=="changepage"){
```

      //you can try to use $.post, $.get, $.json, $.ajax to get the data from server side

      //for obj["action"]=="chanagepage" or obj["action"]=="changereclimit",obj["value"] contains two values.

      //They are obj["value"]["page"] and obj["value"]["reclimit"]

      $("#"+obj["id"]).jqgrid_buildBody(body_data(obj["value"]["page"]));

      $("#"+obj["id"]).jqgrid_resetCheckedItems();

```
   }
```
```
}
```

jQuery Data Grid v0.4

Content Loading From Server Side

jQgrid Documentation

jQgrid API Version 0.4

jQgrid API Version 0.3

Initialize jQgrid (changed in version 3)

To create table header columns (changed in version 3)

To create table body contents (changed in version 3)

jQgrid API Version 0.2

Initialize jQgrid (changed in version 3)

To create table header columns (changed in version 3)

To create table body contents (changed in version 3)

To enable/disable the loader on the grid header

jQgrid API Version 0.1

To control the width of jQgrid

Initialize jQgrid (Change in Version 2)

To check all items in jQgrid within a page

To Check a record in jQgrid

To create table header columns (Change in Version 2)

To create table body contents (Change in Version 2)

To set the title of the grid

To minimize/maximize the grid

Customize to your own language

To set/get the name of the grid

To set/get the parent id of the grid

To set/get the record limit per page

To get current page from the grid

To change the paging value on the grid

To get the last checked record from the grid

To get all checked record(s) from the grid

The centralized event handler

To create subgrid in centralized event handler

To change page in centralized event handler within a grid

keyword