CoreTable - Demo

Download this SourceCode The benfit of downloading instead of copy-paste the code is, that the tabs stay tabs...

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

<title>CoreTable - Demo</title>
<script type='text/javascript' src='scripts/core/stdfuncs.js'></script>
<script type='text/javascript' src='scripts/core/app.js'></script>

<link rel='stylesheet' type='text/css' href='../coretable.css'>
<script>

var spalten = ['id', 'fullname', 'birthday', 'income'];
var spaltenTitel = {'id':'Id', 'fullname':'Full Name', 'birthday':'Date of birth', 'income':'Salery'};
var spaltenBreiten = {'id':60, 'fullname':250, 'birthday':100, 'income':100};

// Define the sortable columns, the keys in this hashtable correspond to the column-names of the table,
// the values define according to which "field" in th data array sould be sorted.
// Note that often key and value will be the same, and note the difference at "fullname".
var sortierSpalten = {'id':'id', 'fullname':'name', 'birthday':'birthday', 'income':'income'};

// Define the data to show in the table. This time the keys do not correspond to the column-name.
// The renderer will correct this, it will show the fields "name" followed be "firstname" in the column "fullname"
var daten = [];
daten[0] = {'id':1, 'name':'Müller', 'firstname':'Marius', 'birthday':'1946-04-24.', 'income':87400};
daten[1] = {'id':3, 'name':'Maier', 'firstname':'Andrea', 'birthday':'1982-06-12', 'income':102300};
daten[2] = {'id':5, 'name':'Huber', 'firstname':'Sybille', 'birthday':'1988-08-14', 'income':96740};
daten[3] = {'id':7, 'name':'Gerber', 'firstname':'Robert', 'birthday':'1952-11-04', 'income':65800};
daten[4] = {'id':9, 'name':'Hagmann', 'firstname':'Lisa', 'birthday':'1966-01-09', 'income':85400};

function cellRenderer() {

this.translateValue = translateValue;

function translateValue(col, record) {
var cellContent = "";
switch (col) {
case 'fullname':
cellContent = record['name']+", "+record['firstname']
break;
case 'birthday':
cellContent = std.sqlDate2euroDate(record[col])
break;
case 'income':
cellContent = std.number_format(record[col], 0, ".", "'");
break;
}

return cellContent;
}

}

/**
* The class tableListener
* Its methods will b calle if a click on the table-header is done or a doubleclick on the body.
* An instance of this class, together with a method name will be passed to the table as observer.
* The CoreAll Framework provides an observer pattern, which also the table uses.
*/
function tableListener() {

this.sortTable = sortTable;
this.notifyDblClick = notifyDblClick;

/**
* Will be called if a click on the table-header is done.
* The passed event object will contain the column-index of the clicked header-cell
* Using the columns-array and the hashtable telling the column-name - fielt-dame relation the
* field to sort the date will be determined. Then using "tableSort" the data will be sorted ascending.
* The sorteds data will be passed to teh table which redraws itself to display the sort-result.
*/
function sortTable(src, event) {
var colNr = event['colIndex'];
sortCol = sortierSpalten[spalten[colNr]];

daten = std.tableSort(daten, sortCol);
src.drawTable(daten, 0, spalten[colNr], 'ASC');
}

/**
* Called if a click on the table-body is done, but does nothing unless a double-click is registered.
* If a doubleclick is registered it shows the events details followed by firstname and name of the
* double-clicked person. The event's property "pos" tells the row-number or the clicked cell.
*/
function notifyDblClick(src, event) {
if (event['event']['type'] == "dblclick") {
var str = "Nach dem Doppelklick wurde folgender Event ausgelöst:\n\n";
for(var n in event) {
str += "event." + n + " = " + event[n] + "\n";
}
var rowData = src.getRowData(event.pos);
str += "\nAngeklickte Person: " + rowData.firstname + " " + rowData.name;
alert(str);
}
}
}

function initSite() {
importJS('modules/tools/table.js');
waitWhileLoading();
}

function waitWhileLoading() {
if (isScriptLoading() == true) {
setTimeout(waitWhileLoading, 50);
}
else {
setTimeout(startApplication, 250);
}
}

var tabelle;

function startApplication() {
var rederer = new cellRenderer();
var listener = new tableListener();

tabelle = new datatable('tabelle', spalten, spaltenTitel, spaltenBreiten);
tabelle.setIdCol('id');

tabelle.setRenderer('fullname', rederer);
tabelle.setRenderer('birthday', rederer);
tabelle.setRenderer('income', rederer);

tabelle.setRowNumCol(true);
tabelle.setColumnFormat('income', "align='right'");
tabelle.setAlternation([{'style':'background-color: #ffffdd;'}, {'style':'background-color: white;'}]);

// Add the listener as observer to the table, the listeners "sortTable" method will be called
// if an event of type "head_click" os thrown by the table.
tabelle.addLEvent(listener, 'head_click', 'sortTable');

// Add the listener as observer to the table, the listeners "notifyDblClick" method will be called
// if an event of type "body_click" os thrown by the table.
tabelle.addLEvent(listener, 'body_click', 'notifyDblClick');

tabelle.drawTable(daten);
}
</script>
</head>

<body onload='initSite()'>

<table><tr><td valign='top'>

<h2>A Demonstration of the event handling of the CoreTable</h2>
<div id='tabelle'></div>
</body>
</html>

A Demonstration of the event handling of the CoreTable

Source Code of this Website: