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', '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);
}
</script>
</head>

<body onload='initSite()'>

<h2>An example of an editable CoreTable</h2>

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

<h3>Usage</h3>
<ul>
<li>A doubleclick on a cell will bring you in the edit-mode</li>
<li>The keyboard-navigation works in both mode but the keys are different.
See <a href='http://wiki.corvent.ch/doku.php/en/user/table_shortcuts'>keyboard shorcurs</a>.
</li>
<li>If you are in the edit-mode on the last row, you can create new rows by hitting ENTER</li>
<li>You can leave the edit-mode by hitting F2 or ESC, ESC aborts the actual editing.</li>
<li>Changed cells will become red after you leave them.</li>
</ul>
<h3>In this example the editing is limitid by following conditions</h3>
<ul>
<li>The column "id" is readonly</li>
<li>The columns "Name" and "First Name" accept any Text</li>
<li>In the column "Department" you may only choose "Administration" or "Development" as value</li>
<li>The field "Date of birth" must have a valid date</li>
<li>The field "Salery" must contain a number</li>
</ul>
These limitations are done by setting appropriate editors for the different columns of the table.
How to retrieve changed data will be explained in the next example.
<br />
</body>
</html>

An example of an editable CoreTable

Usage

In this example the editing is limitid by following conditions

Source Code of this Website: