Simple data grid

Simple-data-grid is a datagrid widget.

Written in Coffeescript

Download simple-data-grid

The project is hosted on github and has unit tests.

Features

  • Works on Internet Explorer 7+, Firefox 3.6+, Chrome and Safari
  • Written in Coffeescript

Requirements

Downloads

simple-data-grid.tar.gz

Demo

Name Latin name 
<table id="demo-table" data-url="/fruits.json">
  <thead>
    <tr>
      <th>Name</th>
      <th>Latin name</th>
    </tr>
  </thead>
</table>
$(function() {
  $('#demo-table').simple_datagrid();
});

Examples

Options

auto_escape

Auto-escape the html (true / false). Default is true 

// Turn autoescape off
$('#demo-table').simple_datagrid(
  {
    auto_escape: false
  }
);

data

Provide the data for the datagrid. 

var data = [
  {
    "latin_name": "Persea americana",
    "name": "Avocado"
  },
  {
    "latin_name": "Capsicum annuum",
    "name": "Bell pepper"
  }
];

$('#demo-table').simple_datagrid(
  {
    data: data
  }
);

Callback function to create footer html.
The function looks like this: function($footer_element, datagrid_widget, data) 

function generate_footer($footer, datagrid, data) {
    $footer.append(
        "<tr><td colspan="3">my footer</td></tr>"
    );
}

$('#demo-table').simple_datagrid(
  {
    on_generate_footer: generate_footer
  }
);

on_generate_tr

Callback function to add html to the row elements.
The function looks like this: function($row_element, row_data) 

function generate_row($row_element, row_data) {
    if (row_data.blocked) {
        $row_element.addClass('blocked');
    }
}

order_by

Enable sorting (true/false/column name). The default is false. 

// Enable sorting
$('#demo-table').simple_datagrid(
  {
    order_by: true
  }
);
// Enable sorting; order by 'name' column
$('#demo-table').simple_datagrid(
  {
    order_by: 'name'
  }
);

Functions

addColumn

Add column at the end:
function addColumn(column_info)

Add column at this index:
function addColumn(column_info, index)

The column info can be a string with the column title, or an object with column properties. 

// Add column with title 'New column' at the end
// The key will be 'new_column'
$('#demo-table').simple_datagrid('addColumn', 'New column');
// Add column 'New column' afer column 2
$('#demo-table').simple_datagrid('addColumn', 'New column', 2);
// Add column with title 'New column' and key 'newcolumn'
$('#demo-table').simple_datagrid({
  title: 'New column',
  key: 'newcolumn'
});

getColumns

function getColumns()
Get column info. Result is a list of objects with 'key' and 'name' property. 

var columns = $('#demo-table').simple_datagrid('getColumns');

getSelectedRow

function getSelectedRow()
Return the data of the selected row. If no row is selected, then return null. 

var row = $('#demo-table').simple_datagrid('getSelectedRow');

loadData

function loadData(data)
Load json data. 

var data = [
  {
    "latin_name": "Persea americana",
    "name": "Avocado"
  },
  {
    "latin_name": "Capsicum annuum",
    "name": "Bell pepper"
  }
];
$('#demo-table').simple_datagrid('loadData', data);

reload

function reload()
Reload the data. 

$('#demo-table').simple_datagrid('reload');

removeColumn

function removeColumn(column_key);
Remove the column with this key. 

$('#demo-table').simple_datagrid('removeColumn', 'title');

selectRow

function selectRow(row_index);
Select the row with this index. 

// Select the first row
$('#demo-table').simple_datagrid('selectRow', 0);

setCurrentPage

function setCurrentPage(page_index)
Set current page. This will not reload the data. 

$('#demo-table').simple_datagrid('setCurrentPage', 2);

setParameter

function setParameter(key, value)
Set parameter that will be added to url in ajax query. 

$('#demo-table').simple_datagrid('setParameter', 'abc', 'def');

url

Get the url for the json data:
function url()

Set the url for the json data:
function url(value) 

var url = $('#demo-table').simple_datagrid('url');
$('#demo-table').simple_datagrid('url', '/my_data/');

Events

datagrid.load_data

The datagrid.select event is called when the data for a page is loaded. 

$('#demo-table').bind(
  'datagrid.load_data',
  function() {
    // Data is loaded
  }
);

datagrid.select

The datagrid.select event is called when a row is selected.
The event has the following properties:

  • row: the row data
  • $row: the row dom element
$('#demo-table').bind(
  'datagrid.select',
  function(e) {
    // Row is selected
    console.log(e.row);
  }
);