Typo3 Extension jquery.dataTables.editable @deprecated
Ziel ist es in einer typo3 Extension eine Datenbanktabelle auszulesen und in der Oberfläche (frontend) dynamisch manipulierbar (add,edit,delete row) zumachen.
- Hierfür werden folgende Bibliotheken verwendet
- zur Info
- Grundlagenwissen: Typo3 kickstarter Extension, typo3 Extensions entwickeln
- Insgesamt ist die hier vorgestellte Struktur stark Verbesserungswürdig, z.B. könnten die Datenbankfunktionen in eine eigene Klasse, ....
- Grundsätzlich bevor mensch sich wundert warum wieder was nicht funzt typo3-Cache löschen und im Zweifel mal unter Adminwerkzeuge > Protokoll schauen
Inhaltsverzeichnis
mit kickstarter das Grundgerüst erstellen und installieren
im Backend im Erweiterungsmanager im dropdown create new extension auswählen
- Enter extension key: jquerydatatableseditable => update
- General info:
- Title: jquery datatables editable
- Description: jquery datatables editable Description
- Category: Frontend
- ....
- => update
- New Database Tables
- Tablename: tx_jquerydatatableseditable_table
- Title of the table: jquery.datatables.editable table
- Add "Deleted" field: bestätigen
- Add "Hidden" flag: bestätigen
- NEW FIELD:
- Field name: jdet_col1
- Field title: jquery datatables editable table column 1
- Field type: string input
- => update
- NEW FIELD:
- Field name: jdet_col2
- Field title: jquery datatables editable table column 2
- Field type: string input
- => update
- NEW FIELD:
- Field name: jdet_col3
- Field title: jquery datatables editable table column 3
- Field type: string input
- => update
- Frontend Plugins
- Enter a title for the plugin: jquery datatables editable
- Add to 'Insert Plugin' list in Content Elements': ausgewählt
- Write a description for the entry (if any): jquery datatables editable description
- => update
- links unter dem Enter extension key:
- => update
- => View result
README.txt 80 View ext_icon.gif 124 ext_localconf.php 176 View ext_tables.php 1.0 K View ext_tables.sql 509 View icon_tx_jquerydatatableseditable_table.gif 135 locallang_db.xml 860 View tca.php 1.4 K View doc/wizard_form.dat 2.2 K doc/wizard_form.html 61 K pi1/class.tx_jquerydatatableseditable_pi1.php 2.9 K View pi1/locallang.xml 573 View
mit WRITE bzw danach OK wird dann auch endlich was erstellt und importiert!
danach Erweiterung installieren
neue Extension einbinden
als nächstes muss die Extension auf unsere Seite eingebunden werden
WEB > List || Seite auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)
- Allgemein
- Typ: Standard
- Seitentitel: jquery datatables editable
- Verhalten
- Caching: Cache Deaktivieren
- Dokument speichern und schließen
- Seite aktivieren
WEB > List || jquerydatatableseditable Seite auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Plug-Ins > Allgemeines Plug-In
- Allgemein
- Überschrift: jquerydatatableseditable
- Plugin
- Ausgewähltes Plug-In: jquery datatables editable
- Dokument speichern und schließen
im Frontend aufrufen und ansehen
3 Schichten
Präsentationsschicht --- alles für den client
makeEditable.js
typo3conf/ext/jquerydatatableseditable/pi1/makeEditable.js
$(document).ready( function () {
$('#dieTabelle').dataTable().makeEditable({
sUpdateURL: "index.php?eID=UpdateData",
sAddURL: "index.php?eID=AddData",
sDeleteURL: "index.php?eID=DeleteData"
});
});
class.jquerydatatableseditable_ui.php
typo3conf/ext/jquerydatatableseditable/pi1/lib/class.jquerydatatableseditable_ui.php
<?php
/**
* Klassenfunktionen geben html code zurück für die Anzeige
*/
class jquerydatatableseditable_ui {
/**
* fnc gibt ein Formularstring zurück den die jquery datatable Bibliothek
* zum hinzufügen einer Tabellenreihe nutzt
*
* @param type $param_tablename
* @param array $param_tablehead -- die Spaltennamen für den Tabellenkopf
* @return string
*/
public static function getAddFormular(array $param_tablehead) {
$return = '
<!-- Place holder where add and delete buttons will be generated -->
<div class="add_delete_toolbar" />
<!-- altervativ zu add_delete_toolbar
<button id="btnAddNewRow">Add</button> -->
<!-- Custom form for adding new records -->
<form id="formAddNewRow" action="#" title="Add new record">
';
$i=0;
foreach($param_tablehead as $columnname) {
$return .= '
<label for="'.$columnname.'" class="label">'.$columnname.'</label></br>
<input type="text" name="'.$columnname.'" id="'.$columnname.'" rel="'.$i.'" class="input"/></br>
';
$i++;
}
$return .= '</form>';
return $return;
}
/**
* transformiert eine Tabelle in eine html-table Tabelle um,
* damit die jquery datatable Bibliothek sie nutzen kann
*
* @param array $param_array -- Rückgabe array von getTableValues
* @param type $param_tableid -- tabelletag id
* @param array $param_tablehead -- die Spaltennamen für den Tabellenkopf
* @return boolean|string
*/
public static function arrayToJqueryDatatable(array $param_array, $param_tableid, array $param_tablehead=null) {
$table_start = '<table id="'.$param_tableid.'" border="1">';
$table_body = '<tbody>';
$table_stop = '</table>';
if(is_null($param_tablehead)) {
$generate_tablehead = true;
} else {
$generate_tablehead = false;
}
foreach($param_array as $id => $row) {
$table_row = $table_row_start = $table_row_content = '';
foreach($row as $key => $value) {
if($key == 'uid') {
$table_row_start = '<tr id="'.$value.'">';
} else {
$table_row_content .= '<td>'.$value.'</td>';
if($generate_tablehead) {
$param_tablehead[] = $key;
}
}
}
if($table_row_start) {
$generate_tablehead = false;
$table_row = $table_row_start.$table_row_content.'</tr>';
} else {
return false;
}
$table_body .= $table_row;
}
$table_body .= '</tbody>';
$table_head = '<thead><tr>';
foreach($param_tablehead as $headline) {
$table_head .= '<th>'.$headline.'</th>';
}
$table_head .= '</tr></thead>';
$return = $table_start.$table_head.$table_body.$table_stop;
return $return;
}
}
?>
Logikschicht --- die logik
Datenhaltungsschicht --- alles für die Datenbank
php Schicht
- Dateien die modifiziert werden müssen
- typo3conf/ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php
- Dateien die frisch erstellt werden müssen
- typo3conf/ext/jquerydatatableseditable/pi1/UpdateData.php
modifizierte Dateien
typo3conf/ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php
typo3conf/ext/jquerydatatableseditable/ext_localconf.php
neue Dateien
typo3conf/ext/jquerydatatableseditable/pi1/UpdateData.php
<?php
if(array_key_exists('eID', $_GET)) {
require_once('class.tx_jquerydatatableseditable_pi1.php');
$GLOBALS['TYPO3_DB']->connectDB();
if($_GET['eID']=='UpdateData') {
$result = tx_jquerydatatableseditable_pi1::updateDBCell($_POST['id'], $_POST['columnName'], $_POST['value']);;
echo $result;
} else if($_GET['eID']=='AddData') {
tx_jquerydatatableseditable_pi1::insertDBRow($_POST);
} else if($_GET['eID']=='DeleteData') {
tx_jquerydatatableseditable_pi1::deleteDBRow($_POST['id']);
} else {
echo "Fehler";
return false;
}
}
?>
typoscript Schicht: statisches typoscript template für die Extension
Dateien
typo3conf/ext/jquerydatatableseditable/ext_tables.php
static/ts_template/constants.txt
static/ts_template/setup.txt
Backend Konfiguration
WEB > List || jquerydatatableseditable Seite auswählen || Neuen Datensatz erstellen > Systemdatensätze > Template
- Allgemein
- Template-Titel:
- Enthält
- Statische Templates einschließen (aus Erweiterungen):
- ts template (jquerydatatableseditable)
- Statische Templates einschließen (aus Erweiterungen):
Quellen
- jquery-datatables-editable
- Zwischen client und database
- Typo3 Datenbankmanipulation