Introducting

Open JS Grid _v2

The No-Work-Involved Datagrid

Basic Setup

Gist Tabs by Sean Clark

ajax.php

HTML Setup.html

script.js

	<?php
	require_once("grid.php");
	$grid = new Grid("users", array(
	"save"=>true,
	"delete"=>true
	));
	?>

view raw ajax.php hosted with ❤ by GitHub

Features

No database work needed
Open JS Grid comes with a mysql class so you don't have to do any database work yourself. Checkout the examples below on how to do what normally would be complex database queries.
Sorting / Filtering / Resizing
Basic grid functionality here, you can sort columns, filter existing data, and resize the columns. You can also resize the grid. Along with that, if you resize the grid down small enough, it adjusts to fit small sizes.
Custom Cells
Now you can make your own cell types for money, buttons, whatever alteration to data you want.
Edit / Delete
Turn on editing to edit cells. They can be text boxes, checkboxes, or even drop downs. Drop downs can even use data from other database tables.

Advanced Database Stuff
You can do complex mysql things like where, join, concat, group, having and more. Its all completely customizable in your ajax php file.
Paging / Searching
The pager is smart. It can page through one at a time, page via a slider, or even type in the page you want. Searching is also smart. When you type, it live searches the current data. When you hit enter, it will search that query on the database.
Stylus!
All the CSS for the grid is written with Styuls. It's awesome.
Completely Open Source and Commented
I wrote this pluging to teach, not just provide a plugin. So please go into the code, tear it apart, read through it, play with it. There was a lot to learn here, so I hope you will learn something too.

Download

Get it on GitHub

Version 2.1.5

Completely OOP
Open JS Grid 2 is now completely OOP. Written against a really cool (soon to be release) library called RootJS.
Bootstrap Styles
Everybody seems to love twitter bootstrap for generic styles. So Open JS Grid includes and integrates with all those standard classes.
Event Eallbacks
Instead of having built in callbacks, we have events that fire on the jQuery object. So you can bind to as many grid events as much and whenever you want.
Columns not Rows
This time around, the grid is built with Columns instead of rows. That makes for much much faster use in most cases.

Examples

Deleting

Gist Tabs by Sean Clark

ajax.php

script.js

	<?php
	require_once("grid.php");
	$grid = new Grid("users", array(
	"delete"=>true
	));
	?>

view raw ajax.php hosted with ❤ by GitHub

Editing

Gist Tabs by Sean Clark

ajax.php

script.js

setup.html

	<?php
	require_once("grid.php");
	$grid = new Grid("users", array(
	"save"=>true
	));
	?>

view raw ajax.php hosted with ❤ by GitHub

Linking and Images

Gist Tabs by Sean Clark

demo5.html

script.js

	<table class="grid demo5" action="ajax.php">
	<tr>
	<th col="Price" type="money">Price</th>
	<th col="TutorialID" type="hashBang">TutorialID</th>
	</tr>
	</table>

view raw demo5.html hosted with ❤ by GitHub

Drop Downs

Gist Tabs by Sean Clark

ajax.php

script.js

setup.html

	<?php
	// require our class
	require_once("grid.php");

	// load our grid with a table
	$grid = new Grid("tutorials", array(
	"save"=>true,
	"select" => 'selectFunction'
	));

	// if you have anonymous function support in PHP (5.3.2+) Then you can just write the
	// Function above instead of creating a separate one here.
	function selectFunction($grid) {
	$selects = array();

	// category select
	$grid->table = "categories";
	$selects["CategoryID"] = $grid->makeSelect("CategoryID","Name");

	// active select
	$selects["active"] = array("1"=>"true","0"=>"false");

	// render data
	$grid->render($selects);
	}
	?>

view raw ajax.php hosted with ❤ by GitHub

Custom Callbacks and Custom Cell Types

Gist Tabs by Sean Clark

demo5.html

script.js

	<table class="grid demo5" action="ajax.php">
	<tr>
	<th col="Price" type="money">Price</th>
	<th col="TutorialID" type="hashBang">TutorialID</th>
	</tr>
	</table>

view raw demo5.html hosted with ❤ by GitHub

Row Numbering, Row Checkboxes and a Custom Dialog

Gist Tabs by Sean Clark

script.js

	var $grid = $(".demo6").grid({
	rowNumbers: true,
	checkboxes:true
	});

	$grid.on("rowCheck",function(e, $checkbox, rowData) {
	// using the checkbox, seeing if were checked or unchecked
	var checked = $checkbox[0].checked ? "checked" : "unchecked";

	// calling the notify method on the grid plugin
	$(this).grid("notify","you "+checked+" "+rowData.Username,1000);
	});

view raw script.js hosted with ❤ by GitHub

Dynamically Add a Column

Gist Tabs by Sean Clark

