OpenJS Grid

Why did I make my own jQuery grid?

So any decent developer will go and look for something before making their own. Throughout the years I’ve tried many different grids, and they all have their pros and cons.

The main issues I found with existing grids:

Too complex - Required extensive configuration just to get started
Not flexible enough - Hard to customize for specific needs
Poor documentation - Difficult to understand and implement
Bloated code - Included features I didn’t need

So I decided to create my own: OpenJS Grid

Comparison with Other Grids

Here’s how other popular grids typically work:

jqGrid Example

jQuery("#list2").jqGrid({
  url:'server.php?q=2',
  datatype: "json",
  colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
  colModel:[
    {name:'id',index:'id', width:55},
    {name:'invdate',index:'invdate', width:90},
    {name:'name',index:'name asc, invdate', width:100},
    {name:'amount',index:'amount', width:80, align:"right"},
    {name:'tax',index:'tax', width:80, align:"right"},
    {name:'total',index:'total', width:80,align:"right"},
    {name:'note',index:'note', width:150, sortable:false}
  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '#pager2',
  sortname: 'id',
  viewrecords: true,
  sortorder: "desc",
  caption:"JSON Example"
});

Flexigrid Example

$("#flex1").flexigrid({
  url: 'post2.php',
  dataType: 'json',
  colModel : [
    {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
    {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
    {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
    {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
    {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
  ],
  searchitems : [
    {display: 'ISO', name : 'iso'},
    {display: 'Name', name : 'name', isdefault: true}
  ],
  sortname: "iso",
  sortorder: "asc",
  usepager: true,
  title: 'Countries',
  useRp: true,
  rp: 15,
  showTableToggleBtn: true,
  width: 700,
  onSubmit: addFormData,
  height: 200
});

OpenJS Grid - The Simple Solution

My grid simplifies all of this:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="grid.css">
  <script src="jquery.js"></script>
  <script src="grid.js"></script>
  <script>
    $(function() {
      $(".grid").loadGrid();
    });
  </script>
</head>
<body>
  <table class="grid" title="Grid" action="ajax.php">
    <tr>
      <th col="feature">Feature</th>
      <th col="version">Version</th>
    </tr>
  </table>
</body>
</html>

Server-side PHP:

<?php
require_once("grid.php");
$grid = new Grid("orders");
$grid->load();
echo json_encode($grid->data);
?>

Learn More

Check out the full documentation and examples at: http://square-bracket.com/openjs