Quiq::JQuery::Form::ViewEdit - Formular zum Ansehen und Bearbeiten von persistenten Daten
Quiq::Hash
Die Klasse implementiert ein jQuery Widget Plugin zum Ansehen und Bearbeiten von Daten, die typischerweise aus einer Datenbank stammen.
Das Layout muss die Platzhalter __SAVE__, __DELETE__ und __EDIT__ enthalten. Für diese werden intern drei Widgets generiert: für __SAVE__ und __DELETE__ ein Button zum Speichern bzw. Löschen, für __EDIT__ eine Checkbox zum Umschalten zwischen Ansehen und Bearbeiten.
__SAVE__
__DELETE__
__EDIT__
Bei Betätigung der Button werden die Formulardaten an den action-URL gepostet. Im Erfolgsfall wird anschließend die onSuccess-Methode aufgerufen.
editCheckbox
saveButton
deleteButton
enabled
disabled
Speichern
Löschen
Bearbeiten
Die Beschriftungen (der Buttons) können über das Attribut text gendändert werden.
URL, an den die Daten bei bei Betätigung des Save- oder des Delete-Buttons geschickt werden.
Schlüssel/Wert-Paare, die als Hidden-Widgets gesetzt werden.
Die DOM-Id des Formulars.
Füge die Plugin-Instantiierung beim Aufruf von html() zum HTML-Code hinzu.
Der HTML-Code des Layouts. In das Layout wird der HTML-Code der Widgets eingesetzt.
JavaScript-Methode, die nach einem erfolgreichen Ajax-Aufruf ausgeführt wird. Parameter: onSuccess(data,textStatus,jqXHR,op), wobei op 'save' oder 'delete' ist.
Anfänglicher Zusatand des Formulars:
Der Save- und der Delete-Button werden im Edit-Modus freigeschaltet.
Nur der Save-Button wird im Edit-Modus freigeschaltet.
Die Beschriftungen der intern generierten Widgets alle oder einzeln geändert werden:
saveButton => 'Speichern',
deleteButton => 'Löschen',
editCheckBox => 'Bearbeiten',
Liste der Widgets, die in das Layout eingesetzt werden.
$html = Quiq::JQuery::Form::ViewEdit->html($h, instantiate => 1, id => 'personForm', state => 'insert', action => $c->url_for('/person/speichern'), onSuccess => q| function () { var d = new Date; var date = $.formatDate(d,'YYYY-MM-DD hh:mm:ss'); $('input[name=formTime]').val(date); } |, text => { saveButton => 'Speichern', deleteButton => 'Löschen', editCheckbox => 'Bearbeiten', }, layout => $h->cat( Quiq::Html::Table::Simple->html($h, class => 'form', rows => [ ['form-section',[colspan=>2,'Person']], ['form-widget',['Id:'],['__PER_ID__']], ['form-widget',['Vorname:'],['__PER_VORNAME__']], ['form-widget',['Nachname:'],['__PER_NACHNAME__']], ], ), Quiq::Html::Table::Simple->html($h, class => 'form', rows => [ [['__SAVE__ __DELETE__ __EDIT__']], ], ), ), widgets => [ Quiq::Html::Widget::Hidden->new( name => 'formular', value => 'person', ), Quiq::Html::Widget::Hidden->new( name => 'formTime', value => $formTime, ), Quiq::Html::Widget::ReadOnly->new( name => 'per_id', value => $per->per_id, ), Quiq::Html::Widget::TextField->new( name => 'per_vorname', size => 30, value => $per->per_vorname, ), Quiq::Html::Widget::TextField->new( name => 'per_nachname', size => 30, value => $per->per_nachname, ), ], );
$javascript = $class->pluginCode;
Liefere den JavaScript-Code des jQuery Widget Plugin. Dieser Code kann auf einer HTML-Seite inline verwendet oder - besser - vom Webserver geliefert werden.
$e = $class->new(@keyVal);
Instantiiere ein Formular-Objekt und liefere eine Referenz auf dieses Objekt zurück.
$html = $e->html($h); $html = $class->html($h,@keyVal);
Generiere den HTML-Code des Widget-Objekts und liefere diesen zurück. Als Klassenmethode gerufen, wird das Objekt intern erzeugt und mit den Attributen @keyVal instantiiert.
$javaScript = $e->instantiate;
Liefere den JavaScript-Code, der das Widget instantiiert. Alle Parameter werden intern übergeben, dies sind die Attribute:
state
action
onSuccess
1.152
Frank Seitz, http://fseitz.de/
Copyright (C) 2019 Frank Seitz
This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
To install Quiq, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Quiq
CPAN shell
perl -MCPAN -e shell install Quiq
For more information on module installation, please visit the detailed CPAN module installation guide.