script.js

	<script>
	$(function(){
	var $grid = $(".demo6").grid({
	editing: true
	}).on("loadComplete",function(e) {

	// the add column
	$(this).grid("addColumn","Add",{
	width: 60,
	insertAt: "end", // index \| column \| "end" \| "start"
	header : "Action",
	cellClass : "center"
	}, function(i) {
	return "<button class='btn btn-warning btn-mini'>Add</button>";
	});

	});

	// button click
	$grid.on("click",".cell[data-col='Add'] button",function() {
	var diag = $grid.grid("confirm","Are you sure you want to add?",function() {
	$grid.grid("notify","fake add",1000);
	console.log("diag",diag);
	});
	});

	});
	</script>

view raw script.js hosted with ❤ by GitHub

API show advanced

Javascript API

{Object} Grid

Property or Method name

Description

Default

opts

[NOTE] The options labled opts.__property__ are actually in the opts object (grid.opts.__property__). They aren't straight on grid.__property__. But these are settable from the jQuery plugin $(element).grid({opts});

Note

opts.title

property Title attribute on the table element.

opts.action

property Action attribute on the table element. This is the PHP file that will be called for every AJAX call. Read the PHP section to get started on that.

opts.nRowsShowing

property How many rows to show in the grid. This will end up being the mySQL Limit.

opts.minAllowedColWidth

property Since you're able to specify a column width on the <th>, the grid won't allow the user to resized those columns beyond this minimum pixel value.

opts.class

property Classes stored on the table element.

opts.page

property What page to start the grid on.

opts.showPager

property Whether to show the paging controls or not.

true

opts.deleting

property Whether to allow deleting on the grid. When true, this creates a far right column of delete buttons. Deleting will always ask the user to confirm with the rowID before deleting. Deletions are done via AJAX and then the row is removed from the DOM, it does not cause a refresh.

false

opts.checkboxes

property When true will add a column of checkboxes on the far right. Checking a box on a row will trigger the onRowCheck callback. You should set this callback in the callbacks object for your grid call. Checking a box will also cause a rowClick and a cellClick callback.

false

opts.rowNumbers

property When true will add a column of row numbers on the far left.

false

opts.editing

property If the entire grid is editable or not. This re renders the grid with all the editable fields

false

opts.width

property Grid width

800

pager

property Reference to the grid's pager if opts.pager was set to true.

false

cols

property A comma delimited list of all the columns showing in the grid.

columns

property The columns data object. This object keyed by column name, holds data about each column. Columns that were created from the html table are gauranteed to have "header" and "col". If type is set, that will be here, and if width is set, that will be here too. ex: {contactFirstName: {header: "First name", col: "contactFirstName", type: "text"}}

{}

toSave

property Array of rowIDs to save when save is pressed. Contains no data other than the rowID. This array has data after you edit / focus certain editable fields on the grid.

[]

notify(msg,ms)

method Shortcut / helper function for creating a new Dialog object. takes a message and a number of miliseconds. If the 'ms' is set, the dialog will go away after that much time.

function

alert(type,title,msg)

function

error(msg)

method Shortcut / helper function for creating a new Error Dialog. Just sets the title and type for you.

function

confirm(msg,callback)

method Shortcut / helper function for creating a new Confirm Dialog. This just helps in creating a dialog with 2 buttons, along with an event that attaches the passed callback function when hitting OK.

function

{Object} Pager

grid

property Reference to the parent Grid object

null

currentPage

property The current page of the pager.

totalPages

property How many total pages exist in the database. This is independent from the grid's nRowsShowing, this has to do with the ajax load query.

slider

property Reference to the pager's slider object. The slider controls fast paging.

null

update

method Gets all the refreshed data from the parent Grid object, rebuilds the HTML from template, re-adds the event listeners for the grid. Why am I doing that!? Because its much faster to rebuild the HTML from a string template, than it is to change out a bunch of values in the DOM. And then events are bound to the root pager element and delegated to all the parts.

function

method Loads the next available page in the grid.

function

method Loads the previous available page in the grid.

function

goto (page)

method Navigates to that page in the grid. This causes a refresh, changes the page number, and moves the slider.

function

{Object} Slider

pager

property Reference to the parent Pager object

null

thumb

property DOM reference to the thumb of the slider.

null

min

property Minimum slide number. The slider won't go below this.

max

property Maximum slide number. The slider won't go below this.

100

val

property Current value of the slider in terms of your max and min.

setVal

method Set's the value of the slider both in property, DOM and moves the thumb. This does NOT cause a refresh, if you want that to happen, use pager.goto(page) instead.

function

{Object} Dialog

grid

property Reference to the parent Grid object

null

$dialog

property jQuery reference to the dialog box.

null

tmpl

property Which template to use notify|confirm|alert where notify has no buttons, alert has 1 and confirm has 2. You can make your own by adding them to grid._templates. Go look at the code to see how thats done. All of the properties from this object are passed to the template.

notify

type

notify

title

property the title of the dialog box

msg

property the actual text content

