DOWNLOAD jQgrid v0.4 jQgrid with PHP script LICENSE jQgrid is distributed under the terms of the MIT license

DEMONSTRATION

jQgrid Demonstration

NEWS

• 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.

TIPS

Content Loading From Server Side

1. //grid div
2. <div id=”page” class=”grid” title=”page value”></div>
3.  
4.  
5. //javascript
6. <script>
7. jQuery(document).ready(function(){
8. $(“#page”).jqgrid({
9. “name”:”page”,
10. “search”:true,
11. “refresh”:true,
12. “create”:true,
13. “delete”:true,
14. “showpage”:true
15. });
16.  
17.  
18. var cols={};
19. cols["page_name"]=”Page Name”;
20. cols["create_date"]=”Create Date”;
21. $(“#page”).jqgrid_buildHeader(cols,{check:true});
22.  
23.  
24. var postdata={};
25. postdata["action"]=”dataRequest”;
26. $.post(“pagemodal.php”,postdata,function(data){
27. try{
28. $(“#page”).jqgrid_buildBody(data);
29. $(“#page”).jqgrid_resetCheckedItems();
30. }
31. catch(e){}
32. },”json”);
33. });
34. function jQgridHandler(obj){
35. alert(“id:”+obj["id"]+” name:”+obj["name"]+” action:”+obj["action"]+” value:”+obj["value"]);
36. }
37. </script>
38.  
39.  
40. //server side scripting
41. <?php
42. if ($_POST["action"]==”dataRequest”){
43. $dataObject[0]["page_name"]=”a”;
44. $dataObject[0]["create_date"]=”100″;
45.  
46. $dataObject[1]["page_name"]=”b”;
47. $dataObject[1]["create_date"]=”200″;
48. }
49. echo json_encode($dataObject);
50. ?>

DESCRIPTION

• 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.

DOCUMENTATION

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

1. <div id=”mygrid” class=”grid” title=”jQuery Data Grid – jQgrid”></div>
2. <script language=”javascript”>
3. //Simple Initialization
4. $(document).ready(function() {
5. $(“#mygrid”).jqgrid();
6. });
8. //Include Parameters, default all set to false, allow column to be sorted
9. $(document).ready(function() {
10. $(“#mygrid”).jqgrid({
11. “name”:”GridName”, // the name of the grid, easy for you to identify
12. “parentid”:”parent id”, // let you store the parent id from the parent grid
13. “search”:true, // enable the search button in the grid, default false
14. “refresh”:true, // enable the refresh button in the grid, default false
15. “create”:true, // enable the create button in the grid, default false
16. “update”:true, // enable the update button in the grid, default false
17. “msupdate”:true, // enable the mass update button in the grid, default false
18. “copy”:true, // enable the copy button in the grid, default false
19. “delete”:true, // enable the delete button in the grid, default false
20. “excelimport”:true, // enable the excel import button in the grid, default false
21. “excelexport”:true, // enable the excel export button in the grid, default false
22. “showpage”:true // enable the paging in the grid, default false
23. “hidefooter”:true // hide the footer bar, default is false
24. });
25. $(“#mygrid”).jqgrid_sortColumn(“col1″);
26. });
27. </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)

1. <div id=”mygrid” class=”grid” title=”jQuery Data Grid – jQgrid”></div>
2. <script language=”javascript”>
3. //Simple Initialization
4. $(document).ready(function() {
5. $(“#mygrid”).jqgrid();
6. });
8. //Include Parameters, default all set to false
9. $(document).ready(function() {
10. $(“#mygrid”).jqgrid({
11. “name”:”GridName”, // the name of the grid, easy for you to identify
12. “parentid”:”parent id”, // let you store the parent id from the parent grid
13. “search”:true, // enable the search button in the grid, default false
14. “refresh”:true, // enable the refresh button in the grid, default false
15. “create”:true, // enable the create button in the grid, default false
16. “update”:true, // enable the update button in the grid, default false
17. “msupdate”:true, // enable the mass update button in the grid, default false
18. “copy”:true, // enable the copy button in the grid, default false
19. “delete”:true, // enable the delete button in the grid, default false
20. “excelimport”:true, // enable the excel import button in the grid, default false
21. “excelexport”:true, // enable the excel export button in the grid, default false
22. “showpage”:true // enable the paging in the grid, default false
23. “hidefooter”:true // hide the footer bar, default is false
24. });
25. });
26. </script>

To create table header columns (changed in version 3)

1. var cols={};
2. cols["col1"]=”jQgrid header column 1″;
3. cols["col2"]=”jQgrid header column 2″;
4. cols["col3"]=”jQgrid header column 3″;
5. //default not included expand and check features
6. $(“#mygrid”).jqgrid_buildHeader(cols);
7. //enable grid expand icon, check and hide header features
8. $(“#mygrid”).jqgrid_buildHeader(cols,{“check”:true,”expand”:true,”hideheader”:true});

To create table body contents (changed in version 3)

1. var cols={};
2. cols["id1page1"]={};
3. cols["id1page1"]["col1"]=”jQgrid page page 1 row 1 column 1″;
4. cols["id1page1"]["col2"]=”jQgrid page page 2 row 1 column 2″;
5. cols["id1page1"]["col3"]=”jQgrid page page 3 row 1 column 3″;
6. //default not included expand and check features
7. $(“#mygrid”).jqgrid_buildBody(cols);
8. //no need to define expand and check anymore, it will follow the header options
9. //enable grid expand icon and check features
10. $(“#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)

1. <div id=”mygrid” class=”grid” title=”jQuery Data Grid – jQgrid”></div>
2. <script language=”javascript”>
3. //Simple Initialization
4. $(document).ready(function() {
5. $(“#mygrid”).jqgrid();
6. });
8. //Include Parameters, default all set to false
9. $(document).ready(function() {
10. $(“#mygrid”).jqgrid({
11. “name”:”GridName”, // the name of the grid, easy for you to identify
12. “parentid”:”parent id”, // let you store the parent id from the parent grid
13. “search”:true, // enable the search button in the grid, default false
14. “refresh”:true, // enable the refresh button in the grid, default false
15. “create”:true, // enable the create button in the grid, default false
16. “update”:true, // enable the update button in the grid, default false
17. “msupdate”:true, // enable the mass update button in the grid, default false
18. “copy”:true, // enable the copy button in the grid, default false
19. “delete”:true, // enable the delete button in the grid, default false
20. “excelimport”:true, // enable the excel import button in the grid, default false
21. “excelexport”:true, // enable the excel export button in the grid, default false
22. “showpage”:true // enable the paging in the grid, default false
23. });
24. });
25. </script>

To create table header columns (changed in version 3)

1. var cols={};
2. cols["col1"]=”jQgrid header column 1″;
3. cols["col2"]=”jQgrid header column 2″;
4. cols["col3"]=”jQgrid header column 3″;
5. //default not included expand and check features
6. $(“#mygrid”).jqgrid_buildHeader(cols);
7. //enable grid expand icon and check features
8. $(“#mygrid”).jqgrid_buildHeader(cols,{“check”:true,”expand”:true});

To create table body contents (changed in version 3)

1. var cols={};
2. cols["id1page1"]={};
3. cols["id1page1"]["col1"]=”jQgrid page page 1 row 1 column 1″;
4. cols["id1page1"]["col2"]=”jQgrid page page 2 row 1 column 2″;
5. cols["id1page1"]["col3"]=”jQgrid page page 3 row 1 column 3″;
6. //default not included expand and check features
7. $(“#mygrid”).jqgrid_buildBody(cols);
8. //enable grid expand icon and check features
9. $(“#mygrid”).jqgrid_buildBody(cols,{“check”:true,”expand”:true});

To enable/disable the loader on the grid header

1. //enable the grid loader
2. $(“#mygrid”).jqgrid_setGridLoader(“inline”);
3. //disable the grid loader
4. $(“#mygrid”).jqgrid_setGridLoader(“none”);

jQgrid API Version 0.1

To control the width of jQgrid

1. <div style=”width:400px”>
2. <div id=”mygrid” class=”grid” title=”jQuery Data Grid – jQgrid”></div>
3. </div>

Initialize jQgrid (Change in Version 2)

1. <div id=”mygrid” class=”grid” title=”jQuery Data Grid – jQgrid”></div>
2. <script language=”javascript”>
3. //Simple Initialization
4. $(document).ready(function() {
5. $(“#mygrid”).jqgrid();
6. });
8. //Include Parameters
9. $(document).ready(function() {
10. $(“#mygrid”).jqgrid({
11. “name”:”GridName”, // the name of the grid, easy for you to identify
12. “parentid”:”parent id”, // let you store the parent id from the parent grid
13. “search”:false, // disable the search button in the grid, default true
14. “refresh”:false, // disable the refresh button in the grid, default true
15. “create”:false, // disable the create button in the grid, default true
16. “update”:false, // disable the update button in the grid, default true
17. “copy”:false, // disable the copy button in the grid, default true
18. “delete”:false, // disable the delete button in the grid, default true
19. “showpage”:false // disable the paging in the grid, default true
20. });
21. });
22. </script>

To check all items in jQgrid within a page

1. $(“#mygrid”).jqgrid_checkall();

To Check a record in jQgrid

1. $(“#mygrid”).jqgrid_checkItem(“id1″);

To create table header columns (Change in Version 2)

1. var cols={};
2. cols["col1"]=”jQgrid header column 1″;
3. cols["col2"]=”jQgrid header column 2″;
4. cols["col3"]=”jQgrid header column 3″;
5. //default included expand and check features
6. $(“#mygrid”).jqgrid_buildHeader(cols);
7. //disable grid expand icon and check features
8. $(“#mygrid”).jqgrid_buildHeader(cols,{“check”:false,”expand”:false});

To create table body contents (Change in Version 2)

1. var cols={};
2. cols["id1page1"]={};
3. cols["id1page1"]["col1"]=”jQgrid page page 1 row 1 column 1″;
4. cols["id1page1"]["col2"]=”jQgrid page page 2 row 1 column 2″;
5. cols["id1page1"]["col3"]=”jQgrid page page 3 row 1 column 3″;
6. //default included expand and check features
7. $(“#mygrid”).jqgrid_buildBody(cols);
8. //disable grid expand icon and check features
9. $(“#mygrid”).jqgrid_buildBody(cols,{“check”:false,”expand”:false});

To set the title of the grid

1. //you can define the title in the <div> with id=mygrid itself
2. $(“#mygrid”).jqgrid_setTitle(“sample grid”);

To minimize/maximize the grid

1. //Only the header bar will show when minimized
2. $(“#mygrid”).jqgrid_hideshow();

Customize to your own language

1. $(“#mygrid”).jqgrid_setLanguage({
2. “pre_total”:”total”, // word “total” on the bottom right of the grid when paging enable
3. “post_total”:”rows”, // word “rows” on the bottom right of the grid when paging enable
4. “create”:”create record”, // the description of the create icon when mouseover
5. “update”:”update record”, // the description of the update icon when mouseover
6. “delete”:”delete record(s)”, // the description of the delete icon when mouseover
7. “copy”:”copy record”, // the description of the copy icon when mouseover
8. “search”:”search record(s)”, // the description of the search icon when mouseover
9. “refresh”:”refresh” // the description of the refresh icon when mouseover
10. });

To set/get the name of the grid

1. //get method
2. $(“#mygrid”).jqgrid_getName();
3. //set method
4. $(“#mygrid”).jqgrid_setName(“sample grid”);

To set/get the parent id of the grid

1. //get method
2. $(“#mygrid”).jqgrid_getParentid();
3. //set method
4. $(“#mygrid”).jqgrid_setParentid(“id1″);

To set/get the record limit per page

1. //get method
2. $(“#mygrid”).jqgrid_getRecLimit();
3. //set method (value multiple by 5, from 5 up to 50)
4. $(“#mygrid”).jqgrid_setRecLimit(50);

To get current page from the grid

1. $(“#mygrid”).jqgrid_getCurrentPage();

To change the paging value on the grid

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

To get the last checked record from the grid

1. $(“#mygrid”).jqgrid_getLastCheck();

To get all checked record(s) from the grid

1. $(“#mygrid”).jqgrid_getChecked();

The centralized event handler

1. //all events will be handled by this function, you can customize events to what you want!
2. function jQgridHandler(obj){
3. alert(“id:”+obj["id"]+” name:”+obj["name"]+” action:”+obj["action"]+” value:”+obj["value"]);
4. }

To create subgrid in centralized event handler

1. function jQgridHandler(obj){
2. if (obj["action"]==”createsubgrid”){
3. //you can try to use $.post, $.get, $.json, $.ajax to get the data from server side
4. $(“#”+obj["id"]).jqgrid({“name”:”test1″,”create”:false});
5. $(“#”+obj["id"]).jqgrid_buildHeader(header_data());
6. $(“#”+obj["id"]).jqgrid_buildBody(body_data(1));
7. $(“#”+obj["id"]).jqgrid_setPagingValue({“currpage”:1,”lastpage”:2,”totalrows”:10});
8. }
9. }

To change page in centralized event handler within a grid

1. function jQgridHandler(obj){
2. if (obj["action"]==”changepage”){
3. //you can try to use $.post, $.get, $.json, $.ajax to get the data from server side
4. //for obj["action"]==”chanagepage” or obj["action"]==”changereclimit”,obj["value"] contains two values.
5. //They are obj["value"]["page"] and obj["value"]["reclimit"]
6. $(“#”+obj["id"]).jqgrid_buildBody(body_data(obj["value"]["page"]));
7. $(“#”+obj["id"]).jqgrid_resetCheckedItems();
8. }
9. }