A Demonstration of the event handling of the CoreTable

Source Code of this Website:

Look for more code-explanation in the previous demos

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>

Syntax highlighting done by GeShi
Powered by GeSHi