Introducting

Open JS Grid v2

Title Price TutorialID CategoryID Active

The No-Work-Involved Datagrid

Basic Setup Features API Examples Download

Basic Setup

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

Username First Name Last Name

Editing

Username First Name Last Name

Linking and Images

Image link Linking from another column Linking this column Linking a col not in the table

Drop Downs

Title Drop down from another table Hardcoded drop down

Custom Callbacks and Custom Cell Types

Title Price HashBang

Row Numbering, Row Checkboxes and a Custom Dialog

Username First Name Last Name

Dynamically Add a Column

Username Last Name

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.
10
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.
50
opts.class
property Classes stored on the table element.
50
opts.page
property What page to start the grid on.
1
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: {Firstname: {header: "First name", col: "Firstname", 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)
method Shortcut / helper function for creating a new Dialog that has an OK button. Type can be one of the bootstrap notification classes. none | success | warning | important | info | inverse.
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.
1
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.
1
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
next
method Loads the next available page in the grid.
function
prev
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.
0
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.
0
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
property the type of dialog. This is different from tmpl in that it's tied some css classes. The same classes that bootstrap uses for notifications. none | success | warning | important | info | inverse
notify
title
property the title of the dialog box
0
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.
0
blur
property Adds a CSS class blur to the parent div ".columns" to style that.
true
show
method shows the dialog box
function
close
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