Skip to content
GridPHP FrameworkGridPHP FrameworkGridPHP FrameworkDocumentation

Create a Basic Grid

  1. From the GridPHP archive, copy config.php and lib folder in your new project folder.

  2. Update your database configuration in config.php. e.g.

    define("PHPGRID_DBTYPE","mysqli");
    define("PHPGRID_DBHOST","127.0.0.1");
    define("PHPGRID_DBUSER","db-user");
    define("PHPGRID_DBPASS","db-pass");
    define("PHPGRID_DBNAME","griddemo");

  3. Create a new file, e.g. firstgrid.php and add following code:

    include_once("config.php");
    

    // include and create object
    include(PHPGRID_LIBPATH."inc/jqgrid_dist.php");
    $g = new jqgrid();
    

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

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

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

  4. Adjust the JS and CSS dependencies folder paths (if changed)

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="lib/js/themes/redmond/jquery-ui.custom.css" />
      <link rel="stylesheet" href="lib/js/jqgrid/css/ui.jqgrid.css" />
      <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>
    </head>
    <body>
      <div>
        <!-- display grid here -->
        <?php echo $out?>
      </div>
    </body>
    </html>

See Live Demo

Explanation

Section titled “Explanation”
  • Backend Setup: PHP compiles the grid configuration and stores the output in $out.
  • Frontend Rendering: Render $out in your view and ensure required CSS/JS assets are loaded.
  • Configuration (set_options): Use set_options() as the central API to customize all grid behaviors.
  • Data Mapping (table): Define a database table to instantly bootstrap full CRUD functionality.
  • Mounting (render): Call render('grid_id') with a unique ID to compile and mount the grid to the DOM.

Database Configuration in Code

Section titled “Database Configuration in Code”

You can also skip config.php and load configuration on code as well.

$db_conf = array();
$db_conf["type"] = "mysqli";
$db_conf["server"] = "localhost";
$db_conf["user"] = "db-user";
$db_conf["password"] = "db-pass";
$db_conf["database"] = "db-name";


// pass connection array to jqgrid
$g = new jqgrid($db_conf);


// rest of the code ...

You can also place the lib/inc folder in your classes and lib/js folder in publicly accessible folder. In such case, make sure your change the PHP include paths & script/css paths accordingly.