• jQgrid v0.3.1

• 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

1. //grid div

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

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.    });

18.    var cols={};

19.    cols["page_name"]="Page Name";

20.    cols["create_date"]="Create Date";

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

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>

40. //server side scripting

41. <?php

42. if ($_POST["action"]=="dataRequest"){

43.    $dataObject[0]["page_name"]="a";

44.    $dataObject[0]["create_date"]="100";

46.    $dataObject[1]["page_name"]="b";

47.    $dataObject[1]["create_date"]="200";

48. }

49. echo json_encode($dataObject);

50. ?>