CoreTable - Demo

It is actually the same example as the last one, the buttons are added to demostrate how the changed (ore newly inserted) rows could be retreived.

Source Code of this Website:

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', 'name', 'firstname', 'job', 'birthday', 'income'];
var spaltenTitel = {'id':'Id', 'name':'Name', 'firstname':'First Name', 'job':'Department', 'birthday':'Date of birth', 'income':'Salery'};
var spaltenBreiten = {'id':60, 'name':100, 'firstname':100, 'job':100, 'birthday':100, 'income':100};
var sortierSpalten = {'id':'id', 'name':'name', 'firstname':'firstname', 'job':'job', 'birthday':'birthday', 'income':'income'};

var daten = [];
daten[0] = {'id':1, 'name':'Müller', 'firstname':'Marius', 'job':'Administration', 'birthday':'1946-04-24.', 'income':87400};
daten[1] = {'id':3, 'name':'Maier', 'firstname':'Andrea', 'job':'Administration', 'birthday':'1982-06-12', 'income':102300};
daten[2] = {'id':5, 'name':'Huber', 'firstname':'Sybille', 'job':'Development', 'birthday':'1988-08-14', 'income':96740};
daten[3] = {'id':7, 'name':'Gerber', 'firstname':'Robert', 'job':'Development', 'birthday':'1952-11-04', 'income':65800};
daten[4] = {'id':9, 'name':'Hagmann', 'firstname':'Lisa', 'job':'Development', 'birthday':'1966-01-09', 'income':85400};

function cellRenderer() {

this.translateValue = translateValue;

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

return cellContent;
}

}

function tableListener() {

this.sortTable = sortTable;

function sortTable(src, event) {
var colNr = event['colIndex'];
sortCol = sortierSpalten[spalten[colNr]];

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

function initSite() {

// import the scriptfile for the editable table instead the one for the datatable
// edit_table is a subclass of datatable and requires the datatable.js to work, but it imports datatable itself,
// so its not necessary to import datatable.js here too.
importJS('modules/tools/edit_table.js');

// Contains the standard input elements of the CoreAll Framework
importJS('modules/tools/input.js');

// Contains input fields to enter date and/or time
importJS('modules/tools/dateinput.js');
waitWhileLoading();
}

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

var tabelle;

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

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

tabelle.setRenderer('birthday', renderer);
tabelle.setRenderer('income', renderer);

// Define "id" to be readonly (set thie editor to null, NOT undefined, this is a convention)
tabelle.setEditor('id', null);

// Define a detinput (a special version of a normal input field supporting to edit a date) to edit the date of birth
tabelle.setEditor('birthday', new dateinput(null));

// Define a selector to edit the Department, set the possible values to Adminstration and Development
tabelle.setEditor('job', new selector(null, {'Administration':'Administration', 'Development':'Development'}));

// Define a number_input field to edit the salery, it accepts numerc values only
tabelle.setEditor('income', new number_input(null));

// All other columns (name and firstname in this case) will get a standart text-input field as editor

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

tabelle.addLEvent(listener, 'head_click', 'sortTable');

tabelle.drawTable(daten);
}

/**
* Just used to shoe the array in alert boxes
*/
function getArrayString(data, linePrefix) {
var str = "";
for(var n in data) {
str += linePrefix + n + ": ";
for(var key in data[n]) {
str += key + "=" + data[n][key] + ", ";
}
str += "\n";
}
return str;
}

function insertRow() {
// Insert a new row, switch to to the edit-mode if needed, set the focus to the newly created row
tabelle.newEntry();
}

function showChanged() {
// Show the changed data
var changed = tabelle.getUpdatedRows();

var str = "Changed rows:\n";
str += getArrayString(changed, 'ID ');
alert(str);
}

function showInserted() {
// Show the inserted data
var inserted = tabelle.getInsertedRows();

var str = "Inserted rows:\n";
str += getArrayString(inserted, '');
alert(str);
}

function showEdited() {
// Show changes and inserts
var edited = tabelle.getAllEditedRows();

var str = "All edited rows:\n";
str += getArrayString(edited, '');
alert(str);
}

function undo() {
if(confirm("Really undo all changes?")) {
tabelle.undo();
}
}

function save() {
// Save the changed data
// In the example the changed data will be stored in the data array used to draw the table
// Usually you yould save the data into a file ore database.
if(tabelle.isEdited()) {
var changed = tabelle.getUpdatedRows();

var str = "Changed rows:\n";
str += getArrayString(changed, 'Row ');
for(var n in changed) {
for(var i in daten) {
if(daten[i]['id'] == n) daten[i] = changed[n];
}
}

// Save inserted rows
var inserted = tabelle.getInsertedRows();

str += "\nInserted rows:\n";
str += getArrayString(inserted, '');
for(var n in inserted) {
var newId = 1 + n; // Would be done typically ba an auto increment of a DBMS
inserted[n]['id'] = newId;
daten.push(inserted[n]);
}

alert(str);

// display the modified data array
tabelle.drawTable(daten);
}
else {
alert('No changes found');
}
}

</script>
</head>

<body onload='initSite()'>

<h2>An example of an editable CoreTable</h2>
<p>It is actually the same example as the last one, the buttons are added to demostrate how the changed (ore newly inserted)
rows could be retreived.</p>

<div id='tabelle'></div>

<p>
<button onclick='insertRow();'>New Entry</button>
<button onclick='undo();'>Undo</button>
<button onclick='save();'>Save</button>
</p><p>
<button onclick='showChanged();'>Show changed rows</button>
<button onclick='showInserted();'>Show inserted rows</button>
<button onclick='showEdited();'>Show all changes</button>
</p>
</body>
</html>