jqGrid PHP Demo

Info
HTML
PHP

Grid can be loaded Dynamically via ajax.


<?php 

require_once '../../../tabs.php';

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>jqGrid PHP Demo</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-1.8.2.custom.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.multiselect.css" />

    <style type="text">

        html, body {

        margin: 0;            /* Remove body margin/padding */

        padding: 0;

        overflow: hidden;    /* Remove scroll bars on browser window */

        font-size: 75%;

        }

    </style>

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

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

    <script type="text/javascript">

    $.jgrid.no_legacy_api = true;

    $.jgrid.useJSON = true;

    </script>

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

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

    <script type="text/javascript">

        jQuery(document).ready(function(){

            jQuery("#loadgrid").click(function(){

                $.ajax({

                    url: "grid.php",

                    dataType : "html",

                    data : {gridheigh: "300"},

                    success : function(data) {

                        $("#griddef").html( data );

                        $("#loadgrid").remove();

                    }

                });

            });

        });

        

    </script>

  </head>

  <body>

      <div>

          <button id="loadgrid">LoadGrid</button> 

          <div id="griddef"></div>

      </div>

      <br/>

      <?php tabs(array("grid.php"));?>

   </body>

</html>

grid.php.


<?php

require_once '../../../jq-config.php';

// include the jqGrid Class

require_once ABSPATH."php/jqGrid.php";

// include the driver class

require_once ABSPATH."php/jqGridPdo.php";



// Connection to the server

$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

// Tell the db that we use utf-8

$conn->query("SET NAMES utf8");

// Create the jqGrid instance

$grid = new jqGridRender($conn);

// this table is 1252 encoded, so we need to tell the grid

// Set the table data source

$grid->setTable('products');

// set the ouput format to xml since json have problems

$grid->dataType = 'json';

// Let the grid create the model

$grid->setColModel();

// Set the url from where we obtain the data

$grid->setUrl('grid.php');

// Set some grid options



//get the height passed as parameter

$height = jqGridUtils::GetParam('gridheigh', '200');

$grid->setGridOptions(array(

    "rowNum"=>10,

    "rowList"=>array(10,20,30),

    "sortname"=>"ProductID", 

    "height"=>$height, 

    "shrinkToFit"=>false, 

    "hoverrows"=>true

));

$grid->setColProperty("ProductID", array("width"=>80));



// We can hide some columns

$grid->setColProperty("SupplierID", array("hidden"=>true));

$grid->setColProperty("CategoryID", array("hidden"=>true));

$grid->setColProperty("UnitsOnOrder", array("hidden"=>true));

$grid->setColProperty("ReorderLevel", array("hidden"=>true));

$grid->setColProperty("Discontinued", array("hidden"=>true));

// Enable toolbar searching

$grid->toolbarfilter = true;

$grid->setFilterOptions(array("stringResult"=>true));

// Enjoy

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

$conn = null;

?>