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.
My Email
Google GroupHTML Sample |
See this newest PHP/Mysql Sample |
See this new PHP/Mysql Sample |
First in your html page you have to include the following javascript libraries
<link type="text/css" href="css/mtg/MyTableGrid.css" rel="stylesheet">
<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/TableGrid.js"></script>
<script type="text/javascript" src="scripts/mtg/controls.js"></script>
<script type="text/javascript" src="scripts/mtg/KeyTable.js"></script>
Tip: don't forget to put the doctype declaration at the begining of the page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Then you define a table model.
var tableModel = {
options : {
width: '640px',
title: 'CD Catalog',
pager: {
total: 55,
pages: 5,
currentPage: 1,
from: 1,
to: 10
}
},
columnModel : [
{
id : 'id',
title : 'Id',
width : 30,
editable: true,
editor: 'checkbox'
},
{
id : 'title',
title : 'Title',
width : 200,
editable: true
},
{
id : 'artist',
title : 'Artist',
width : 140,
editable: true
},
{
id : 'country',
title : 'Country',
width : 200,
editable: true,
editor: new MyTableGrid.ComboBox({
list: countryList
})
},
{
id : 'company',
title : 'Company',
width : 130
},
{
id : 'price',
title : 'Price',
type: 'number',
width : 130,
editable: true
},
{
id : 'year',
title : 'Year',
width : 130,
editable: true
}
],
rows : [
['1', 'Empire Burlesque', 'Bob Dylan', 'EU', 'Columbia', '10.90', '1985'],
['2', 'Hide your heart', 'Bonnie Tyler', 'UK', 'CBS Records', '9.90', '1988'],
['3', 'One night only', 'Bee Gees', 'UK', 'Polydor', '10.90', '1998'],
['4', 'Romanza', 'Andrea Bocelli', 'EU', 'Polydor', '10.80', '1996'],
['5', 'Pavarotti Gala Concert', 'Luciano Pavarotti', 'EU', 'DECCA', '9.90', '1991'],
['6', 'Picture book', 'Simply Red', 'EU', 'Elektra', '7.90', '1985'],
['7', 'Eros', 'Eros Ramazzotti', 'EU', 'BMG', '9.90', '1997'],
['8', 'Black angel', 'Savage Rose', 'EU', 'Mega', '10.90', '1995'],
['9', 'For the good times', 'Kenny Rogers', 'UK', 'Mucik Master', '8.70', '1995'],
['10', 'Big Willie style', 'Will Smith', 'EU', 'Columbia', '9.90', '1997']
]
};
Also you have to define where the table grid will get rendered, for example in your html page you can include the following
<div id="mytable1" style="position:relative; width: 640px; height: 300px"></div>
<div class="autocomplete" id="list" style="display:none"></div>
The last element is only useful when one of the colums contains an autocompleter editor.
Then you create an instance of MyTableGrid object and call the render method.
window.onload = function() {
tableGrid1 = new MyTableGrid(tableModel);
tableGrid1.render('mytable1');
}
As you see the complex part is defining the column model. For example the definition of a column element is as follow:
{
id : 'available',
title : 'Available',
width : 30,
editable: true,
editor: 'input',
renderer: function(value) {
if (value == 'N') return 'Not';
return 'Yes';
}
}
These are the properties you have to define:
- id: This property will identify your column. This identifier is very useful, it wil be used as a url field when a sorting or retieving data action is performed.
- title: This is the title of the column.
- width: The initial width of the column.
- editable: Is the column editable (by default is false).
- editor: Column editor definition. (this is optional)
- renderer: When you need that data is presented in a different way, then you define a renderer function.
You can choose between many types of editors, for example:
Input editor
{
id : 'title',
title : 'Title',
width : 120,
editable: true,
editor: 'input'
}
ComboBox input editor
{
id : 'country',
title : 'Country',
width : 134,
editable: true,
editor: new MyTableGrid.ComboBox({
list: countryList,
afterUpdate : function(input, selectedItem) {
alert(input.value + ' ' + selectedItem.id);
}
})
}
As you see you have to define a countryList array containing the countries you want to display, for example
var countryList = [
{value: 'UK', text: 'United Kingdon'},
{value: 'US', text: 'United States'},
{value: 'CL', text: 'Chile'}
];
You also can define an "afterUpdate" callback, which will be called every time you select an item from the list. Other options as you see in the following sample, the url parameter and the getParameters method
{
id: 'tariffRate',
title: 'Tariff Rate',
width: 90,
editable: true,
editor: new MyTableGrid.ComboBox({
url: '/samples/getTariffRates.do',
getParameters : function() {
var coords = tableGrid.getCurrentPosition();
var index = tableGrid.getColumnIndex('tariffRateTypeCd');
var tariffRateTypeCd = tableGrid.getValueAt(index, coords[1]);
var request = {};
request['tariffRateTypeCd'] = tariffRateTypeCd;
return request;
}
})
}
These options are very useful when you need to retrieve dinamically generate the items in the list of the autocomplete control
Checkbox
{
id : 'available',
title : 'Available',
width : 134,
editable: true,
editor: new MyTableGrid.CellCheckbox({
onClick: function(value, checked) {
//you can include some code here
}
})
}
When you define a checkbox editor you can include an "onclick" callback, which will be executed every time you click on the checkbox.
Radio button
{
id : 'available',
title : 'Available',
width : 134,
editable: true,
editor: new MyTableGrid.CellRadioButton({
onClick: function(value, checked) {
//you can include some code here
}
})
}
The radio button editor is very similar to the checkbox editor and includes the same properties and handlers.