MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.
First you have to include the javascript libraries
<script type="text/javascript" src="../scripts/lib/prototype.js"></script>
<script type="text/javascript" src="../scripts/lib/scriptaculous.js"></script>
<script type="text/javascript" src="../scripts/mtg/myui.js"></script>
Then you define a table model like this:
var tableModel = {
options : {
width: '640px',
title: 'JAW Motors Inventory',
addSettingBehavior : false,
pager: {
pageParameter : 'page'
},
onCellBlur : function(element, value, x, y, id) {
//alert(value);
},
toolbar : {
elements: [MY.TableGrid.ADD_BTN, MY.TableGrid.DEL_BTN, MY.TableGrid.SAVE_BTN],
onSave: function() {
alert('on save handler');
},
onAdd: function() {
alert('on add handler');
},
onDelete: function() {
alert('on delete handler');
}
},
rowClass : function(rowIdx) {
var className = '';
if (rowIdx % 2 == 0) {
className = 'hightlight';
}
return className;
}
},
columnModel : [
{
id : 'carId',
title : 'Id',
width : 30,
editable: true,
sortable: false,
editor: new MY.TableGrid.CellCheckbox({
selectable : true
})
},
{
id: 'generalInfo',
title: 'General Info',
children : [
{
id : 'manufacturer',
title : 'Manufacturer',
width : 140,
sortable: true,
editable: true
},
{
id : 'model',
title : 'Model',
width : 90,
editable: true
},
{
id : 'year',
title : 'Year',
width : 60,
editable: true,
editor: new MY.TextField({
validate : function(value, errors){
if (parseInt(value) <= 1900) {
errors.push('year not allowed');
return false;
}
return true;
}
})
}
]
},
{
id : 'price',
title : 'Price',
width : 70,
type: 'number',
editable: true
},
{
id : 'dateAcquired',
title : 'Date acquired',
width : 120,
editable: true,
editor: new MY.DatePicker({
format : 'MM/dd/yyyy',
validate: function(value, errors) {
if (value != null && value.isAfter(new Date())) {
errors.push('Date selected is after than today');
return false;
}
return true;
}
})
},
{
id : 'origCountry',
title : 'Origin Country',
width : 100,
editable: true,
editor: new MY.ComboBox({
items: countryList
})
}
],
url: 'get_all_cars.php'
};
As you see you have to define a php page that provides you with the data in json format
<?php
header('Content-type: application/json');
$rowsByPage = 10;
$page = $_REQUEST['page'];
if ($page == null) $page = 1;
$sort = $_REQUEST['sortColumn'];
if ($sort == null) $sort = 'model';
$ascDescFlg = $_REQUEST['ascDescFlg'];
if ($ascDescFlg == null) $ascDescFlg = 'ASC';
$sortColumn = 'manuf_name';
if ($sort == 'year')
$sortColumn = 'model_year';
else if ($sort == 'model')
$sortColumn = 'model_name';
else if ($sort == 'price')
$sortColumn = 'car_ask_price';
$con = mysql_connect("<YOUR SERVER>", "<YOUR USER>", "<YOUR PASSWORD>");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("jawdb", $con);
$query = 'select count(1) ' .
'from cars_for_sale cfs, ' .
' car_models cm, ' .
' manufacturers m ' .
'where cfs.model_id = cm.model_id and ' .
'cm.manuf_id = m.manuf_id';
$result = mysql_query($query);
$row = mysql_fetch_array($result);
$count = $row[0];
$numberOfPages = 0;
$from = 0;
$to = 0;
$rows = array();
if ($count > 0) {
$numberOfPages = floor($count / $rowsByPage);
if (($count % $rowsByPage) > 0) $numberOfPages++;
if ($page > $numberOfPages) $page = $numberOfPages;
$from = (($page - 1) * $rowsByPage);
$to = ($page * $rowsByPage) - 1;
if ($to > $count) $to = $count;
$query = 'select a.* from ( '.
'select m.manuf_name, ' .
' cm.model_id, ' .
' cm.model_name, ' .
' cm.model_year, ' .
' cfs.car_id, ' .
' cfs.car_ask_price, ' .
' date_format(ifnull(cfs.car_date_acquired, now()), \'%m/%d/%Y\') car_date_acquired ' .
'from cars_for_sale cfs, ' .
' car_models cm, ' .
' manufacturers m ' .
'where cfs.model_id = cm.model_id and ' .
'cm.manuf_id = m.manuf_id ' .
'order by ' . $sortColumn . ' ' . $ascDescFlg . ') a ' .
'limit ' . $from . ',' . $to;
$result = mysql_query($query);
$rows = array();
$idx = 0;
while($row = mysql_fetch_array($result)) {
$rows[$idx++] = array($row['car_id'], $row['manuf_name'], $row['model_name'], $row['model_year'], $row['car_ask_price'], $row['car_date_acquired'], 'US', $row['model_name'], '1');
}
}
mysql_close($con);
?>
{
options: {
pager: {
currentPage: <?php echo $page?>,
total: <?php echo $count?>,
from: <?php echo ($from + 1)?>,
to: <?php echo ($to + 1)?>,
pages: <?php echo $numberOfPages?>
}
},
rows : <?php print json_encode($rows); ?>
}