autoFadeTimer

property Set this to the number of miliseconds you want the dialog to fade away after. If 0 or null, the box will always stay alive.

blur

property Adds a CSS class blur to the parent div ".columns" to style that.

true

show

method shows the dialog box

function

method fades the box out and removes it from the DOM

function

PHP API

{Class} Grid

Property

Description

Default

new Grid(table,options)

constructor Creates a new grid instance, first param is the mysql table, and the 2nd is the array of options, defined below.

class

options => save

bool Enable saving

false

options => delete

bool Enable deleting

false

options => where

string SQL where clause

options => groupBy

string SQL groupBy clause

options => having

string SQL having clause

options => joins

array array of strings, which are joins.

array()

options => fields

assoc array array of fields, keyed by the mysql alias you want, where the value is the select for that field.

array()

options => select($grid)

function select method that takes in the grid instance, and forms an array of select statements. That array needs to be keyed by the field name where the value is an array of name value pairs. The name is the value attribute on the option element of the HTML select box. value is the display for the option element. See the example on select box for more details. You must end this method with $grid->render($selects) Where $selects is your assoc array of name/value pairs.

makeSelect($valueKey,$displayKey)

function Helper method in grid.php that allows you to make a select box from a different mysql table. Set $grid->table then call $grid->makeSelect() where you pass the column that will end up as value attribute to the HTML option element, and $displayKey is the column that will end up as the display for the HTML option element.

getSaveArray()

function Helpful function when customizing your own save that gets the array of fields to save. To customize your own save, just set options => save to false, then use this method to handle the items to save.

array()

getPrimaryKey($table=NULL)

function Get's the primary key field from the table that the grid was loaded with, or a passed in table.

jQuery Plugin API

{Plugin} Grid

Call

Description

Return

$(selector).grid();

This is how you call the plugin with default options.

jQuery

$(selector).grid({options});

passing an object of options (see javascript api for possible options); You can call this anytime to update a bunch of properties after the fact as well.

jQuery

$(selector).grid("method");

Call a method on the grid object

Return

$(selector).grid("method","param1","param2");

Call a method on the grid object, passing it multiple parameters

Return

$(selector).grid("property");

get a property from the grid object

Property

$(selector).grid("property","value");

set a property on the grid object

jQuery

	<table class="users" action="ajax.php">
	<tr>
	<th col="Username">Username</th>
	<th col="FirstName">First Name</th>
	<th col="Lastname">Last Name</th>
	<th col="Email">Email</th>
	</tr>
	</table>

	<table class="demo demo1" action="ajax.php">
	<tr>
	<th col="Username" type="text">Username</th>
	<th col="Firstname" type="text">First Name</th>
	<th col="Lastname" type="text">Last Name</th>
	</tr>
	</table>

	<script>
	$(function(){
	var $grid = $(".demo5").grid({
	editing: true,
	cellTypes : {
	"hashBang": function(value, columnOpts, grid) {
	return {
	cellClass: "",
	cellValue: "/#!/"+value
	}
	}
	}
	})

	// add load complete callback
	$grid.on("loadComplete",function(e) {
	console.log("loadComplete", this.instance);

	// add cell click callback
	}).on("cellClick",function(e, $cell, rowData) {
	$(this).grid("notify",$cell.text(),800);
	});
	});
	</script>

	<table class="demo demo4" action="ajax2.php">
	<tr>
	<th col="Title">Title</th>
	<th col="CategoryID" width="250" type="select">Drop down from another table</th>
	<th col="active" width="200" type="select">Hardcoded drop down</th>
	</tr>
	</table>

	<script>
	$(function(){
	var $grid = $(".demo5").grid({
	editing: true,
	cellTypes : {
	"hashBang": function(value, columnOpts, grid) {
	return {
	cellClass: "",
	cellValue: "/#!/"+value
	}
	}
	}
	})

	// add load complete callback
	$grid.on("loadComplete",function(e) {
	console.log("loadComplete", this.instance);

	// add cell click callback
	}).on("cellClick",function(e, $cell, rowData) {
	$(this).grid("notify",$cell.text(),800);
	});
	});
	</script>

	<script>
	$(function() {
	$(".users").grid({deleting:true});
	});
	</script>

	<script>
	$(function() {
	$(".users").grid({
	editing:true
	});
	});
	</script>

Introducting

Open JS Grid v2

The No-Work-Involved Datagrid

Basic Setup

Features

Download

Get it on GitHub

Version 2.1.5

Examples

Deleting

Editing

Linking and Images

Drop Downs

Custom Callbacks and Custom Cell Types

Row Numbering, Row Checkboxes and a Custom Dialog

Dynamically Add a Column

API show advanced

Javascript API

{Object} Grid

{Object} Pager

{Object} Slider

{Object} Dialog

PHP API

{Class} Grid

jQuery Plugin API

{Plugin} Grid

Open JS Grid _v2