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

Aus Vosp.info
Wechseln zu:Navigation, Suche
(→‎class.jquerydatatableseditable_db.php)
(→‎Datenhaltungsschicht --- alles für die Datenbank)
Zeile 215: Zeile 215:
  
 
=== Datenhaltungsschicht --- alles für die Datenbank ===
 
=== Datenhaltungsschicht --- alles für die Datenbank ===
 +
die Datenbanktabelle wird in folgenden Dateien beschrieben
 +
* [[#ext_tables.sql]]
 +
* [[#tca.php]]
 
====class.jquerydatatableseditable_db.php ====
 
====class.jquerydatatableseditable_db.php ====
 
Diese Klasse beinhaltet die Datenbankaufrufe und wird von der [[#class.tx_jquerydatatableseditable_pi1.php]] Klasse und von [[#UpdateData.php]] benötigt!
 
Diese Klasse beinhaltet die Datenbankaufrufe und wird von der [[#class.tx_jquerydatatableseditable_pi1.php]] Klasse und von [[#UpdateData.php]] benötigt!

Version vom 22. Februar 2013, 22:58 Uhr

typo3

Ziel ist es in einer typo3 Extension eine Datenbanktabelle auszulesen und in der Oberfläche (frontend) dynamisch manipulierbar (add,edit,delete row) zumachen.

  • 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

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


Schichten

Präsentationsschicht --- alles für den client

makeEditable.js

Hier findet der javascript Funktionsaufruf von der makeEditable Funktion statt.

Diese Funktion führt dazu das eine einfache html Tabelle dynamisch sortiert, editiert, Zeilen hin zu und gelöscht werden können.

Damit makeEditable weiß wohin die Formulardaten geschickt werden sollen, bekommt die Funktion als Parameter sUpdateURL, sAddURL und sDeleteURL übergeben. Das Skript #UpdateData.php welches die Formulardaten verarbeitet wird weiter unten beschrieben. Es wird über den eID Mechanismus indirekt aufgerufen, wie dies geschieht steht auch weiter unten in der #ext_localconf.php


Das #Einbinden der javascript Bibliotheken wird weiter unten beschrieben!

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

Diese Klasse beinhaltet den html code und wird von der #class.tx_jquerydatatableseditable_pi1.php Klasse benötigt!


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;
	}

}
?>

Datenhaltungsschicht --- alles für die Datenbank

die Datenbanktabelle wird in folgenden Dateien beschrieben

class.jquerydatatableseditable_db.php

Diese Klasse beinhaltet die Datenbankaufrufe und wird von der #class.tx_jquerydatatableseditable_pi1.php Klasse und von #UpdateData.php benötigt!


typo3conf/ext/jquerydatatableseditable/pi1/lib/class.jquerydatatableseditable_db.php 

<?php
/**
 * Klassenfunktionen regeln den Zugriff auf die Datenbanktabelle
 */
class jquerydatatableseditable_db {

	private static $tablename = 'tx_jquerydatatableseditable_table';
	public static $tablehead_array = array('jdet_col1', 'jdet_col2', 'jdet_col3');
	private static $tablehead_string = 'jdet_col1, jdet_col2, jdet_col3';	
	
	/**
	 * Datenbankfunktion: liest komplette Datenbank Tabelle aus
	 * 
	 * @param string $param_select
	 * @return array
	 */
	public static function getTableValues() {
		$select='uid, '.self::$tablehead_string;
		$Resource = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
			  $select,
			  self::$tablename,
			  $where_clause,
			  $groupBy='',
			  $orderBy='',
			  $limit=''
		);
		$return = array();
		while($row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($Resource)) {
			$return[] = $row;
		}  
		
		return $return;
	}

	/**
	 * Datenbankfunktion: löscht eine Zeile
	 * 
	 * @param type $param_uid
	 */
	public static function deleteDBRow($param_uid) {
		$GLOBALS['TYPO3_DB']->exec_DELETEquery(self::$tablename,'uid='.$param_uid) ;
	}
	
	/**
	 * Datenbankfunktion: fügt eine Zeile hinzu
	 * 
	 * @param type $param_fields_values
	 */
	public static function insertDBRow($param_fields_values) {
		$GLOBALS['TYPO3_DB']->exec_INSERTquery(self::$tablename,$param_fields_values,$no_quote_fields=FALSE); 		
	}
	
	/**
	 * Datenbankfunktion: editiert eine Zelle
	 * 
	 * @param type $param_uid
	 * @param type $param_col
	 * @param type $param_value
	 * @return string
	 */
	public static function updateDBCell($param_uid, $param_col, $param_value) {
		if($param_col) {
			$result = $GLOBALS['TYPO3_DB']->exec_UPDATEquery(self::$tablename,'uid='.$param_uid,array($param_col => $param_value)) ;
			if($result) {
				return $param_value;
			} else {
				return 'ERROR no good result: '.$result;
			}			
		} else {
			return 'ERROR no column name';
		}
	}	
}
?>

Logik- bzw. Steuerungsschicht

class.tx_jquerydatatableseditable_pi1.php

typo3conf/ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php 

<?php

require_once(t3lib_extMgm::extPath('jquerydatatableseditable') . 'pi1/lib/class.jquerydatatableseditable_db.php');
require_once(t3lib_extMgm::extPath('jquerydatatableseditable') . 'pi1/lib/class.jquerydatatableseditable_ui.php');

/**
 * Plugin 'jquery datatables editable' for the 'jquerydatatableseditable' extension.
 *
 * @author	fdm 
 * @package	TYPO3
 * @subpackage	tx_jquerydatatableseditable
 */
class tx_jquerydatatableseditable_pi1 extends tslib_pibase {
	public $prefixId      = 'tx_jquerydatatableseditable_pi1';		// Same as class name
	public $scriptRelPath = 'pi1/class.tx_jquerydatatableseditable_pi1.php';	// Path to this script relative to the extension dir.
	public $extKey        = 'jquerydatatableseditable';	// The extension key.
	public $pi_checkCHash = TRUE;
	
	/**
	 * The main method of the Plugin.
	 *
	 * @param string $content The Plugin content
	 * @param array $conf The Plugin configuration
	 * @return string The content that is displayed on the website
	 */
	public function main($content, array $conf) {
		$this->conf = $conf;
		$this->pi_setPiVarDefaults();
		$this->pi_loadLL();
  
		$tablevalues = jquerydatatableseditable_db::getTableValues();
		$html_table = jquerydatatableseditable_ui::arrayToJqueryDatatable($tablevalues, 'dieTabelle', jquerydatatableseditable_db::$tablehead_array);
		$html_AddFormular = jquerydatatableseditable_ui::getAddFormular(jquerydatatableseditable_db::$tablehead_array);

		$content .= $html_table.$html_AddFormular;	

		return $this->pi_wrapInBaseClass($content);
	}
}

if (defined('TYPO3_MODE') && isset($GLOBALS['TYPO3_CONF_VARS'][TYPO3_MODE]['XCLASS']['ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php'])) {
	include_once($GLOBALS['TYPO3_CONF_VARS'][TYPO3_MODE]['XCLASS']['ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php']);
}

?>


UpdateData.php

typo3conf/ext/jquerydatatableseditable/pi1/UpdateData.php 

<?php

if(array_key_exists('eID', $_GET)) {
	require_once(t3lib_extMgm::extPath('jquerydatatableseditable') . 'pi1/lib/class.jquerydatatableseditable_db.php');
	$GLOBALS['TYPO3_DB']->connectDB();

	if($_GET['eID']=='UpdateData') {
		$result = jquerydatatableseditable_db::updateDBCell($_POST['id'], $_POST['columnName'], $_POST['value']);;
		echo $result;
	} else if($_GET['eID']=='AddData') {
		jquerydatatableseditable_db::insertDBRow($_POST);
	} else if($_GET['eID']=='DeleteData') {
		jquerydatatableseditable_db::deleteDBRow($_POST['id']);
	} else {
		echo "Fehler";
		return false;
	}
}
?>


Konfiguration der Schichten

ext_localconf.php

typo3conf/ext/jquerydatatableseditable/ext_localconf.php 

<?php
// durch kickstarter generiert
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}


/**
 * eID -- damit die Formulardaten weiter an UpdateData.php weitergeleitet und verarbeitet werden
 * @see http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html
 */
{
	$TYPO3_CONF_VARS['FE']['eID_include']['UpdateData'] = 'EXT:'.$_EXTKEY.'/pi1/UpdateData.php';
	$TYPO3_CONF_VARS['FE']['eID_include']['AddData'] = 'EXT:'.$_EXTKEY.'/pi1/UpdateData.php';
	$TYPO3_CONF_VARS['FE']['eID_include']['DeleteData'] = 'EXT:'.$_EXTKEY.'/pi1/UpdateData.php';
}



// durch kickstarter generiert
t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_jquerydatatableseditable_pi1.php', '_pi1', 'list_type', 1);
?>

Einbinden der javascript Bibliotheken

setup.txt

typo3conf/ext/jquerydatatableseditable/static/ts_template/setup.txt 

page.includeJSFooter.complete=fileadmin/jquery-datatables-editable/media/js/complete.js
page.includeJSFooter.jquery=fileadmin/jquery-datatables-editable/media/js/jquery.min.js
page.includeJSFooter.dataTables=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.min.js
page.includeJSFooter.editable=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.editable.js
page.includeJSFooter.jeditable=fileadmin/jquery-datatables-editable/media/js/jquery.jeditable.js
page.includeJSFooter.jqueryui=fileadmin/jquery-datatables-editable/media/js/jquery-ui.js
page.includeJSFooter.validate=fileadmin/jquery-datatables-editable/media/js/jquery.validate.js

page.includeJSFooter.myjavascript=typo3conf/ext/jquerydatatableseditable/pi1/makeEditable.js
ext_tables.php

typo3conf/ext/jquerydatatableseditable/ext_tables.php 

<?php
// durch kickstarter generiert
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}

/**
 * statisches typoscript template einbinden
 */
{
	t3lib_extMgm::addStaticFile($_EXTKEY,'static/ts_template/', 'ts template');
}



// durch kickstarter generiert
$TCA['tx_jquerydatatableseditable_table'] = array(
	'ctrl' => array(
		'title'     => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table',		
		'label'     => 'uid',	
		'tstamp'    => 'tstamp',
		'crdate'    => 'crdate',
		'cruser_id' => 'cruser_id',
		'default_sortby' => 'ORDER BY crdate',	
		'delete' => 'deleted',	
		'enablecolumns' => array(		
			'disabled' => 'hidden',
		),
		'dynamicConfigFile' => t3lib_extMgm::extPath($_EXTKEY) . 'tca.php',
		'iconfile'          => t3lib_extMgm::extRelPath($_EXTKEY) . 'icon_tx_jquerydatatableseditable_table.gif',
	),
);


t3lib_div::loadTCA('tt_content');
$TCA['tt_content']['types']['list']['subtypes_excludelist'][$_EXTKEY.'_pi1'] = 'layout,select_key,pages';


t3lib_extMgm::addPlugin(array(
	'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tt_content.list_type_pi1',
	$_EXTKEY . '_pi1',
	t3lib_extMgm::extRelPath($_EXTKEY) . 'ext_icon.gif'
),'list_type');
?>

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

Anhang: Dateien die ausschließlich von kickstarter generiert wurden

ext_tables.sql

typo3conf/ext/jquerydatatableseditable/ext_tables.sql 

#
# Table structure for table 'tx_jquerydatatableseditable_table'
#

CREATE TABLE tx_jquerydatatableseditable_table (
	uid int(11) NOT NULL auto_increment,
	pid int(11) DEFAULT '0' NOT NULL,
	tstamp int(11) DEFAULT '0' NOT NULL,
	crdate int(11) DEFAULT '0' NOT NULL,
	cruser_id int(11) DEFAULT '0' NOT NULL,
	deleted tinyint(4) DEFAULT '0' NOT NULL,
	hidden tinyint(4) DEFAULT '0' NOT NULL,
	jdet_col1 tinytext,
	jdet_col2 tinytext,
	jdet_col3 tinytext,
	
	PRIMARY KEY (uid),
	KEY parent (pid)
) ENGINE=InnoDB;

tca.php

typo3conf/ext/jquerydatatableseditable/tca.php 

<?php
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}

$TCA['tx_jquerydatatableseditable_table'] = array(
	'ctrl' => $TCA['tx_jquerydatatableseditable_table']['ctrl'],
	'interface' => array(
		'showRecordFieldList' => 'hidden,jdet_col1,jdet_col2,jdet_col3'
	),
	'feInterface' => $TCA['tx_jquerydatatableseditable_table']['feInterface'],
	'columns' => array(
		'hidden' => array(		
			'exclude' => 1,
			'label'   => 'LLL:EXT:lang/locallang_general.xml:LGL.hidden',
			'config'  => array(
				'type'    => 'check',
				'default' => '0'
			)
		),
		'jdet_col1' => array(		
			'exclude' => 0,		
			'label' => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table.jdet_col1',		
			'config' => array(
				'type' => 'input',	
				'size' => '30',
			)
		),
		'jdet_col2' => array(		
			'exclude' => 0,		
			'label' => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table.jdet_col2',		
			'config' => array(
				'type' => 'input',	
				'size' => '30',
			)
		),
		'jdet_col3' => array(		
			'exclude' => 0,		
			'label' => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table.jdet_col3',		
			'config' => array(
				'type' => 'input',	
				'size' => '30',
			)
		),
	),
	'types' => array(
		'0' => array('showitem' => 'hidden;;1;;1-1-1, jdet_col1, jdet_col2, jdet_col3')
	),
	'palettes' => array(
		'1' => array('showitem' => '')
	)
);
?>
Abgerufen von „https://vosp.info/index.php?title=Typo3_Extension_jquery.dataTables.editable_@deprecated&oldid=1873“