Typo3 Extension jquery.dataTables.editable @deprecated: Unterschied zwischen den Versionen

Version vom 22. Februar 2013, 22:12 Uhr

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

1 mit kickstarter das Grundgerüst erstellen und installieren
2 neue Extension einbinden
3 3 Schichten
4 php Schicht
- 4.1 modifizierte Dateien
- 4.2 neue Dateien
5 typoscript Schicht: statisches typoscript template für die Extension
- 5.1 Dateien
- 5.2 Backend Konfiguration
6 Quellen

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)

Quellen

jquery-datatables-editable
Zwischen client und database
- eID Mechanismus
Typo3 Datenbankmanipulation
- Datenbankabfragen in Extensions
- Verwendung von Datenbanken