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 data to show, new in this xample a column called "id"
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;
}

}

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

function waitWhileLoading() {
if (isScriptLoading() == true) {
setTimeout(waitWhileLoading, 50);
}
else {
setTimeout(startApplication, 250); // Damit alle Vererbungen vor dem eigentlichen Start noch angelegt werden.. IE
}
}

// Declare the table object global to have access to it in the event-Handlers,
// which are called when the buttons are clicked.
var tabelle;

function startApplication() {
var rederer = new cellRenderer();
tabelle = new datatable('tabelle', spalten, spaltenTitel, spaltenBreiten);

// Telling the table which column's values are the (primary-) keys.
tabelle.setIdCol('id');

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

// Tell the table to show a row-number-column at the left.
// Note the difference between the row-number and the value in the "id"-column.
tabelle.setRowNumCol(true);
tabelle.setColumnFormat('income', "align='right'");

tabelle.drawTable(daten);
}

function showSelRows() {

// getSelectedRows() returns a numeric array of all selected rows (row-numbers)
// The row-numbers start at 0 like developpers count, the displayd values in the row-number-column start at 1,
// as like "normal" human beengs count.
// The array of the selected row numbers will be shown in an alert box.
var selRows = tabelle.getSelectedRows();
str = "Selected row numbers ("+selRows.length+")\n";
str+= selRows.join(", ");
alert(str);
}

function showSelIds() {

// getSelectedIds() returns a numeric array of the ids of all selected rows / records.
// As id the value of the column declared as idCol (passed ti the table by "setIdCol") is used.
// The array of the selected record-ids will be shown in an alert box.
var selIds = tabelle.getSelectedIds();
str = "Selected records ("+selIds.length+")\n";
str+= selIds.join(", ");
alert(str);
}

function showSelRecords() {

// like in showSelRows(), fetches all selected row-numbers.
// afterwards aditionally fetches each selected rows data by getRowData([row-nr]).
// The selected data will be shown in an alert box.
var selRows = tabelle.getSelectedRows();
str = "Selected rows ("+selRows.length+")\n";
for (var n = 0; n < selRows.length; n++) {
var rowData = tabelle.getRowData(selRows[n]);
for (var col in rowData) {
str+= col+"="+rowData[col]+", ";
}
str+= "\n";
}
alert(str);
}

/**
* The setSelModeXXX functions set the "selection-mode" for the table.
* - SEL_MODE_NONE: No selection is possible
* - SEL_MODE_SINGLE: only one row may be selected
* - SEL_MODE_MULTIPLE: multiple rows may be selected. This is the default setting.
*/
function setSelModeNone() {
tabelle.setSelectionMode(tabelle.SEL_MODE_NONE);
}

function setSelModeSingle() {
tabelle.setSelectionMode(tabelle.SEL_MODE_SINGLE);
}

function setSelModeMultiple() {
tabelle.setSelectionMode(tabelle.SEL_MODE_MULTIPLE);
}

</script>
</head>

<body onload='initSite()'>

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

<h2>A Demonstration of the selection-mechanism of the CoreTable</h2>
<div id='tabelle'></div>
<p>
<button onclick='showSelRows();'>Selected Row-Numbers</button>
<button onclick='showSelIds();'>Selected Ids</button>
<button onclick='showSelRecords();'>Selected Recors</button>
</p><p>
<button onclick='setSelModeNone();'>Switch off Slection</button>
<button onclick='setSelModeSingle();'>Set Single-Selection</button>
<button onclick='setSelModeMultiple();'>Set Multiple-Selection</button>
</p>
<h3>Usage</h3>
<ul>
<li>You may use the array-keys to move the "cursor-cell" (if the table has the keyboard-focus, i.e. if a cell is blue)</li>
<li>A mousclick selects a row, hit ENTER to slect the row where the "cursor" is.</li>
<li>Holding down the Ctrl-key multiple rows may be selected (if the selection-mode is set to multiple).</li>
<li>Holding down the Shift-Key you may select a section (if the selection-mode is set to multiple).</li>
<li>Ctrl-A selects the whole table (if the selection-mode is set to multiple).</li>
</ul>
<br>
</body>
</html>

A Demonstration of the selection-mechanism of the CoreTable

Usage

Source Code of this Website: