Skip to content
Grid 4 PHP Framework Docs Creating First Grid

Creating First Grid

Creating First Grid

Step1: Add PHP Grid configuration code

<?php
include_once("../../config.php");

// include and create object
include(PHPGRID_LIBPATH."inc/jqgrid_dist.php");

$db_conf = array(
                    "type"      => PHPGRID_DBTYPE,
                    "server"    => PHPGRID_DBHOST,
                    "user"      => PHPGRID_DBUSER,
                    "password"  => PHPGRID_DBPASS,
                    "database"  => PHPGRID_DBNAME
                );

$g = new jqgrid($db_conf);

// set few params
$opt["caption"] = "Sample Grid";
$g->set_options($opt);

// set database table for CRUD operations
$g->table = "clients";

// render grid and get html/js output
$out = $g->render("list1");
?>

Step2: Include JS and CSS files in your html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

    <!-- these css and js files are required by php grid -->
    <link rel="stylesheet" href="../../lib/js/themes/redmond/jquery-ui.custom.css"></link>
    <link rel="stylesheet" href="../../lib/js/jqgrid/css/ui.jqgrid.css"></link>
    <script src="../../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../../lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
    <!-- these css and js files are required by php grid -->

</head>

Step3: Print the $out variable where you wish to display grid.

<body>
    <div style="margin:10px">

    <!-- display grid here -->
    <?php echo $out?>
    <!-- display grid here -->

    </div>
</body>
</html>

Resources

Explanation

  • The PHP Part configured the grid and rendered the output to $out variable.
  • In HTML Part, we displayed the generated grid code $out along with few external css/js files. It's upto you to place external css and js files at appropriate locations.
  • ->set_options() function is most of the customization, we'll be covering later.
  • ->table is required, to enable automatic select,add,update,delete operations on that table. By default all columns of the table are selected on grid. We'll review how to select particular columns.
  • ->render() will generate the final output, to be displayed in view. It takes Grid ID as input, which should be unique on a page.