Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

jQgrid

2012
May 05
DOWNLOAD

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

One Response to “jQgrid”

  1. garmin 1490t says:

    This is Awesome! Thank you so much.

Your Reply