jqGrid PHP Demo

jqGrid for PHP comes with a large number of predefined language packs and settings for almost all popular languages. They are located in the installation package, in the /js/i18n folder. Lnaguage packs are in the form of javascript files, containing definitions for all strings in the grid that can be localized - this includes messages, captions, paging information, search/add/delete dialog labels, etc.

In order to use a particular language pack, you need to include the javascript language pack to the head of your page, after the jQuery library reference (since language packs depend on jQuery) and before referencing the jqGrid javascript file (since it is dependent on the language pack).


<?php 
require_once '../../../../php/demo/tabs3.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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.min.js" type="text/javascript"></script>
    <script src="../../../../js/jquery.cookie.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-bg.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-de.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-kr.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap';

    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
     
  </head>
  <body>
     
    <div style="margin-left:20px">
      <div style="margin-bottom: 10px">
      Select Language :
      <select id="lang" class="form-control" style="width:150px;">
          <option value="bg">Bulgarian</option>
          <option value="en" selected>English</option>
          <option value="de">German</option>
          <option value="kr">Korean</option>
      </select>
      </div>
      <div>
          <?php include ("grid.php");?>
      </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/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/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);
// Write the SQL Query

$grid->SelectCommand = 'SELECT CustomerID, CompanyName, Phone, PostalCode, City FROM customers';
// set the ouput format to json
$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
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "sortname"=>"CustomerID",
    "height"=>150)
);
$code = <<<CODE
    $("#lang").change(function(){
        var lng = $(this).val();
        if(lng) {
            $.jgrid.setRegional('grid',{regional: lng});
        }
    });
CODE;
$grid->setJSCode($code);
// Enable navigator searching
$grid->navigator = true;
// Set which buttons should be visible
$grid->setNavOptions('navigator',array("add"=>false,"edit"=>false,"del"=>false,"view"=>false,"excel"=>false));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);